The form upload works if not called through Ajax first, but if the tab/page is loaded like
$.get(page+".php", {type: type}, function(d){ $('#mainContent').html(d); });
Then the Malsup jquery plugin doesn't work and will redirect to the url listed in the forms action section.
How do it get it to work the same way if I was directly on that page?
I believe on success of ajax request you have to re-bind Malsup plugin so that the DOM gets updated. You would have to add the rebinding in the success handler.This may solve your problem.
Related
I have a form in my index file in my theme folder.
I also have the script called find-locations-ajax.php in the same theme folder which Im trying to call. When I try to call the script file it keeps loading the entire site.
Here is my code
jQuery(function($) {
$.ajax({
url:'find-locations-ajax.php',
type:'POST',
data:querystring,
success: function(msg){
}//ends success code
});//ends ajax
})//ends submit handler
});//ends ready function
First time working in wordpress so please go easy on me.
EDIT. This is not for ADMIN functionalities
New edit:
You're doing AJAX a bit wrong for WordPress.
WordPress got a file to handle all of the AJAX requests, called admin-ajax.php and actions, to which you should bind your code to process these requests.
I suggest you read up documentation to get some understanding.
I have a really simple question; I'm developing a wordpress site that uses a filtering plugin. This plugin loads the results using ajax. The goal is to open the results in a lightbox (I'm using colorbox). I can get it to work on the first page, but after the results are dynamically added, it doesn't work anymore.
I know I have to reinitialise my colorbox after the ajax load, and the plugin also provides a code (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/), the thing is I'm not exactly sure where to place it.
I've added the following to the page's footer:
<script>
//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
console.log("ajax start");
});
//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$('.colorbox-link', context).colorbox();
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
//so load your lightbox or JS scripts here again
$('.colorbox-link', context).colorbox();
});
//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
console.log("S&F JS initialised");
});
</script>
Thanks!
I hope I am missing something simple here. I have a CakePHP web site I am using jQuery mobile with. I think CakePHP might have something to do with it, but I am not sure.
Anyway, I have a form I've created on my view page for adding comments. The Ajax call is working as expected on the first page that loads, but navigating to any other page prevents the data from being submitted. The console still logs 'data' each time I press the button (after using 'pagebeforeshow' as recommended somewhere else), however it seems to be the data from the original loaded page (I know this because I am currently debugging $this->request->data on the Form action page).
Clearly, I must need to "reset" the form somehow when moving across pages, but I am not sure if this is possible without refreshing the page. I do know about "data-ajax"="false" and "rel"="external" which can be used as a last resort, but I want to avoid refreshing the page if I can.
Any suggestions? Thank you.
Here is the JS I am using for the Ajax call
//<![CDATA[
$(document).on('pagebeforeshow', function(){
$(document).off('click', '#comment_add').on('click', '#comment_add',function(e) {
$.ajax({
async:true,
data:$("#sCommentViewForm").serialize(),
dataType:"html",
success:function (data, textStatus) {
//$('#comments').remove();
//$('<div id="comments"></div>').appendTo('#comments_container');
$("#comments").html(data).trigger('create');
//$('#comments_box').remove();
//$('<div id="comments_box"></div>').appendTo('#comments_container');
console.log(data);
},
type:"POST",
url:"commentsUsers/comment_add/<? echo $template['Template']['id']; ?>"});
return false;
});
});
//]]>
</script>
It was my basic lack of understanding. After lots of searching this simple post was most helpful:
Jquery Mobile Javascript not working on ajax load
Basically, I was using IDs for everything - when I switched to class names it was smooth sailing.
I'm using the jquery cluetip plugin and it is working fine. The problem is that when page is loaded from ajax and I want to use cluetip on any element of this page then it is not working.
I already call .cluetip() function on ajax loaded page.
Thanks
You'll have to initialise the plugin when you load the page via AJAX. Put your initialization code in the AJAX success callback.
This question already has answers here:
Closed 11 years ago.
I have a javascript function I would like to run on a page, that when executed will send a variable to a PHP script but not open the PHP page just stay on the current page.
What I am trying to do is add this function to pages on a website and for it to return information about the page it was run on, such as URL and user IP.
Everything I have tried so far has not done the job, so any info is appreciated.
Many thanks
Thanks Quentin, but I have tried to javascript forms, but they all open the url the form is being posted to. My most recent example:
var form = new Element('form',
{method: 'post', action: 'http://www.site.com/data.php'});
form.insert(new Element('input',
{name: 'u', value: ""+u, type: 'hidden'}));
$(document.body).insert(form);
form.submit();
I also tried:
document.location.href='http://www.site.com/data.php?u='+u;
but again this open the page :S
For those that have suggested AJAX, thank you but it wont work because that needs a script link in the header and I need to be able to plug this into a page without editing the header. I did try to dynamically insert it via the javascript function, it went in OK but none of the AJAX functions would execute.
What you are looking for is called AJAX (Asynchronous Javascript and XML). These type of calls in Javascript are made trivial with things like jQuery.
This is what jQuery's website says about AJAX: The jQuery library has a full suite of AJAX capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh.
And an example jQuery POST:
$.post('ajax/test.html', function(data) {
$('.result').html(data);
});
Using jQuery
for simplicity do something like this
$.ajax('foo.php',function(d){ alert(d); });