Question

Is there a way to use the jQuery .load(page.php) function such I selectively pick parts of page.php? For example, something like this:

$('#div1').load('page.php#1'); //Puts div id = 1 into div1
$('#div2').load('page.php#2'); //Puts div id = 2 into div2
...

My problem might make more sense if I explain the use case – I currently have a table with several cells that pull data from various php functions. This data changes over time, and so I want to dynamically reload that table.

There’s a catch though – the table elements also contain text input forms. If I reload the entire table, the user loses the data typed into the forms and the focus on the form. Even if I preserve those things by saving them in temporary variables, the cursor still resets to the beginning of the form. I’d much rather not create one page for every element of data, so I’m wondering if there’s a way I can select which parts of the page I’m loading.

Answer 1

What’s wrong with $.get and using jQuery to parse/push the content where you want it?

$.get('/my/page.html',function(data){
  $('#one').empty().append($('#one',data));
  $('#two').empty().append($('#two',data));
  // ...
});

Also, FWIW, an ID beginning with a numeric value is invalid. You need to start with a letter.