How To Use PHP Variable Into jQuery .load() Script?

Question

I have this jQuery script with .load() function and this script saved on file named header.php:

$(document).ready(function() {
    $('.my-wrapper').find(".wrapper-area").append('<div class="loadergif"></div>').load("file001.php?key=XXXXXX", function() {
    $(this).find('.wrapper-area').remove('.loadergif');
    var $container = $('.list-wrap');

    $container.imagesLoaded( function(){
        $container.masonry({
        itemSelector : '.my-wrapper'
        });
    });
});

on the other side, I have this PHP variables on file named body.php :

while($row = mysql_fetch_array($result)){
    $Key = $row['key'];
    echo '<div class="wrapper-area">';
       //jQuery script will produce something here             
    echo '</div><!-- .wrapper-area -->';
}

now the problem is how to bring that $Key from PHP file becomes XXXXXX part of jQuery script : 'file001.php?key=XXXXXX'

please note that $Key is dynamically generated from WHILE loop. means, it has different value each loop cycle.

thanks before

Add that id as an attribute of the div, you can then access it from javascript via that attribute. — Kevin B
– Kevin B, Commented Dec 7, 2012 at 16:14

Nelson Benítez León · Accepted Answer · 2012-12-07 17:04:05Z

1

In PHP, replace your following line:

echo '<div class="wrapper-area">';

for this one:

echo '<div class="wrapper-area" data-key="'.$Key.'">';

In jQuery, replace your following line:

$('.my-wrapper').find(".wrapper-area").append('<div class="loadergif"></div>').load("file001.php?key=XXXXXX", function() {

for this one:

$('.my-wrapper').find(".wrapper-area").each(function() {
   $(this).append('<div class="loadergif"></div>').load("file001.php?key"+$(this).data('key'), function() {
    ...
    ...
}); //close the each() call
}); //close document.ready()

edited Dec 7, 2012 at 17:04

answered Dec 7, 2012 at 16:17

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

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

5 Comments

Saint Robson Over a year ago

I got perfectly $Key from first loop, but the second loop until the rest of it are same with $Key from first loop.

Nelson Benítez León Over a year ago

Yes it had a bug, I've updated my answer with a fix for jquery code, try it.

Saint Robson Over a year ago

what the last .load used for? isn't that enough using just .load("file001.php?key"+$(this).data('key') on the first part?

Saint Robson Over a year ago

it works...! doesn't need to have this line : .load("file001.php?key="+$('.my-wrapper').find(".wrapper-area")., function() {

Nelson Benítez León Over a year ago

Yes, that line was left by error. I'm glad this worked for you :-)

Jay Blanchard · Accepted Answer · 2012-12-07 16:14:45Z

0

Your question is not quite clear but I think that you want to change your load line to this -

.load("file001.php", {key:XXXXXX}, function() {

answered Dec 7, 2012 at 16:14

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

1 Comment

Saint Robson Over a year ago

I just want to make .load part becomes like this : .load("file001.php?key=$Key") which $Key is generated by PHP.

Michael · Accepted Answer · 2012-12-07 16:17:03Z

0

You could try this to build the wrappers:

while ($row = mysql_fetch_assoc($result))
{

  echo '<div class="wrapper-area" data-key="' . $row['key'] . '">';

  // ...

}

And this for the jQuery:

$(function()
{

  $('.my-wrapper').find('.wrapper_area').each(function()
  {

    $(this).append('<div class="loadergif"></div>').load('file001.php?key=' + $(this).attr('data-key'), function()
    {
      // ...
    }
    )

  }
  )

}
)

answered Dec 7, 2012 at 16:17

Michael

12.9k6 gold badges56 silver badges69 bronze badges

4 Comments

Saint Robson Over a year ago

I got 'undefined' as an output of your : + $(this).attr('data-key') when I tried to echo the variable of $_GET['key']

Michael Over a year ago

View the source. What is in the data-key attribute of the .wrapper_area divs?

Saint Robson Over a year ago

I see dynamic data-key exactly as I expected from WHILE loop. but I think there's something missing here : .load('file001.php?key='+$(this).attr('data-key'), so when I try to GET the variable : $_GET['key'] I got 'undefined' as an output.

Saint Robson Over a year ago

I mean, I see dynamic data-key exactly as I expected from WHILE loop on each DIVs

Collectives™ on Stack Overflow

How To Use PHP Variable Into jQuery .load() Script?

3 Answers 3

5 Comments

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

4 Comments

Related