jQuery Forum

hi I am wondering how to select a div on a page that is loaded using the .load() function.

I have tried using a function in the callback of the page to select elements but this didn't work.

It appears the pages are called after a the document has loaded (which makes sense) thus anything I place on the page that is loading the various data into the the content div can't selected the newly loaded content.

I could include the new script on the pages I am loading but this would result in the undesirable editing every page I have made.

any help much appriciated

hi, I am trying to load the contents of a div on another page into the contents of the div on a new page, I can't just load the the full page into the div as it has stuff I don't want displaying on the new page.

for example, my page setup is
a div column with links and another column with data the links can be loaded from a drop down menu at the top or the first column I mentioned on each page.

what I want is that if you load the page from the top nav bar it loads the entire new page, if you load the page from the side links it loads the content of right column from the requested page into the content of the right column of the exisitng page, not changing the links which are in the left column

so what I need is

var toLoad = ((Something here to say it is from another page)).$("#right_div").innerHTML;
$("#right_div").append(toLoad);

I made a form that submits data to a php form

my code to subit the form looks like this

<script type="text/javascript">
$(function() {
// alert("running");
  $(".button").click(function() {
 
  var FirstName = $("input#FirstName").val();
  var Surname    = $("input#Surname").val();
  var Ext       = $("input#Ext").val();
  var Mobile   = $("input#Mobile").val();
  var Room       = $("input#Room").val();
  var Office    = $("select#Office").val();
  var userid   = $("input#userid").val();
  var dataString = 'userid='+ userid + ' FirstName='+ FirstName + '&Surname=' + Surname + '&Ext=' + Ext + '&Mobile=' + Mobile + '&Room=' + Room + '&Office=' + Office;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "forms/php/user_info.php",
    data: dataString,
    success: function() {
         //Runs on Form Sucsess
     $('#User_info_form').html("<div id='message'></div>");
      $('#message').html("<h2>Changes Made!</h2>").hide().fadeIn(1500, function() {$('message');});
     $('#form').load('forms/user_info.php');
      //END
    }
  });
  return false; //Stops form from refreshing page
   }); //end button click
  });//End doc.ready
</script>

it submits the form without reloading the page and works good at that.
my problem is I am not sure how to view the php page to see if it is doing what it should be doing. is there away to make the $.ajax function return the php page output, it sounds like it should be really simple but I am struggling to understand the web sites I have been reading about it all

Hi,

I am creating an Intranet style site and I am coming across a problem.

the set up I am using is thus

I have an index page
on this page there is various sections which I load in using load, and store the pages in a pages directory.

This keeps the seperate sections of the front page easily editable.

<script type="text/javascript">
      $(document).ready(function() {
      // do stuff when DOM is ready
      $('#welcome').html('<p><img src="images/ajax-loader.gif" width="16" height="16" /></p>');
      $("#welcome").load("pages/welcome.php");
      $('#users').html('<p><img src="images/ajax-loader.gif" width="16" height="16" /></p>');
      $("#users").load("pages/users.php");
      $('#user_options').html('<p><img src="images/ajax-loader.gif" width="16" height="16" /></p>');
      $("#user_options").load("pages/user_options.php");
      $('#applications').html('<p><img src="images/ajax-loader.gif" width="16" height="16" /></p>');
      $("#applications").load("pages/applications.php");
      $('#center').html('<p><img src="images/ajax-loader.gif" width="20" height="20" /></p>');
      
      
      $("input[name='search']").click(function(){this.select();});
   
         $("#pop_nav a").click(function(){$("#pop").hide("slow");});   

      $("#pop").hide();
      
      <?
      if(isset($_POST['page']))
      {
      ?>
      $("#center").load("<? echo $_POST['page']; ?>", <? echo $a; ?>);
      <?
      } else {
      ?>
      $("#center").load("pages/index.php");
      <? } ?>
   });
   


as you can see $("#center") loads the index page if the $_POST['page'] is set

this seems like it is going to cause me some serious problems in later development, also if I use a form, when you hit submit it reloads the page but the page does not receive the post vars
can anybody shed some light on this style of set up or if there is a better way of doing thing. Thnaks

[edit]

Oh the $a var I used in the load data is created like this

   //collect all POST vars and store them for passing to page sections
   $s = "{ ";
   foreach ($_POST as $var => $value)
   {
      $a[] = "$var : \"$value\" ";
   }
   $s = $s.implode($a, ",")." }";


a typical form would return $a = { FirstName : "name" ,Surname : "sname" ,page : "forms/user_info.php" ,Submit : "Submit" }

I tried sending this to the load but didn't work