I got a simple php page that executes a Jquery script as follows:
SCRIPT part:
<script>
$(document).ready(function(){
$(".ajax_link").mouseover(function(){
sfpRx($(this).text());
});
}
function sfpRx(sfp){
console.log("sfpRx Was executed");
$.ajax({
type: "GET",
url: "/NOKIA/sfp-load.php?sfp="+sfp,
async: true,
dataType: "text",
timeout: 5,
success: function(data){
console.log(data);
}
});
}
</script>
HTML part:
<td class="ajax_link">3FE62600AA</td>
sfp-load.php content:
<?php echo $_GET['sfp'];?>
Explanation: everytime I mouse over the HTML part on the page, it executes the sfpRx() function that makes an ajax call to sfp-load.php. This Php page should return "3FE62600AA" to the ajax call, which should get printed in the console.
Problem: the "3FE62600AA" never gets printed in the console but I'm certain that the sfpRx() function is called because it prints "sfpRx Was executed" in the console. What could be happening? Am i forgetting anything? I'am sure the sfp-load.php page is in the NOKIA/ folder. I'am really annoyed with this.
Related
$('#submitAtt').click(function(event){
event.preventDefault();
$.ajax({
url: "submitattendance.php",
method: "post",
data: $('form').serialize(),
dataType: "text",
success: function(strmessage){
$('#message').text("Submitted Successfully");
alert('clicked');
$("#submitAtt").text('Save');
}
})
})
I'm trying to change the value of button when the data is submitted, but its not working ..
It depends on what kind of button it is. If it's a button like such
<button>some_text</button>
Then you can use
$(#id).html('some_text');. However, if it's a <input type='button' value='some_text'/> then you should use $(#id).prop('value', 'some_text'). Keep in kind if your PHP file is throwing an error than the success script will not run. To check if it's a problem with the PHP simply write console.log('test') within the success function and if 'test' does not show up in your console then the PHP script isn't working.
I am developing using jQuery 2.0.2 on Debian 7.0.0.
I am trying to call a PHP script from a JavaScript file using jQuery.ajax. My code is as follows.
jQuery.ajax({
type: "POST",
url: "DisplayParameters.php",
data: { LUT:lut,
Brightness: brightness,
Gamma: gamma,
Background: background}
}).done(function( result ) {
$("#msg").html( " Ajax called" );
});
At the beginning of DisplayParameters.php, I have the following.
?>
<script language="JavaScript">
alert('DisplayParameters');
</script>
<?php
but the alert box is not called. Firebug proceeds without any errors and shows the DisplayParameters.php text (with a +/- control to collapse and expand it). But the alert box is not called. I cannot get any feedback from DisplayParameters.php to trace what is happening.
What would be the best way for me to get feedback (like alert boxes or console.log) from DisplayParameters.php?
Your ajax call returns the contents of DisplayParameters.php as text, console.log(result) would show:
<script language="JavaScript">
alert('DisplayParameters');
</script>
If you want to add this extra code to the page (which I don't recommend unless you are sure you won't break the current page), you can try:
jQuery.ajax({
type: "POST",
url: "DisplayParameters.php",
data: { LUT:lut,
Brightness: brightness,
Gamma: gamma,
Background: background}
}).done(function( result ){
$("#msg").html( " Ajax called" );
$("body").append(result);
});
Another approach would be to serialize (JSON) the information you need, set the dataType: "json" option, and act based on this information.
If you will send HTML, ensure your PHP code doesn't shows any error or warning messages.
The alert() should happen inside .done() on the ajax call. Like the following:
.done(function(result) {
alert(result);
$("#msg").html( " Ajax called" );
});
And instead of alerting on DisplayParameters.php, use echo so that that will be the returned value for result. Like the following:
<script language="JavaScript">
//...some JS codes here
<?php echo 'DisplayParameters'; ?>
</script>
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 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'm trying ajax for the first time but it doesn't work.
This is "some.php" which handles the ajax call:
<?php
echo "success";
?>
And this is the javascript that calls it:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
var msg;
$.ajax({
type: "POST",
url: "some.php",
data: ({ })
success: function(msg){
alert( msg );
}
});
</script>
Can you see where the problem is?
I should state I'm working under wordpress and both files reside in \wp-content\themes\twentyten (maybe the url in the ajax call is wrong?)
First of all remove the data:({}) which is pointless. you are also missing a , behind your data statement. this is most likely the issue.
if both the files is in the same directory, then the url should be correct.
However, i urge you to use a tool like FireBug in order to debug your problem further
You should run your script when the page has loaded (more precisely, when the DOM is ready). jQuery offers an event for that.
Your code could then look something like this:
$(document).ready(function(){
$.ajax({
type: "POST",
url: "some.php",
data: ({ })
success: function(msg){
alert( msg );
}
}
});
Two things to do:
register a .fail callback. The code as it is will just call the alert() if it succeeds, otherwise, errors are not raised. See http://api.jquery.com/jQuery.ajax.
check the web server log to see if some.php is exec'd and if so, what errors may be occurring on the server.