iam a beginner level wordpress developer ..now at halfway on creating newsletter plugin administration panel. In this admin panel iam using jquery.post ajax for submitting the form.Unfortunately the ajax is not working. But i am using the same wordpress ajax in my site's front end for taking email id from users and it's working fine.
i have verified all the code..unfortunately i couldn't find what's wrong in my code.
my jquery script
jQuery(document).ready(function(){
jQuery("#saveValue").click(function(){
jQuery("#apiData").submit();
});
jQuery("#apiData").submit(adminSettingSave('#apiData'));
});
function adminSettingSave(secti){
return function(){
var form_data = jQuery(secti).serialize();
form_data += '&action=settings-save';
alert(secti);
jQuery.post(ajaxurl, form_data, function (response) {
alert(response);
});
}
}
wordpress function
add_action( 'wp_ajax_settings-save', 'settings_save');
function settings_save()
{
die();
}
but this is not working, instead of this its reloading the page
please help me
How about change
jQuery("#apiData").submit(adminSettingSave('#apiData'));
to
jQuery("#apiData").submit(function() {adminSettingSave('#apiData'); return false});
I think your page reload because your submit event initialization do not work. The submit event listener function also need returning false to prevent default form action.
Related
I have created a ajax file handle after click add_to_cart. but my problem is my ajax file always run before woocommerce file (like my picture). How to run my custom ajax after woocommerce ajax add_to_cart ?
However its not a good practice, you can try the below code :
$('.add_to_cart_button').on('click',function(){
/** write your code here **/
});
Hope this helps
So I realize this post is old but I am experience the same problem. I used setTimeout to delay the ajax request by 500ms
jQuery(document).ready(function($) {
console.log('ajax-minicart.js loaded');
// What event do we want our AJAX to fire on? ADDING A PRODUCT TO CART.
$('.ajax_add_to_cart').on('click', function () {
// Fix
setTimeout( function () {
console.log('clicked');
// What data do we need to send? URL TO AJAX, ACTIONS
$.post(my_ajax_obj.ajax_url, {
_ajax_nonce: my_ajax_obj.nonce,
action: 'update_minicart',
}, function(response) {
// What do we want to do with response? REFRESH CART
console.log(response);
$('.cart-container').html(response);
});
}, 500);
});
});
I'm not sure of the stability or future-proofing of this fix but it works for now. I'd appreciate any information on why this happens myself.
I would like to ask help on jQuery Mobile plugin conflict on my main scripts. Im trying to create another version of the website, which is the mobile version with a bought template that uses jQuery Mobile. Still the site is in CodeIgniter framework based from the web version.
In my main scripts, I have a preventDefault() function on every form submit to display the validation errors. Then when I migrated the site I'm working on with the bought Mobile Template, it seems not to listen to the preventDefault(). whenever I submit a form, it will show validation errors but will change the page seconds after before I could read it. It refreshes the site.
My script looks something like the code below. This works on my web version. >>>
$('form#frm-signup-updates').submit(function(e){
e.preventDefault();
$.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){
if(data == 'success'){
loadpopup();
}
else{
var json = $.parseJSON(data);
$("span.error-notif#name").append(json.name);
$("span.error-notif#email").append(json.email);
}
});
});
Try return false to block submit.
$('form#frm-signup-updates').submit(function(e){
$.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){
if(data == 'success'){
loadpopup();
}
else{
var json = $.parseJSON(data);
$("span.error-notif#name").append(json.name);
$("span.error-notif#email").append(json.email);
}
});
return false;
});
UPDATE:
Well, I checked source code of jQuery Mobile and found that jQM prevent form submit by default, and handle with ajax.
//bind to form submit events, handle with Ajax
$.mobile.document.delegate("form", "submit", function(event) {
var formData = getAjaxFormData($(this));
if (formData) {
$.mobile.changePage(formData.url, formData.options);
event.preventDefault();
}
});
preventDefault is invalid because submit is done by $.mobile.changePage not browser.
So, if wanna prevent submit, that is $.mobile.changePage, I have two suggestions:
1. Add 'data-ajax=false' attribute to form element
demo1
2. Do ajax when submit button clicked
demo2
I'm working on a shopping cart and I'm having some difficulties with a concept.
Basicly, I remove two articles in a certain condition and it works perfectly.
My problem is that I want to redirect the user instantly if these two articles are removed from the cart.
When I enter the window.location, it is refreshing the page but it's not updating the cart from the ajax call.
So what I want to achieve is that after these two ajax calls, i want to be redirected but also, the ajax call should do their things in the delete_item.php :)
I'm using jQuery inside a normal javascript file on a certain function.
function deleted(id, pozitie) {
var msg = 0;
$(document).ready(function(){
$('.' + id).each(function() {
$(this).remove();
$('.sm').remove();
ajaxpage("delete_item.php?id="+pozitie+"&ord="+ordrno,"error");
ajaxpage("delete_item.php?id="+(pozitie+1)+"&ord="+ordrno,"error");
window.location="http://mypage.com/offer";
msg = 1;
});
});
Use a callback function and redirect your page if your ajax call return success. Hope it works.
ajaxpage("delete_item.php?id="+pozitie+"&ord="+ordrno,"error",callbackfn);
Callback funfction:
function callbackfn(){
window.location="http://mypage.com/offer";
}
The popup function is written in JQuery. It is placed on the parent page. When I click on a login button on the parent page, there will be a popup window asking for username and password. When the user actually logs in, as soon as the user closes the window, I want to refresh the parent page. If the user did not log in, he just opened the popup window and close, i want the parent page to remain as it is (do not refresh).
And the login function is written in PHP.
Here's the sample code I want to modify, thanks so much.
function() {
if (<?php echo $is_loggedin ?>) {
document.location.reload(true);
}
I used a picture instead of a button for the login function. This function resides on the popup page.
$(function(){
$('#login_onclick').click(function(){
$('#login_form').submit();
});
});
Try using:
window.opener.location.reload();
And bind that to the login submit of the child window.
So with jQuery, inside the child window, try:
$(function(){
$('#login_onclick').click(function(){
$('#login_form').submit();
window.opener.location.reload(); // Sorry for the mongrel JS/jQuery mix.
});
});
More information about the opener:
https://developer.mozilla.org/en-US/docs/DOM/window.opener
Use this script on login popup page (inside login 'susses' )
<script> window.top.location.reload(); </script>
Using just JavaScript does not do the trick. I tried..Thanks for all of your inputs.
I eventually got it working by using the AJAX method in JQuery. Please let me know if I can improve my method. Thanks again.
Write another login ajax call:
function user_settings(){
$.ajax({
async: false,
dataType: 'json',
type:'post',
url: 'validation/login',
success: function (j) {
login = j.ok;
if (login){
location.reload();
}
}
})
})
This function will be called when the popup window is closed.
I have an RSVP box on my website where I want people to click the tick or cross image depending on whether they are coming or not. I currently have a PHP system that updates a SQL database but it reloads the page.
I have tried this code:
$(document).ready(function() {
var options = {
url: 'process.php',
type: 'post',
data: 'attending',
success: success
};
// bind to the form's submit event
$('.attending').click(function {
$(this).ajaxSubmit(options);
return false;
});
function success(responseText, $form) {
$(".attending").hide();
$(".success").fadeIn();
}
});
The RSVP buttons are links with tags
But I am strugling with this, any help would be appreciated!
Thanks
The ajaxSubmit function is part of the jquery forms plugin ... are you including that plugin with the page? (You didn't tag the question with jquery-forms-plugin, so I'm guessing no) If this is your first go at jQuery ajax, I'd recommend using the .ajax method first, even though it's more lines of code, to get an understanding of what's going on there.
You missed the brackets after declaring the function in your click handler, try this:
// bind to the form's submit event
$('.attending').click(function() {
$(this).ajaxSubmit(options);
return false;
});
Or better yet:
// bind to the form's submit event
$('.attending').click(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
});