Ajax with wordpress - ajax

I'm make an ajax call to run a file:
var data = 'index=exp' + index;
var go_url = get_bloginfo('template_url') + '/form/exp.php';
$.ajax({
url: go_url,
type: "GET",
data: data,
cache: false
});
The file "exp.php" inserts a new row in mysql database and it works.. but with the ajax call nothing happens. As if he did not open the link.

I think you should add 'add_action' for functions in wordpress
like
function yourfunction(){
...
}
add_action('wp_ajax_your_function', 'yourfunction');
add_action('wp_ajax_nopriv_your_function', 'yourfunction');
and in your jquery you can call 'your_function' instead of php file

Is the ajax being called?
Try putting it inside of document ready.
$(document).ready(function() {
// put all your jQuery goodness in here.
});

Related

Using form data to dynamically construct url using ajax

I have the following ajax code that takes in 3 variables and passes them to a php file, and this is all fine and dandy. I want to do a redirect using the value stored in one of these variables. I figured I could just do window.location.href = within the success in the ajax call, but for some reason, it doesn't seem to respond to the click, and simply does nothing.
Here is the ajax function, hope y'all can help!
$("#findItem").click(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$.ajax({
type: 'get',
url: 'http://plato.cs.virginia.edu/~aam3xd/cabbage/closestBuildingWeb.php',
data: {
foodItemId: $('#foodItem').val(),
sentLongitude: position.coords.longitude,
sentLatitude: position.coords.latitude
},
success: function(data){
//$('#answer').html(data);
//the following line doesn't seem to be executing....
window.location.href = foodItemId+"/"+sentLatitude+"/"+sentLongitude;
}
});
});
I think you should use your url into that window.location
window.location.href = "www.example.com/"+foodItemId+"/"+sentLatitude+"/"+sentLongitude;

.done attachment not working with ajax update to file, works with read from file

Attaching .done .fail and .always to ajax calls is now doable for me - it is "easy" when the script is at the bottom of the html page.
Now I want to create generalized ajax functions that I can use just by including a js file in the header. I've been successful with ajax functions that read data from server (.done always works). I'm having problems when I just write or update data to the server (no return of data). Here are the specifics-
Standard ajax add/update call that always works - in script tags at bottom of page.
$.ajax({
type: 'POST',
url: 'supdateajaxfunctiontestbackend.php',
data: {localid: localid,
firstname: firstname,
lastname: lastname}
}).done(function(){ alert('Done with Add/Update!'); });
If I create a function at the bottom of the page, or add the function to a js file, this add/update always works.
function generalWriteAjax(filetocall, datatosend) {
$.ajax({
type: 'POST',
url: filetocall,
data: datatosend
}).done(function(){ alert('Done with Add/Update!'); });
}
I would like to detach the .done from the function, and call the .done when attached to a separate function/object. The following code works fine WHEN THERE IS DATA RETURNED FROM THE SERVER. (a separate generalReadAjax function that asks for server data). The done is attached to an object that is returned from the server (This concept I found here on Stackoverflow).
backenddata = generalReadAjax('readtesttablebackend.php');
displayData(backenddata);
backenddata.done(function(){ alert("Done with read!"); });
});
I have tried all of the following with the WRITE/UPDATE only function, and none of them work.
generalWriteAjax(filetocall4update, datatosend4update).done(function(){ alert('Done function'); });
generalWriteAjax(filetocall4update, datatosend4update).when(function(){ alert('Done function'); });
generalWriteAjax(filetocall4update, datatosend4update).then(function(){ alert('Done function'); });
generalWriteAjax(filetocall4update, datatosend4update);
createdonealert = generalWriteAjax(filetocall4update, datatosend4update);
createdonealert.done(function(){ alert('Done function'); });
createdonealert.when(function(){ alert('Done function'); });
createdonealert.then(function(){ alert('Done function'); });
So obviously, there is a difference in the way the promise is handled between a "go get me data" and "here is data, please store it".
I even put an echo "Done"; at the bottom of the update php file just to return something, and still no luck.
I've searched this site and google with combinations of:
ajax .done attach add update not working promise
and have found nothing that deals with my specific example.
Can someone give me some guidance?
I thank you in advance.
Well, no one has responded, and I've learned a bit by hacking on this for the last day. Here are some things I THINK I've learned:
If you create a general callable function using ajax, it does not act the same as an "inline" ajax - you do not get the same callback actions as you do when the ajax code is at the bottom of an HTML page between script tags.
If you return something from the server, the ajax function acts similarly to when it is between script tags.
If you DO NOT return data from the server, the ajax function does NOT act the same as when it is inline.
So what I've done is on all php files that are "write/update" only (no data returned), I add a little code to the bottom of each php file that returns a small amount of json "junk". With this "junk" the ajax function acts like a regular ajax call between script tags at the bottom of the page.
It's a kludge, but it works. Here is the code at the bottom of a read/update php file that normally would NOT return anything. It now returns a json array regarding "John":
$json = array('firstname' => 'John');
echo json_encode($json);
Here is the function in the attached js file:
function generalWriteAjax( filetocall, datatosend ) {
return $.ajax({
type: 'POST',
url: filetocall,
data: datatosend,
dataType: 'json'
});
}
Here is the code on the page that calls the .js function:
$("#clicktoupdate").click(function(e) {
var localid = $('#idnumber').val();
var firstname = $('#updatefirstname').val();
var lastname = $('#updatelastname').val();
var filetocall4update = 'supdateajaxfunctiontestbackend.php';
var datatosend4update = {localid: localid, firstname: firstname, lastname: lastname};
generalWriteAjax(filetocall4update, datatosend4update).done(function(){ alert('Done inline'); });
});//end of update click
I wish I understood the details, but this is an empiric solution that works.
Comments from the experts would be nice.
Thanks for looking!

