JQuery loop load php template into HTML

Question

I have an API call that I'm using to get data. This data is an array of arrays and I need to loop through them. For each value, I want to 'load' a php template I created with those values. The very first loop works and displays properly, but after the initial value, it stops. I need all values to be looped through and displated.

Example of what is happening: [a, b, c] => JQuery loop => load => Only 'a' shows up.

EDIT - Every time load is called, it loads the script into 'elementToLoadPhpFile'. I noticed that it seems to be overwriting the previous values that are loaded there. I need it to append multiple children, not override the same child.

$.ajax({
            type: 'GET',
            dataType: "json",
            url: 'apiUrl.com'
        }).done(function(data) {
            var result = data['data'];
            jQuery.each(result, function(key, value) {
                var id = value['id'];
                var title = value['title'];
                var img_url = value['images']['jpg']['image_url']
                $("#elementToLoadPhpFile").load("phpFile.php", {
                    id: id,
                    title: title,
                    img_url: img_url
                });
            });
        });

Have you tried console.log(id, title, img_url) inside your loop to ensure the loop is working properly and retrieving the correct arguments to pass to the PHP script? Have you confirmed the PHP script is working and properly parsing its arguments? — kmoser
– kmoser, Commented Apr 3, 2022 at 3:09
I have confirmed that the loop is working properly using alert(). The PHP script works as well. — Djester808
– Djester808, Commented Apr 3, 2022 at 3:12
You use .load() inside .each() that means any URL loaded using ajax .load() will be overwrite contents into #elementToLoadPhpFile element. See the document. To append, I recommend to use something else such as .insertAdjacentHTML() — vee
– vee, Commented Apr 3, 2022 at 3:24
jQuery's .load() function is asynchronous by nature, meaning the different calls you're making will finish in an indeterminate order. Does this answer your question? jQuery .load(function) synchronous — kmoser
– kmoser, Commented Apr 3, 2022 at 3:25
@vee Given OP's clarification about appending multiple children, you are correct: .load() will replace, which will not work. — kmoser
– kmoser, Commented Apr 3, 2022 at 3:36

Twisty · Accepted Answer · 2022-04-03 03:29:01Z

1

Consider the following.

jQuery(function($) {
  $.getJSON('apiUrl.com', function(response) {
    $.each(response.data, function(key, val) {
      $.get("phpFile.php", {
        id: val.id,
        title: val.title,
        img_url: val.images.jpg.image_url
      }, function(html) {
        $("#elementToLoadPhpFile").append(html);
      });
    });
  });
});

If .load() is working, but is replacing the content, as expected, then you may want to just GET the content so you can Append it. See here:

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched elements to the returned data.

Objects are better written in dot notation.

answered Apr 3, 2022 at 3:29

Twisty

31k2 gold badges30 silver badges50 bronze badges

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

1 Comment

kmoser Over a year ago

I believe the asynchronous nature of .get() will cause the three callbacks to be executed in an indeterminate sequence. If you want them to happen in sequence you'll need to nest them (which leads to Callback Hell). Also see How to make Javascript fetch synchronous?

Collectives™ on Stack Overflow

JQuery loop load php template into HTML

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related