Appending new form with input areas. jQuery can not see.

[fatkatie]

I have a search function that finds parts.  It's a callback that constructs a new form with all items found contained in a table.  This form/table is returned and appended to the html using this (within a div element)

            jQuery('#iddiv_searchresultsarea').empty().append(html);

Each of the input text areas, available for updating, has a proper element id.  Here's an example row (within a table; within a form):

   <tr>
      <td>73T3590</td>
      <td>Hinge, Blum Plus</td>
      <td><input type="text" id="idin_loc_73T3590" value="A206" maxlength="20" size="4"></td>
      <td><input type="text" id="idin_qty_73T3590" value="1" maxlength="20" size="4"></td>
      <td>
         <button class="btn btn-primary" type="button" id="idbut_73T3590" name="nbut_73T3590" value="UPDATE" onclick="updateStock('73T3590')">
      </button></td>
      <td>Blum Hinge Plus Inserta Full O/L 110 Deg</td>
      <td>no image</td>
   </tr>

 

For some reason, jQuery does not see any of this.  javascript getElementById() works just fine.  Here is a simple snip of the problem:

   function updateStock(pn) {
      var qty_value = document.getElementById('idin_qty_263.16.705').value;
      alert("qty value " + qty_value);  // ok
      
      jQuery(document).ready(function() {
         var stock_qty = jQuery('#idin_qty_263.16.705').val();
         alert("stock qty " + stock_qty );	// undefined

.
.
.

 

Do I have to do something else after the append to 'sync' up the page?  Or is this a scope issue that I won't figure out until next week.

Thanks.

 

[kicken]

jQuery(document).ready(function(){ ... });

That code is run when the page is first loaded.  At that point your form inputs do not exist so that's why it won't find them.

Your updateStock function on the other hand is not run until the onclick event of your button.  At that point the element does exist.

The code you posted doesn't really make sense so it might be best to explain what your trying to accomplish.  I'm guessing your goal is to respond to the buttons being clicked but by using some jQuery code rather than an inline onclick="" function.  If that's the case then you'll want to attach a click handler to some part of the page that doesn't change and filter for the buttons.  You can do that using the .on function.  For example:

//Wait til the page is loaded
jQuery(function($){
    //Attach a click handler to the #iddiv_searchresultsarea.  Filter clicks to only those on a <button class="update-stock"> element.
    $('#iddiv_searchresultsarea').on('click', 'button.update-stock', function(){
        //$button is the button that was clicked.
        var $button = $(this);
    });
});

On a side note, jQuery(document).ready(function(){ ... }); is the older method of running stuff when the page is ready.  The newer and preferred method is like I show above.