Passing value to jquery created input field

Question

I am trying to pass a value with jquery to the SKU input field from woocommerce that is generated dynamically when you click on the quick edit button in wp-admin/edit.php?post_type=product, but for some reason is not pasting the value the field.

function generateRandomString($length = 10) {
    $characters = '0123456789ABCDEFGHIJKMNOPQRSTUVWXYZ';
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, strlen($characters) - 1)];
    }
    return $randomString;
}
function quick_edit_sku($product) { 
    $string = generateRandomString(); // outputs a random string correctly
?>
<script>
    jQuery(document).ready(function($) {
        $('.editinline').on('click', function(event) {
            var sku_val = $("input[name=_sku]").val(); // checks if there is a value
            var random = '<?php echo $string ?>';
            if (sku_val === '') { // if SKU field is empty than apply random string. Though this doesn't work quite well, only on the second time I click quick edit it returned correct
                console.log(random);
                $("input[name=_sku]").val(random);
            } else {
                console.log('Already has value SKU value');
            }
        });
    });
</script>
<?php } 
add_filter( 'admin_footer', 'quick_edit_sku' );

Button + Firebug http://postimg.org/image/oqdpkhqov/

CAN YOU SHOW BUTTON CODE AND WHERE THERE IS ERROR POINT THAT LINE PLEASE — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Apr 4, 2015 at 16:20
No errors outputting in the console. console.log(random); outputs correctly a random string. — Adrian
– Adrian, Commented Apr 4, 2015 at 16:35
can you try $("input[name=_sku]").html(random); instead of $("input[name=_sku]").val(random);? in your if condition — Michael Doye
– Michael Doye, Commented Apr 4, 2015 at 16:50

Michael Doye · Accepted Answer · 2015-04-04 17:22:47Z

1

The problem is that the js is fired to soon, when you click "Quick Edit" wordpress sends an Ajax request to fetch the HTML for the quick edit options, so input[name=_sku] doesn't actually exist on the initial click. simply adding a setTimeout function before adding the value will work:

<script>
    jQuery(document).ready(function($) {
        $('.editinline').on('click', function(event) {
            var sku_val = $("input[name=_sku]").val();
            var random = '<?php echo $string ?>';
            if (!sku_val) {
                console.log(random);
                setTimeout(function(){
                    $("input[name=_sku]").val(random)
                }, 100);
            } else {
                console.log('Already has value SKU value');
            }
        });
    });
</script>

Also, your check if (sku_val === '') { ... } fails.

Using if (!sku_val) { ... } will however work.

(Tested on WP 4.1.1)

edited Apr 4, 2015 at 17:22

answered Apr 4, 2015 at 17:06

Michael Doye

8,2115 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing value to jquery created input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related