Targeting id's created by php

Question

From a JavaScript file I call a PHP script through Ajax. The PHP returns an echo with a table. Something like this:

echo "<tr><td id=\"something\">$value<\td><\tr>";

This works fine. But now i want to target the cell with id "something". that i cannot do because JavaScript does not recognize the id because it was already loaded before i did the call to PHP. i tried reloading my javascriptfile after calling the php file. Than it finds the id but it runs all my other scripts twice (i think because the javascript file loaded twice and do not replace the old one).

Is there a way to target this id without reloading the javascript file again. P.s. i reloaded the javascript file as part of the php file. At the end of the php file i put put something like this:

echo "<script type=\"text/javascript\" src=\"js/javaScriptfile.js\"></script>";

The php script looks like this:

echo "<tr><td>Persmachine appels</td><td id=\"capaciteitPersmachineAppelsBeginRonde\">$capaciteitPersmachineAppelsBeginRonde</td><td id=\"uitbreidenPersmachineAppels\">$uitbreidenPersmachineAppels</td><td id=\"actueleCapaciteitPersmachineAppels\">$actueleCapaciteitPermachineAppels</td><td id=\"capaciteitPersmachineAppelsPerStap\">$capaciteitPenSMachineAppelsPerStap</td><td id=\"kostenPersmachineAppelsPerStap\">$kostenUitbreidingPenSMachineAppelsPerStap</td><td><button class=\"btn btn-default\" id=\"BTNpersmachineAppelsPlus\"><img src=\"Graphics\PlusIcon.png\" width=\"20\" /></button><button class=\"btn btn-default\" id=\"BTNpersmachineAppelsMin\"><img src=\"Graphics\minIcon.png\" width=\"20\" /></button></td><td id=\"nieuweCapaciteitPersmachineAppels\">$actueleCapaciteitPermachineAppels</td></tr>";

The AJAX call looks like this:

$.ajax({

            url:'http://12dobec.nl/JFC/php/huidigeStatusPerCategorieDownloadenV2.php',
            data:{klas:klas, team:team, gekozenOverzicht:gekozenOverzicht},
            type: "GET",
            success: function(data){

            $('#BeslissingenFabriek').html(data);

            }});

As you can see i alse put two buttons into the php echo. I cannot target them too. Again i think because the javascript file loaded before. When load the javascript again it finds everything but then scripts runs twice.

Welcome to Stack Overflow. Can you show your Ajax call in context, also the content of the php file in total. From your question it sounds like things might be organized a little inefficiently but I can't say for sure without seeing them. — J E Carter II, Feb 07 '17 at 22:17
Are you using `jQuery`? if not, maybe you can bind the event on a parent (maybe ``) and catch the event with a `if` statement, like [this](http://stackoverflow.com/a/14259372/3889043) answer. — mrlew, Feb 07 '17 at 22:20
You can use a php file and fudge the headers as text and output to `javaScriptfile.php` and then load the id's dynamically with the page too? Like Carter said without more code we can't really understand what you'd like us to help with — Kaboom, Feb 07 '17 at 22:29
I have a javascriptfile targeting the id's in the table. But the javascript file loads with the page and the php file is loaded when i press on a button on the page. I think the problem will be solved if i could reload the javascript file. But when i do this the way as i described it stores the javascript file as a sepperate file and when i put on the button i created with the php file it runs twice. — John Peters, Feb 07 '17 at 22:39
is the code that targets the id in the success function of the ajax? — Catprog, Feb 07 '17 at 22:40

score 0 · Answer 1 · answered Aug 24 '17 at 13:57

In order to target the elements they must be added to the DOM. There are other ways but this is straight forward.

Element.insertAdjacentHTML()

It will add the element to the DOM tree in your example by parsing the data as HTML. You will be able to directly target the elements created as they are added to the DOM

$.ajax({
url:'http://12dobec.nl/JFC/php/huidigeStatusPerCategorieDownloadenV2.php',
            data:{klas:klas, team:team, gekozenOverzicht:gekozenOverzicht},
            type: "GET",
            success: function(data){
            var theTarget = document.getElementById('BeslissingenFabriek');
            theTarget.insertAdjacentHTML('afterbegin',data);
            }});

For a complete explanation and more details look at the DOCUMENTATION

Other positions include:

'beforebegin' - Before the element itself.
'afterbegin' - Just inside the element, before its first child.
'beforeend' - Just inside the element, after its last child.
'afterend' - After the element itself.

Targeting id's created by php

1 Answers1