I have an Index.php file that makes an ajax call and loads a php page
Within that php page that is loaded using ajax I have a html form.
I am trying to do another ajax call from Index.php that if a select box is changed a new ajax call is made.
Everything works fine but the ajax on change for the select box.
I think it has something to do with the fact that the form is loaded in with ajax and the on change is using ajax.
Is this possible to do?
$(document).ready(function() {
$("#message-loading").show();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "details.php",
data: dataString,
success: function(html)
{
document.getElementById('message-box-body').innerHTML = html;
$("#message-loading").hide();
}
});
This is the select change code
$(".selectbox").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "another-page.php",
data: dataString,
cache: false,
success: function(html)
{
$(".another-selectbox").html(html);
}
});
});
The select box is located inside the php page of the first ajax call. The ajax change should load new values for another select box within the first php page.
I have this working if I don't load the php page using ajax.
jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM, for example - via AJAX, are unrecognized by jQuery.
To combat that either re-bind your jQuery function or use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.
You can access newly created element on the pages using $(document).on.
$(document).ready is only aware of elements that existed when the page was loaded.
So, for an element that existed when you you loaded the page you would use:
$(document).ready(function(){
$("#element").click(function() {
alert("You clicked an element that existed when you loaded this page.");
});
});
For an element that did not exist when you loaded the page, you would use the following:
$(document).on({
click: function () {
alert("You clicked an element that DID NOT exist when you loaded this page.");
},
}, '#element');
Related
I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});
I've created a dynamic table in PHP, where every image in a row has a specific url in the ID.
For example:
When a user clicks on this image, it executes an action. This works fine.
Afterwards, in the second ajax, it's supposed to reload the colorbox with the previous url. This also works, however, the javascript seems to be loaded again (with the new values though)?
$('#cboxLoadedContent img[alt="markmessage"]').live('click', function(){
var returnurl = "<?php echo $_SESSION['returnpage']; ?>";
var markurl = $(this).attr('id');
alert(markurl);
// Do the action
$.ajax({
method:'GET',
url: markurl,
cache:false
});
// Reload colorbox again with previous contenturl.
$.ajax({
type: 'GET',
url: returnurl,
dataType: 'html',
cache: true,
beforeSend: function() {
$('#cboxLoadedContent').empty();
$('#cboxLoadingGraphic').show();
},
complete: function() {
$('#cboxLoadingGraphic').hide();
},
success: function(data) {
$('#cboxLoadedContent').empty();
$('#cboxLoadedContent').append(data);
}
});
});
</script>
Is there any way to PREVENT the javascript from being re-appended to the colorbox? I've tried a few methods (like removing it with DOM), but nothing seems to work...
The javascript may NOT be disabled, it's supposed to process a new url afterwards...
Try to replace live to one in first line:
$('#cboxLoadedContent img[alt="markmessage"]').one('click', function(){
Try the simple click event binding. Here you only bind it to the selected elements, not to new appended elements. If you want the event to be fired only once, use one.
I'm not sure which version of jQuery you are using, but live() is deprecated as of 1.7, you might want to try using on().
I am trying to refresh a div with jquery load(); but the load displays the correct information but duplicates entire parts of the page that arent in the div
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').load('#uses_form_div');
}
});
return false; });
i think you are having a misunderstanding..
if you want to load an external url into the div block
$('#uses_form_div').load("./a.file");
will do it. see the api docs.
Or if you are trying to load the ajax response of the $.ajax call into the div, it should be
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').html(data); // see here
}
});
UPDATED according to comments below:
if the case of an included page to be refreshed. I have two ways to recommend.
make the included file as a separate url and load it initially. so instead of include you will be loading it via jquery as the page loads by a jquery load call. and when you want to refresh it you can do $('#uses_form_div').load("./a.file");
you can put it as include it self and when you need to update, make an ajx request get the data back. Here you have 2 choice. You can build the dom at server and give html as ajax response and simply $("#uses_form_div").html(data) or get the response as json
and build your dom at client side and load it via same $("#uses_form_div").html(data).
I also had the same problem but finally found the answer
<script type="text/javascript">
function recp() {
setInterval(function()
{
$("#result").load(location.href+ ' #my');
});
}
</script>
<div id="result">
<div id="my"><?php echo date('a:i:s'); ?></div>
</div>
I need a jQuery popup to ask the user for some required data before loading the same page it's on.
The data entered will become a php variable that I'll use to query a mysql table and pre-populate some form fields.
Any advice?
Thanks!!
you can make an AJAX call to the PHP and load it to div that you want. For the ajax calls you can use jquery it really makes you job easy.
eg:
$.ajax({
url: 'getitems.php',
success: function(data) {
$('#manage_inventory').html(data);
//alert('Load was performed.');
}
});
like in the example it is calling getitems.php and getting the list and loading it into #manage_inventory. The data being returned can be XMl or other type which can be parsed and be used according to your needs.
Your solution could be as simple as using a prompt() box in javascript and then passing the information via ajax
var stuff = prompt('Gimme Stuff');
$.ajax({
url: 'dostuff.php',
data: 'stuff=' + stuff,
success: function(data) {
//process stuff
}
});
In the HTML, a dropdown with the ID="project_pick" will fire a change event, sending the selected value to the getallreports.php file. This works. The PHP file does a MySQL lookup and returns values inside some HTML. This also works, and looks great on the page. Here below is the jQuery/ajax code that sends the selected item to the PHP file:
$('#project_pick').change(function(e) {
$.ajax({
type: "POST",
url: "getallreports.php",
data: "project_id=" + $(this).val(),
success:function(data){
$('#reportstable').html(data);
}
});
});
The returned data appears inside the specified div, and includes anchor tags with specific IDs that should allow other JQuery events to happen. Snippet of returned HTML:
<table><tr>
<td>Report 1</td><td>click to change</td>
<td>Report 2</td><td>click to change</td>
</tr></table>
The jQuery code to trigger on the above click event is:
$('#change_1').click(function() {
alert('Change Report One was clicked');
});
However, clicking the above anchor tag does nothing. Also, the returned HTML does not even appear in the source -- although it shows on the screen and in firebug.
What am I missing? How can I get that click event to fire?
EDIT:
I've been reminded about the .on('click', etc) event (thanks Michael and Zirkms), but when I attempted to add it to my code the dropdown's .change event stopped firing. Perhaps the below code needs a facelift?
$('#project_pick').on(change(function(e) {
$.ajax({
type: "POST",
url: "getallreports.php",
data: "project_id=" + $(this).val(),
success:function(data){
$('#reportstable').html(data);
}
});
});
On the moment of $('#test').click() code execution #test didn't exist in the DOM, so you didn't bind that handler to somewhere.
Use
$(document).on('click', '#test', function() { ... });
instead
Or (better) if you have a particular node where you insert the retrieved html - use some particular selector rather than $(document) like
$('#reportstable').on(...)
does not even appear in the source
In the "view source" browsers usually show the response from the server as it was retrieved on request, without reflecting JS DOM modifications.