I have a
$(".clickButton").click(function() that loads a page using $.ajax and return the result to a DIV. This works perfectly in Chrome, FireFox and Safari, but not IE11.
$.ajax({
url: "go.php?ab=1",
success: function(data, textStatus, xhr) {
$("#res").html(data);
}
});
As a quick test I tried the following and again it works in Chrome, FireFox and Safari but not IE11.
$.get('go.php?ab=1', function( jqXHR, textStatus, errorThrown )
{ alert(jqXHR); });
The date being returned is text and is either OK or ERROR.
The go.php is running multiple command line scripts and depending what the variables passed depneds on what runs.
All that part is fine and it works really well in the 3 browsers, but not IE11.
When the page first loads in IE it sort of works, it appears to run the go script and return a result. But any subsequent click return instant and the go.php page isn't called. Results are displayed but they appear to be the first processes return results. It's as if the result and process have been cached.
Any ideas how to make this work in IE as it does in the others ?
It's as if the result and process have been cached.
This is possible. If you are sending multiple GET requests to the same URL your browser may be caching the result. If you wanted to verify this you could click the button, clear your cache without reloading the page, and click the button again to see if it works as expected this time.
To prevent caching of GET requests you can add
cache: false
to your $.ajax options for each request, or you could disable it for all requests by using
$.ajaxSetup({ cache: false });
I dont know if we been to the same problem, but just earlier I was trying to get the responce data from the go.php and add it into a div.
My code goes like this.
onClick:
<script type="text/javascript">
function gimmeData(){
var url = 'go.php';
$.ajax({
type: "GET",
url: url,
data:{'something':'1'},
success:function(results)
{
$('#add_data').html(results);
}
});
}
</script>
this will give go.php?something=1 url.
html:
<input type="button" onclick="gimmeData();" value="clickme!" />
<div id="add_data"></div>
button click
$('a').on('click', function(){
var a = $(this).data('first');
var b = $(this).data('second');
alert(a + ":" + b);
});
html:
<a id="button" href="#" data-first="something" data-second="something2" onclick="click();">click me</a>
using data() function. see http://api.jquery.com/data/
or you can do $(this).attr("data-value") to get the value of a data-attribute
JSFiddle sample.
Related
Entry level user here. I've seen countless AJAX\PHP examples with data being passed via POST or GET and modified one of their examples. When clicking the button (id="clickMe) I want it to execute advertise.php and nothing more (no variables need to be passed) without refreshing the page and a notification that says success. When I click the button with my current code nothing happens.
<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({
url: 'advertise.php',
data: {
'ajax': true
},
success: function(data) {
$('#data').text(data);
}
});
});
});
</script>
Updated, but still isn't executing.
Here is your editted version code:
$(document).ready(function(){
$('#clickMe').click(function(){
$.post("PHP_FILE.php",{ajax: true},function(data, status){
alert(data);
});
});
});
2 things - you need a document ready handler and to prevent the default click action.
$(document).ready(function() {
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({ // remainder of code...
});
When loading jQuery scripts at the top of the page you need to make sure they do not run until the DOM has loaded, that is what the document ready handler is for. The you capture the click event by including it as an argument for your click's callback function and handle the click with the preventDefault() method.
Since this request is "simple" you may want to consider using one of the shorthand methods, like $.post()
I have a very simple AJAX request with jQuery and PHP. This is my code
var request = $.ajax({
method: "POST",
url: "Url.php",
data: { param: valueParam },
dataType: "html"
});
request.done(function(html) {
alert('Hello');
});
The code works perfect in Firefox 38.0.5 but not works in Chrome 43.0.2357.124m.
The problem in Chrome is the follow: the "Url.php" returns a pair name-value. If it returns a value distinct than null, then the alert is not displayed (and there isn't any error in the console). But if the url return a null value, the alert is displayed. I tried ctrl+F5 but not works.
In Firefox works good in both cases.
Thanks!
Does fail function return something?
request.done(function( msg ) {
console.log(msg);
});
request.fail(function( jqXHR, textStatus ) {
console.log("Request failed: "+textStatus);
});
The problem is when I was firing the ajax request. I was doing it in "onchange" (of a input text with jQuery autocomplete) jQuery event. When I select an item of the list of autocomplete, the onchange() event is not raised in Chrome (yes in Firefox).
So I fire the ajax request in jQuery "focusout" event and works in Chrome and Firefox.
I have a select group populated by AJAX/PHP.
The issue i have although it works perfectly well, it does not return results 100% of the time of the page load.
Is there a specific reason why this might be happening?
the html
<div id='select_tags_div'>
</div>
the AJAX
$( document ).ready( function() {
selector_refresh();
});
function selector_refresh() {
url = '/home/bin/scripts/tags_list.php';
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
beforeSend: function() {
},
success: function(result) {
$("#select_tags_div").html(result);
$(".chosen-select").chosen();
$('.chosen-select').trigger('chosen:updated');
vid_tags();
}
});
}
I have checked the source on the both success and fail to show results, and the results actually are not populated at all. I thought it may have been a chosen.js issue but now its looking like it isn't that at all. Instead it seems it may be a PHP/AJAX issue not returning the results.
When i check the AJAX success with an alert, it confirms the AJAX is successful even on the times when the PHP has not populated correctly.
ADDED
I added a button which calls the function to populate the field, of which functions 100% of the time.
Could this be a case of DOM perhaps?
I have this JavaScript code:
$(document).ready(function(){
$('#sel').change(function(){
$.ajax({
type: "POST",
url: "modules.php?name=TransProject_Management&file=index",
data: "&op=index_stat&stat="+$(this).val(),
cache: false,
success: function(data) {
//alert(data);
$("#ajax_results").html(data);
}
});
});
});
On status change i need to refresh a div without page reload. But it returns blank page. If i try alert the result on success, i get the response, also i checked with inspect element, its ok. The problem is that it returns blank page.
The file i'm working on, is the same( modules.php?name=TransProject_Management&file=index ) i called in ajax.
the html:
<body>
//...
<div id="ajax_results">
//.....
//somewhere here is the select option <select id="sel">......</select>
//.....
</div>
</body>
Any help, would be very appreciated.
use the following code to return your response html:
echo json_encode(array($your_response));
Then in your javascript, you will need to reference the data as:
success: function(data) {
$("#ajax_results").html(data[0]);
}
since it is now an array.
this in your ajax function refers to the jQuery XHR object, NOT the $('#sel') object. Just assign it to a variable before the ajax function like var sel = $(this) then use it later inside the function. Try this:
$('#sel').change(function(){
var sel = $(this);
$.ajax({
type: "POST",
url: "modules.php?name=TransProject_Management&file=index",
data: "&op=index_stat&stat="+sel.val(),
cache: false,
success: function(data) {
//alert(data);
$("#ajax_results").html(data);
}
});
});
});
Hmm, first glance the code looks good. Have you tried using Chrome debug tools? Hit F12 and check the Network tab, this will show you what is being returned. You can also debug without using an alert so you can step through to see what exactly the properties are.
Just thought, you might need to add 'd' to the data returned. Anyway, if you do what I suggested above, put a pause break on the line and run the code you will see what you need.
Based on your comments below the question, it seems that you are using the same script to display your page and to call in the javascript. This script seems to return a complete html page, starting with the <html> tag.
A page can only have one <html> tag and when you try to dump a complete html page inside an element in another page, that will lead to invalid html and unpredictable results.
The solution is to have your ajax script only return the necessary elements / html that needs to be inserted in #ajax_results, nothing more.
I have some ajax/jquery code in one of my pages and the problem I'm having is that it doesn't work the first time the page is loaded. If I refresh the page it works no prob. It does work in firefox first time. All the variables that I'm using are ok as I've alerted them out. I don't get a success or error message. It justr doesn't appear to do anything?
Any ideas?
$('.window .request').click(function (e) {
var itm = document.getElementById('txtItm').value;
var qty = document.getElementById('txtQty').value;
var msg = document.getElementById('txtMessage').value;
var op_id = document.getElementById('txtOp_id').value;
$.ajax({
type: "POST",
url: "do_request.php?msg="+msg+"&itm="+itm+"&qty="+qty+"&op_id="+op_id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
document.getElementById('div_main').style.display='none';
document.getElementById('div_success').style.display='block';
var row_id = document.getElementById('txtRow').value;
document.getElementById('row'+row_id).style.backgroundColor='#b4e8aa';
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Error submitting request.');
}
});
});
It's hard to determine what the problem might be given the information and it sounds like you've not fully tested the page in a consistent manner. It seems likely there is another element on the page affecting the click event, as opposed to the handler logic itself, but there's no way to tell. Make sure you are binding to the click event after the page is ready:
$(document).ready(function(){
$("#uniquedomid").bind('click',function(){
// click handler logic
});
});
Also, as you're new to JQuery, one thing you're going to want to start looking at are all the various ways in which JQuery can improve your life. It does almost everything. But for starters, you're going to want to start using:
$("#uniquedomid")
Instead of
document.getElementById("uniquedomid")
And
$("#uniquedomid").val();
Instead of
document.getElementById("uniquedomid").value