CODEWITHSUNDEEP
javascriptjqueryajax
Nahid Suhail
Nahid Suhail

Reputation: 185

loop through ajax response elements

I have a button which makes an ajax call to a php file which in turns sends some html data as a response.

$.ajax({
                type: 'POST',
                data: {
                    cherry: cherry,
                    chocolatechip: chocolatechip,
                    butterscotchchip: butterscotch,
                    gems: gems,
                    sweetner: sweetner
                },
                url: 'customcakebox.php',
                success: function (content) {


                }
            });

Html Response contains these three elements:

<img id="abc1" src="ski.png" height="13px" width="15px">
<img id="abc2" src="cho.png" height="15px" width="15px">
<img id="abc3" src="cho.png" height="15px" width="15px">

However these elements can reduce or increase depending on the condition specified in the php file.

What i was wanted to do is to loop through these elements and only print those elements that i want to print?

Note : I know you will say why can't i just pass the ones that i need to show.Well , the problem is i want to display every element randomly inside the div and to make that work.I do need every one of them.

Random positon of elements inside div This is what i am trying to achieve.(This is just for reference as to what i am trying to do)

.php file:

require 'connect.inc.php';
require 'session/inc.encrypt.php';
$cherry = $_REQUEST['cherry'];
$chocolatechip = $_REQUEST['chocolatechip'];
$butterscotchchip = $_REQUEST['butterscotchchip'];
$gems = $_REQUEST['gems'];
$sweetner=$_REQUEST['sweetner'];
$items = '';
if ($cherry > 20)
    $cherry = 20;
else if ($cherry < 0)
    $cherry = 0;
if ($chocolatechip > 20)
    $chocolatechip = 20;
else if ($chocolatechip < 0)
    $chocolatechip = 0;
if ($butterscotchchip > 20)
    $butterscotchchip = 20;
else if ($butterscotchchip < 0)
    $butterscotchchip = 0;
if ($gems > 20)
    $gems = 20;
else if ($gems < 0)
    $gems = 0;

if ((!empty($cherry) || $cherry == 0) && (!empty($chocolatechip) || $chocolatechip == 0) && (!empty($butterscotchchip) || $butterscotchchip == 0) && (!empty($gems) || $gems == 0)) {
    for ($i = 0; $i < $cherry; $i++)
    {

        $items .= ' <img src="ski.png" height="13px" width="15px">';
    }

    for ($i = 0; $i < $chocolatechip; $i++)
        $items .= ' <img  src="cho.png" height="15px" width="15px">';
    for ($i = 0; $i < $butterscotchchip; $i++)
        $items .= '<img  src="che.png" height="15px" width="15px">';
    for ($i = 0; $i < $gems; $i++)
        $items .= '<img  src="but.png" height="15px" width="15px">';

}

$customcake['cherry']=$cherry;
$customcake['chocolatechip']=$chocolatechip;
$customcake['butterscotchchip']=$butterscotchchip;
$customcake['gems']=$gems;
$customcake['sweetner']=$sweetner;

$_SESSION['customcake']=$customcake;

echo $items;

Ids has not been set here.Please don't mention that .I will set that later.

Upvotes: 1

Views: 647

Answers (3)

Abhishek B
Abhishek B

Reputation: 148

Lets say the response you returned is in a variable called content, then put this code to run a loop 

 $(document).ready(function() {
  $(content).filter('img').each(function(index,item) {
    alert(item);
  });
});

and in the loop you will get each image as item object. if your response is returning more than image object then you can use $(content).filter('img').each also

Upvotes: 4

alxndr_k
alxndr_k

Reputation: 79

You need to make an element array in your PHP file and then return it as a JSON object.

json_encode( $img_array, JSON_UNESCAPED_UNICODE );

Then you can make your things with that array at success function. Don't forget to pass an option dataType.

$.ajax({
                type: 'POST',
                data: {
                    cherry: cherry,
                    chocolatechip: chocolatechip,
                    butterscotchchip: butterscotch,
                    gems: gems,
                    sweetner: sweetner
                },
                url: 'customcakebox.php',
                success: function (content) {


                },
                dataType : "json"

        });

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65808

If your .php could respond with JSON, something like this:

{
  "img1": "<img id='abc1' src='ski.png' height='13px' width='15px'>",
  "img2": "<img id='abc2' src='cho.png' height='15px' width='15px'>",
  "img3": "<img id='abc3' src='cho.png' height='15px' width='15px'>"
}

When you receive the results (as your content argument to your success callback), you could loop through the response like this:

var jContent = JSON.parse(content);

for(var i = 0; i < jContent.length; ++i){

    // whatever you need to do
    console.log(jContent.img1); // <img id='abc1' src='ski.png' height='13px' width='15px'>

}

Upvotes: 1

Related Questions