Create file from AJAX response data and force download

I need to make an AJAX call from a page, sending some JavaScript data to a PHP file, which creates a file based on that data. I then want this file to be downloaded by the user.
So is it an option, to make a force download of a file created by PHP (specifically PHPExcel in my case) via an AJAX request?
The code shown below does not yet send any JavaScript data, but does generate a file.
This is my PHP script, which creates a file using PHPExcel:
public function renderTasksToExcel($tasksData){
$objPHPExcel = new PHPExcel();
// Set properties
$objPHPExcel->getProperties()->setCreator("TRW");
// ...
// Add some data
$objPHPExcel->setActiveSheetIndex(0);
$objPHPExcel->getActiveSheet()->SetCellValue('A1', 'Hello');
// ...
// Rename sheet
$objPHPExcel->getActiveSheet()->setTitle('Simple');
// Save Excel 2007 file
$objWriter = new PHPExcel_Writer_Excel2007($objPHPExcel);
$file = '/export.' . date('Y-m-d-H-i-s').'.xlsx';
$objWriter->save($file);
// hotovo
return $this->sendResponse(new FileResponse($file));
}
And this is AJAX call:
$.ajax({
type: "POST",
url: {plink Tasks:tasksToExcel},
data: ajaxData,
success:function(data){
$('#download').html(data);
}
})
same with mine. but i already solve this problem,try this:
use this in your php:
$objWriter->save('export/FileName.xls');
and use this in your ajax call:
$.ajax({
type: "POST",
url: {plink Tasks:tasksToExcel},
data: ajaxData,
success:function(data){
$('#download').html(data);
var zz=document.createElement('a');
var data_type = 'data:application/vnd.ms-excel';
zz.href ='htp://localhost/bengkel/backend/export/FileName.xls';
zz.download='FileName'+'.xls';
zz.click();
}
})
simple concept,ajax cant download. then,save *xls file,and then download that file with JS.
sorry im junior programmer and my bad english..
hope this help you,good luck :)

ajax call in joomla 2.5 module

I like to create a custom module in which I have a select list which on change has to select data from db and show the data.
How can I give the url in the ajax call in my module's helper function?
You create a module with a custom position then you load your module in a new article.
Every article has an ID and an ALIAS.So the url will be like that
http://myurl.gr/ID-ALIAS.html?tmpl=component&type=raw
For more details check the below link:
How to load a custom html module using ajax-call joomla 2.5
You can use something like this :
function datadelete(id){
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "index.php?option=componentname&task=deleteecontacts&type=ajax",
data: dataString,
cache: false,
success: function(msg)
});
}
I hope this will give you an idea about how to pass URL in Ajax call using Jquery

Grails: Passing a javascript variable to a template

I am new to ajax so maybe this is obvious. I've tried many different not-working approaches. I have javascript that when you click on a button:
an ajax call that grabs some data from a controller - returns an object
display that data in a template that I will show on the page
Here is the javascript/ajax:
<script type="text/javascript">
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Here is the key line in grails view template:
<g:each in="${allResults}" status="i" var="result">
How do I get the data from the javascript to the gsp code (ie allResults)?
Do I have to "refresh" this template to display new data?
thanks.
You just can't make your javascript/jquery code populate things in the gsp, since the gsp is processed server-side and javascript is processed client-side, after the gsp rendered all html documents and populated them with your model. You need to be aware that your page was already processed, so things like ${variables} won't be reloaded anymore. So when you do this:
$(".resulttable").show();
It's not gonna show the result you're waiting for. You have to use javascript code to reload your result table.
So if you're using ajax here, you should use the function success to alter your html table via javascript/jquery since you already have the response you wanted. Maybe this read can help you. Oh, and I think it would be better if in your ajax call, you would define a dataType (json works great in your case), like this:
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
dataType: 'json',
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Just to make clear what kind of response you're getting from the controller.
You do not need to write your ajax calls the hard way. There are some Grails intern tags you can use inside your html:
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
http://grails.org/doc/latest/ref/Tags/submitToRemote.html
http://grails.org/doc/latest/ref/Tags/remoteLink.html
Following the links you will find some nice examples...

Resources