April 29, 2012

Send variable to PHP and reload using jquery?

Question by Belhajio

I am completely new to all of this coding.. so I apologies for my ignorance in advance.

I have this jquery function (button) which changes the size of the table of where my Post.php is loaded, (to alternate between portrait and landscape). the function itself works great in changing the size however i am stuck in reloading the post.php page.

 $("#cSize").toggle(
 function () {
 $('#p_CWidth').animate({width:720});
 $('#p_SWidth').animate({width:110});
 }, function() {
     $('#p_CWidth').animate({width:520});
 $('#p_SWidth').animate({width:310});
 });

what i need to add to this code is away of changing the variable p_Type to true or false and reloading the post.php or the div p_Post

 <div id="p_Post">
 <? $p_type = true;
 include 'profile/post.php'; ?>
 </div>

post.php with the above code is loaded fine and i tested it by manually changing p_type to false/true and it loaded ok. But how can i get this automated with the jquery functoin above?

I have tried .load(‘profile/post.php’) however this brings me an error for db access!!

any help is really appreciated
AB

UPDATE

I have changed my php file to just a simple php without any link to mysql for testing, and i have tried the suggested code:

var p_type = false;
$("#cSize").toggle(function () {
   $("#p_post").load('profile/post.php',{ 'p_type' : p_type }, function { 
       p_type = !p_type; //toggle the value for automation
});

   $('#p_CWidth').animate({width:720});
   $('#p_SWidth').animate({width:110});

});

and sadly that doesnt seem to work?!!

but with some trial and error i have manged to get change in size working again, and the php reloaded for the first time with the new right variable (p_type), however for some reason the php file only loads once! so it doesnt go back to the normal size with (p_type as true after being set as false)??? here is the code:

   $("#cSize").toggle(
    function () {
  $('#p_CWidth').animate({width:720});
  $('#p_SWidth').animate({width:110});
  $("#p_Post").load('profile/p_post.php',{ p_type : false });
}, function() {
      $('#p_CWidth').animate({width:520});
  $('#p_SWidth').animate({width:310});
  $("#p_Post").load('profile/p_post.php',{ p_type : true });
   });

Thank you again in advance

ps. here is the toggle example i followed http://jsfiddle.net/6FMZY/

Answer by Starx

You can add additional data to your jQuery snippet like this

$("#p_post").load('profile/post.php',{ p_type : false });

But since you are trying to automate this, while relaoding

var p_type = false;
$("#p_post").load('profile/post.php',{ 'p_type' : p_type }, function(data) { 
    'p_type' = !p_type; //toggle the value for automation
});

Update:

Here is a simulation of sending the data on toggle

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!