Ajax call within php foreach loop

Question

I am new to ajax and I am trying to implement it in my wordpress project.

The ajax call is working fine but the problem is that the ajax result is only showing for the first item in the foreach loop. I guess I am missing an iteration or $.each loop within the jQuery function?

I have no idea...

Here is what I got so far:

My wordpress loop:

{foreach $posts as $item}
{first}<ul class="items">{/first}
<li class="item">
    [....]
        <div class="price__tag">
            <input type="hidden" id="price" value="FRA8" />
            <div id="test-div"></div>
        </div>
    [....]
</li>
{last}</ul>{/last}
{/foreach}

My jQuery ajax function:

jQuery(document).ready(function() {
var price= jQuery("#price").val();

    jQuery.ajax({
        type: 'POST',
        url: 'http://DOMAIN.COM/wp-admin/admin-ajax.php',
        data: {
            action: 'myAjax',
            greeting: price,
        },
        success: function(data, textStatus, XMLHttpRequest){
            jQuery("#test-div").html('');
            jQuery("#test-div").append(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown){
            alert(errorThrown);
        }
    });
});

Some background information - the result is coming from a SOAP API request and is posting the price for a specific product which is beeing displayed in the wordpress loop.

I hope you did understand my problem.

Any assistance on this is very much appreciated!

EDIT For completeness I am adding the wordpress function aswell:

function add_myscript(){
    wp_enqueue_script( 'myajax.js', get_bloginfo('template_directory') . "/Templates/content/myajax.js", array( 'jquery' ) );
}
add_action( 'init', 'add_myscript' );
function myAjax(){

[…SOAP CLIENT…]

        $result = $soapClient->CarParkAvailRate($parameters);
        $error = $result->Warnings->Code;
        if ($error == '100'){
            $results = "not avail!";
        }
        else {
            $results = $result->CarParks->CarParkRS->PriceCarPark->TotalPrice;
        }
    // Return String
    die($results);
}
catch(SoapFault $fault){
$fault->getMessage();
}
}

// create custom Ajax call for WordPress
add_action( 'wp_ajax_nopriv_myAjax', 'myAjax' );
add_action( 'wp_ajax_myAjax', 'myAjax' );

From what I have read making AJAX calls within a loop is a bad idea as they all happen even if there are errors or problems... — DrCord
– DrCord, Commented Dec 18, 2013 at 22:33

John S · Accepted Answer · 2013-12-18 22:35:10Z

2

The "id" values for elements must be unique. Each item in your list has a <div> element with an "id" of "test-div".

These two elements get repeated for each iteration of the loop:

<input type="hidden" id="price" value="FRA8" />
<div id="test-div"></div>

You need them to have unique id values for each iteration.

answered Dec 18, 2013 at 22:35

John S

21.5k9 gold badges50 silver badges59 bronze badges

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

2 Comments

Fex del Sollo Over a year ago

So I would iterate the div id (e.g. "test-div-1", "..-2", "..-3", ...) within the loop and in the jQuery function?

John S Over a year ago

@Fex del Solio - Correct. I just don't know how you get a hold of the index. Hopefully you know.

enga · Accepted Answer · 2013-12-18 22:53:24Z

I don't have enough rep to add a comment, but yes, you need to use iteration to add something to each ID so that they are unique, and then your jquery will have to find EACH price and inject your code accordingly.

You can use a simple counter that you iterate through each loop, and use concatenation to add it to your IDs.

It will look something like this: (psuedo code as I'm not familiar with how Wordpress does it)

$i = 1;
{foreach $posts as $item}
{first}<ul class="items">{/first}
<li class="item">
    [....]
    <div class="price__tag">
        <input type="hidden" id="price'.$i.'" value="FRA8" />
        <div id="test-div'.$i.'"></div>
        $i++;
    </div>
[....]
</li>
{last}</ul>{/last}
{/foreach}

Collectives™ on Stack Overflow

Ajax call within php foreach loop

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related