CODEWITHSUNDEEP
phpjqueryajaxwordpress
Fex del Sollo
Fex del Sollo

Reputation: 386

Ajax call within php foreach loop

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' );

Upvotes: 1

Views: 2393

Answers (2)

enga
enga

Reputation: 315

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}

Upvotes: 2

John S
John S

Reputation: 21482

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.

Upvotes: 2

Related Questions