I am new to the jQuery AJAX ajax() Method. I have successfully created the function AddATeacher() which gets called because all the alert messages do popup. However the ajax() Method inside the function does not work. I know this because the addATeacherInsert.php does not load.
I got it to work under firefox, but not on chrome. However it only works in firefox when I have the alert message at the end of the code: alert ("Exiting myJQFunctions...");, otherwise it stops working all together. I would like it to work when I comment out the alert message at the end of the file. How can I solve this?
function AddATeachers()
{
var tFirstName = $('#teachers_first_name').attr('value');
var tLastName = $('#teachers_surname').attr('value');
alert ("Entering myJQFunctions...");
alert ("Teachers first name is: " + tFirstName);
$.ajax({
type: "GET",
url: "../pgs/addATeacherInsert.php",
data: "tFirstName="+ tFirstName +"&tLastName="+ tLastName,
success: function(html){$("#Ajax_response").html(html);}
});
// works well under firefox but shows alert
// doesnt work at all if commented out.
alert ("Exiting myJQFunctions...");
}
Ajax functions ends only after it gets response from server.
function AddATeachers()
{
var tFirstName = $('#teachers_first_name').attr('value');
var tLastName = $('#teachers_surname').attr('value');
alert ("Entering myJQFunctions...");
alert ("Teachers first name is: " + tFirstName);
$.ajax({
type: "GET",
url: "../pgs/addATeacherInsert.php?tFirstName="+ tFirstName +"&tLastName="+ tLastName,
success: function(html){
alert(html); // alerts the html code returned.
$("#Ajax_response").html(html);
alert("Exiting myJQFunctions..."); // Ajax function ends here only.
}
});
}
You could use the jQuery GET method
function AddATeachers() {
.get('url/phpPage.php', {tFirstName: $('#teachers_first_name').attr('value'), tLastName: $('#teachers_surname').attr('value')}, function(returnData){
$("#Ajax_response").html(returnData);
});
}
Answer for ur Question Only
$.ajax({
type: "GET",
url: "Enter Full file path",
data: "tFirstName="+ tFirstName +"& tLastName="+ tLastName,
success: function(html){
$("#Ajax_response").html(html);}
});
tyr this dude...
Related
The Ajax function below sends data from a page to the same page where it is interpreted by PHP.
Using Firebug we can see that the data is sent, however it is not received by the PHP page. If we change it to a $.get function and $_GET the data in PHP then it works.
Why does it not work with $.post and $_POST
$.ajax({
type: "POST",
url: 'http://www.example.com/page-in-question',
data: obj,
success: function(data){ alert(data)},
dataType: 'json'
});
if there is a problem, it probably in your php page.
Try to browse the php page directly in the browser and check what is your output.
If you need some inputs from post just change it to the GET in order to debug
try this
var sname = $("#sname").val();
var lname = $("#lname").val();
var html = $.ajax({
type: "POST",
url: "ajax.class.php",
data: "sname=" + sname +"&lname="+ lname ,
async: false
}).responseText;
if(html)
{
alert(html);
return false;
}
else
{
alert(html);
return true;
}
alax.class.php
<php
echo $_REQUEST['sname'];
echo $_REQUEST['sname'];
?>
Ajax on same page will not work to show data via POST etc because, PHP has already run that's why you would typically use the external page to process your data and then use ajax to grab the response.
example
success: function(){
$('#responseDiv').text(data);
}
You are posting the data... Check if the target is returning some data or not.
if it returns some data then only you can see the data otherwise not.
add both success and error.. so that you can get what exactly
success: function( data,textStatus,jqXHR ){
console.log(data);//if it returns any data
console.log(textStatus);//or alert(textStatus);
}
error: function( jqXHR,textStatus,errorThrown ){
console.log("There is some error");
console.log(errorThrown);
}
I have modified the code
to POST prodID to ProductsList.php
// its a dynamically generated drop menu
while($rowmnu2=mysql_fetch_assoc($resulmnusub2))
{
echo '<li><a id="'.$rowmnu2['liid'].'" href="#" onclick="passto(this.id)">'.$rowmnu2['title'].'</a></li>
';
}
and here is my ajax function :
function passto(val){
//window.location.href="ProductsList.php?idd=" + val;
$.ajax({
url: 'ProductsList.php',
type: "POST",
data: ({prodID: val}),
success: function(data){
//or if the data is JSON
window.location.href="ProductsList.php";
}
});
}
the passed element to the function is an integer
in the ProductsList.php I have
<?php
if(!$_POST['prodID']) die("There is no such product!");
echo $_POST['prodID'];
?>
and I get There is no such product! while there should be an INT #
why is that ?
any one knows? all the bellow suggestions are not responding correctly
$(document).ready(function() {
$("a").click(function(event) {
myid = $(this).attr('id');
$.ajax({
type: "POST",
url: "ProductsList.php",
data: {prodID: myid},
dataType: "json",
complete:function(){
window.location("ProductsList.php");
}
});
});
});
if you want to POST id , you can change:
...onclick="passto(this)"...
to
...onclick="passto(this.id)"...
That behavior is normal because you are requesting ProductsList.php twice. the first time with an AJAX request using $.ajax. for that time the id is sent correctly. The problem is that you request ProductsList.php again just after AJAX complete using window.location.href="ProductsList.php"; without sending anything. So the result is as expected, a page printing There is no such product!
You can fix the problem by replacing window.location.href="ProductsList.php"; by this one :
$('body').html(data);
or any other instruction to use properly the returned data.
You can either use my edited code or just edit yours :
echo '<li ><a id="'.$rowmnu2['link'].'" href="#">'.$rowmnu2['title'].'</a></li>';
JS part :
$('a').click(function() {
var val = $( this ).attr('id');
$.ajax({
type: "POST",
url: "ProductsList.php",
data: {prodID:val},
complete:function(){
$('body').html(data);
}
});
});
I have checked around, but can't seem to figure out how this is done.
I would like to send form data to PHP to have it processed and inserted into a database (this is working).
Then I would like to send a variable ($selected_moid) back from PHP to a JavaScript function (the same one if possible) so that it can be used again.
function submit_data() {
"use strict";
$.post('insert.php', $('#formName').formSerialize());
$.get('add_host.cgi?moid='.$selected_moid.');
}
Here is my latest attempt, but still getting errors:
PHP:
$get_moid = "
SELECT ID FROM nagios.view_all_monitored_objects
WHERE CoID='$company'
AND MoTypeID='$type'
AND MoName='$name'
AND DNS='$name.$selected_shortname.mon'
AND IP='$ip'
";
while($MonitoredObjectID = mysql_fetch_row($get_moid)){
//Sets MonitoredObjectID for added/edited device.
$Response = $MonitoredObjectID;
if ($logon_choice = '1') {
$Response = $Response'&'$logon_id;
$Response = $Response'&'$logon_pwd;
}
}
echo json_encode($response);
JS:
function submit_data(action, formName) {
"use strict";
$.ajax({
cache: false,
type: 'POST',
url: 'library/plugins/' + action + '.php',
data: $('#' + formName).serialize(),
success: function (response) {
// PROCESS DATA HERE
var resp = $.parseJSON(response);
$.get('/nagios/cgi-bin/add_host.cgi', {moid: resp });
alert('success!');
},
error: function (response) {
//PROCESS HERE FOR FAILURE
alert('failure 'response);
}
});
}
I am going out on a limb on this since your question is not 100% clear. First of all, Javascript AJAX calls are asynchronous, meaning both the $.get and $.post will be call almost simultaneously.
If you are trying to get the response from one and using it in a second call, then you need to nest them in the success function. Since you are using jQuery, take a look at their API to see the arguments your AJAX call can handle (http://api.jquery.com/jQuery.post/)
$.post('insert.php', $('#formName').formSerialize(),function(data){
$.get('add_host.cgi?moid='+data);
});
In your PHP script, after you have updated the database and everything, just echo the data want. Javascript will take the text and put it in the data variable in the success function.
You need to use a callback function to get the returned value.
function submit_data(action, formName) {
"use strict";
$.post('insert.php', $('#' + formName).formSerialize(), function (selected_moid) {
$.get('add_host.cgi', {moid: selected_moid });
});
}
$("ID OF THE SUBMIT BUTTON").click(function() {
$.ajax({
cache: false,
type: 'POST',
url: 'FILE IN HERE FOR PROCESSING',
data: $("ID HERE OF THE FORM").serialize(),
success: function(data) {
// PROCESS DATA HERE
},
error: function(data) {
//PROCESS HERE FOR FAILURE
}
});
return false; //This stops the Button from Actually Preforming
});
Now for the Php
<?php
start_session(); <-- This will make it share the same Session Princables
//error check and soforth use $_POST[] to get everything
$Response = array('success'=>true, 'VAR'=>'DATA'); <--- Success
$Response = array('success'=>false, 'VAR'=>'DATA'); <--- fails
echo json_encode($Response);
?>
I forgot to Mention, this is using JavaScript/jQuery, and ajax to do this.
Example of this as a Function
Var Form_Data = THIS IS THE DATA OF THE FORM;
function YOUR FUNCTION HERE(VARS HERE) {
$.ajax({
cache: false,
type: 'POST',
url: 'FILE IN HERE FOR PROCESSING',
data:Form_Data.serialize(),
success: function(data) {
// PROCESS DATA HERE
},
error: function(data) {
//PROCESS HERE FOR FAILURE
}
});
}
Now you could use this as the Button Click which would also function :3
I have a function that does a simple call to a PHP file with a simple INSERT statement in it. When I click the corresponding button, the function does not even send the AJAX request or return false.
$(function() {
$('#add_employee_submit').click(function() {
var fname = $('#eie_fname').text();
var lname = $('#eie_lname').text();
var doNo = $('#eie_doNo').val();
var emergency = 0;
if($('#eie_emergency').is(':checked')) {
emergency = 1;
}
$.ajax({
type: "POST",
url: "scripts/employee_information_entry.php",
data: "fname="+fname+"&lname="+lname+"&dono="+doNo+"&emergency="+emergency,
success: function() {
showMessage('employee_added');
}
});
return false;
});
});
Am I missing something obvious here?
EDIT:
Instead of wasting more time trying to figure out what was wrong I went with #ThiefMaster's advice and used jquery.malsup.com/form. This is working correctly and is a lot let work.
Thanks for everyone's help. :)
The success function should have a response parameter i.e. your code would be like:
$.ajax({
type: "POST",
url: "scripts/employee_information_entry.php",
data: "fname="+fname+"&lname="+lname+"&dono="+doNo+"&emergency="+emergency,
success: function(response) {
showMessage('employee_added');
}
});
Also check if the various id's are present there or not.
The best method to check is to use firebug/developer console to check what parameters are being sent and what are being received.
Im using the jquery .load function to query a php file that will output some data. Now sometimes the script will return nothing. In this case, can I have the load function not put any data into my specified div? (right now it clears out the div and just puts a blank white area.
Thanks!
try using $.get;
$.get('<url>',{param1:true},function(result){
if(result) {
$('selector').html(result);
}
else {
//code to handle if no results
}
});
Use $.get
http://api.jquery.com/jQuery.get/
in addition to #jerjer's post, you can also use this:
var paramData= 'param=' + param1 + '&user=<?echo $user;?>';
$.ajax({
type: "GET",
data:paramData,
url: "myUrl.php",
dataType: "json", // this line is optional
success: function(result) {
// do you code here
alert(result); // this can be an any value returned from myUrl.php
},
statusCode: {
404: function() {
alert('page not found');
}
}
});