0

I generate through PHP an HTML input (id="newItem") and a HTML paragraph (id="newDesc") in the already existing HTML table (id=detailedTable). After trying to fire off a function by using $("#newItem").change(function()..., I found out that since it was generated dynamically I had to refer to it using the Jquery .on(). Now this part works.

My issue is on the return of the Ajax call, I try to change the #newDesc value, but it is not working. I suspect for the same reason that this ID was dynamically generated. 

$("#detailedTable").on('change','#newItem',function(){

var value=$(this).val();
value=value.replace(/\,/,'.');
value="value="+value;

$.ajax({
            url:'z-getDesc.php',
            type:'POST',
            dataType:'json',
            data:(value),
            success:function(values){
                values=values['descriptionA'];

                $("#newDesc").val(values);
            },
            fail: function(xhr, textStatus, errorThrown){
                alert('Please try again later');
            }
        });
});

Up to that point everything works fine, the 'values' variable is returned, all is left is :

How can I refer to #newDesc id?

Thanks

Edit: To clear some things up:

1- The DOM is initially loaded, and users interact with it, bringing in some changes resulting in an array of data.

2- This arrays is loaded up in a table created via JQuery Datatables by an ajax call; in addition to populating the table with the array, I also generate a line for inline editing, line which contains the afore-mentioned #newItem and #newDesc.

Matts
  • 55
  • 5
  • 1
    The fact that #newDesc was dynamic won't affect a jquery selector like that from working (assuming you added the element to the DOM before checking), I'm more concerned that you have ID values for dynamically added content? Can they be added multiple times? Duplicate ID's are a cardinal sin of html. – Culyx Jul 13 '16 at 18:04
  • how/when did php generate this html? if it's done when you first load them page, then that ID is no different than any other ID in the page. javascript cannot tell the difference between `echo '
    ';` and a plain html page with no php at all. it's all identical when it reaches the client.
     – Marc B Jul 13 '16 at 18:04
  • @Culyx: No, these id's are genrated just once; if the user proceed further on, their values are added to other data and those fields are cleared, ready for new information. – Matts Jul 13 '16 at 18:09
  • @Marc B: The HTML page is loaded first, and after some user interaction this html part is genrated by php through an ajax call.. The rest of the page is not reloaded. – Matts Jul 13 '16 at 18:10
  • once that new html is inserted into the page, it's part of the DOM like the "old" html, and is indistinguishable from the "old" stuff. – Marc B Jul 13 '16 at 18:12
  • You say in your question that you generate the DOM element #newDesc, if it's not the ajax generating it what is appending it to your document? Can we see that code? – Culyx Jul 13 '16 at 18:12
  • As @Culyx has mentioned above you should not have any issue selecting the element as long at it exist in the DOM. **Are you, instead, looking to trigger the `change` event once the value has been set programmatically? Is that the issue?** If it is, you do want to trigger the `change` event manually, after setting the value: `...val(values).change();` – PeterKA Jul 13 '16 at 18:34

1 Answers1

0

You need to call $("#detailedTable").on after you generate the content. Javascript is executed when the page is loaded, so when the javascript executes, it can't find the chosen id and doesn't try again. Add some javascript to whatever user interaction that generates the content that calls .on and it should work.

Community
  • 1
  • 1
Caius
  • 243
  • 1
  • 5