CODEWITHSUNDEEP
jqueryajax
Patrioticcow
Patrioticcow

Reputation: 27038

jquery, how to use multiple ajax requests?

i have this situation inside xxx.php:

<form id="s">
<input id="q"/>
<input type="submit" href="Search!"/>
</form>
<div id="r"></div>

inside the foo.php i have another form:

<form id="ss">
<input id="qq"/>
<input type="submit" href="Search!"/>
</form>
<div id="rr"></div>

and inside the yyy.php i have another form:

<form id="sss">
<input id="qqq"/>
<input type="submit" href="Search!"/>
</form>
<div id="rrr"></div>

inside javascript.js i have :

$('#s').submit(function(evt) {
evt.preventDefault();
$.ajax({
url: 'foo.php',
data: {
    query: $('#q').val()
  },
success: function(data) {
    $('#r').html(data);
  }
});
return false;
});

$('#ss').submit(function(evt) {
evt.preventDefault();
$.ajax({
url: 'yyy.php',
data: {
    query: $('#qq').val()
  },
success: function(data) {
    $('#rr').html(data);
  }
});
return false;
});

what happens is that when i submit the first form the second one load in, so now i have 2 forms (as expected) but when i submit the second form the third one doesn't load using ajax, but it redirects to it by refreshing.

so basically i need to do as many ajax loads as i can

any ideas?

thanks

Upvotes: 0

Views: 274

Answers (3)

run
run

Reputation: 1186

try handling newly loaded form $('#sss').submit(function(evt) {});

Upvotes: 0

Kimtho6
Kimtho6

Reputation: 6184

You should use .live because you are adding data dynamically

$('#ss').live('submit', function(evt) {
evt.preventDefault();
$.ajax({
url: 'yyy.php',
data: {
    query: $('#qq').val()
  },
success: function(data) {
    $('#rr').html(data);
  }
});
return false;
});

Upvotes: 4

Henry
Henry

Reputation: 2187

You need to use Live events for things you dynamically load in so in your case:

$("#ss").live('submit', function (e) {
   // Code here
});

You only need to use live events for things that are not always in the DOM. If you request pages through ajax and then intent to use them you will need to use live events.

See : http://api.jquery.com/live/ For a little more detail

Upvotes: 2

Related Questions