I am working on wordpress site, i created custom form, in which i am getting voucher code and after validating this code , submitting this form to another url , defined in form action, here is jquery for this work,
<script type="text/javascript">
$( document ).ready(function() {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$( "#submit_btn_redeem" ).click(function(event) {
event.preventDefault();
var form = $("#form-voucher");
var voucher_code = $("#voucher_code").val();
var btn = $(this);
if(voucher_code!=""){
$("#voucher_code").removeClass("error-fld");
btn.prop('disabled', true);
btn.attr("disabled","disabled");
$(".loading").show();
var action_data = {
'action': 'check_voucher_code',
'voucher_code': voucher_code
};
$.ajax({
type: 'POST',
url: ajaxurl,
data: action_data,
dataType: 'json',
success: function (response) {
$(".loading").hide();
btn.prop('disabled',false);
btn.removeAttr("disabled");
if(response.status==1){
$(".response").html(response.message);
$(".response").show().delay(2000).hide(0);
alert($("#voucher_code").val());
//return false;
setTimeout(function(){
document.getElementById("form-voucher").submit();
}, 1000);
}else{
$("#voucher_code").addClass("error-fld");
$(".response").html(response.message);
$(".response").show().delay(3000).hide(0);
}
}
});
}else{
$("#voucher_code").addClass("error-fld");
}
});
});
</script>
Problem is when it submit on given url , it is first redirect to 301 with POST method, then again generate GET request with no parameter and sumitted to that url, I have dumped $_REQUEST on action url, not getting any data here, i have also check .htaccess and redirect plugin, there is no such url exists for redirection, the question is submitting form with post method redirect, while with GET method its work fine, any body can help
You need to defined the action function in your function.php file in your theme, which will look something like this
add_action( 'wp_ajax_nopriv_check_voucher_code', 'functiontohook' );
add_action( 'wp_ajax_check_voucher_code', 'functiontohook' );
After that you need to specify the action in you ajax request which you have done. In functiontohook you can get your all json data and do anything that you want to do. Let me know if anything is not clear. I hope this will help you out.
Related
In Laravel -Controller name is ProductController, method is showproductinmodal .
I tried this, javascript code it worked.
Web Route:
Route::get('admin/product/show/{id}', 'Admin\ProductController#showproductinmodal');
JS:
<script>
$('.showinfo').click(function(){
var productid = $(this).data('id');
// AJAX request
$(".modal-body").load("{{URL::to('admin/product/show/')}}"+"/"+productid);
});
</script>
Url loaded and returned some text to modal.
But this Javascript code not worked, i want to use code below:
$(document).ready(function(){
$('.showinfo').click(function(){
var productid = $(this).data('id');
// AJAX request
$.ajax({
url: '{{route('admin.showproductinmodal')}}',
type: 'post',
data: {id: productid},
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);
}
});
});
});
My web route code
Route::post('admin/product/show/', 'Admin\ProductController#showproductinmodal')->name('admin.showproductinmodal');
My Controller code:
public function showproductinmodal(Request $id)
{
return "Your test id:" . $id;
}
My a tag
Any ID test
Modal works normal, pops up when I use first javascript code everything works ok data loading, but second javascript code is necessary for me. I inserted alert also in $.ajax request but it didn't work.
Might be you are missing crsf token in you case:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
Set csrf token for ajax call once then call N number of ajax:
$(document).ready(function () {
$('.showinfo').click(function () {
var productid = $(this).data('id');
let url = "{!! route('admin.showproductinmodal') !!}"
// AJAX request
$.ajax({
url: url,
type: 'post',
data: {
id: productid
},
success: function (response) {
// Add response in Modal body
$('.modal-body').html(response);
}
});
});
});
And it will me more better, if you will use bootstrap model event, and use base url with javascript global variable.
index.php
<script>
$(document).ready(function() {
$("#submit").click(function() {
var field = $("#field").val();
$("#popular_colleges" ).load( "xyz.php");
$("#popular_colleges").on( "click", ".pagination a", function (e){
e.preventDefault();
$("imagen").show();
var page = $(this).attr("data-page");
$("#popular_colleges").load("xyz.php",{"page":page}, function(){
$("imagen").hide();
});
});
});
</script>
xyz.php
//another page code
Here I having two pages i.e. index.php and xyz.php now I want to post index.php page variable (var field) to xyz.php. How can I do this ? can anyone help me please ?
Thank You
To post var field = $("#field").val(); from index.php to xyz.php you have to use the jquery ajax(). To use this you have to include the jquery library in your page and its syntax is like:
$.ajax({
url : 'xyz.php',
method : 'post',
data : {
field: field
// key: value pair
},
success: function(response){
// here response in the response you get from xyz.php
}
});
xyz.php: you can get the posted value like:
$field = $_POST['field'];
You can use $.get(), or $.post(), or the more powerful and complex $.ajax().
For a simple value called page, get or post should be sufficient:
$.post('/path/to/other-page.php', {page: page}, function(data){
console.log(data); // what your other page returned
});
I am stuck while passing the input values to same page for that i used Ajax but it is not happening and here my ajax function not working and i think its all because of URL given in the below code.
Just tell me, what should I insert in url section so that I can pass the values on the same page.
Please suggest your thoughts on the same.
$(document).on('submit', '#saveForm', function()
{
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'index.php',
data : data,
success : function(data)
{
$("#saveForm").fadeOut(500).hide(function()
{
$(".result").fadeIn(500).show(function()
{
$("#demo").html(data);
});
});
}
});
return false;
});
I have two files filter.php and products.php included to index.php and I am using .post submit form without refreshing. I send data to products.php and return it back also i refresh my filter and there is my problem. When i try to var dump post data in filter.php it is empty
Here is my script
function ajaxFilter()
{
var str = jQuery( "form[name=\"filters\"]" ).serialize();
jQuery.post( "/", str )
.done(function( data ) {
var productList = jQuery(data).find(".list_product").html();
var filter = jQuery(data).find(".filters").html();
jQuery(".list_product").html(productList);
jQuery(".filters").html(filter);
});
}
Any ideas how to get POST?
I though about putting my post via script to hidden inputs and return them also as html
If it is bad idea or just wrong start.
try this:
var Data = $("form[name=\"filters\"]").serializeArray();
var URL = "products.php"; // whatever filepath where you send data
jQuery.ajax({
type: "POST",
url: URL,
processData: true,
data: Data,
dataType: "html",
success: function (productList) {
// filter your result whatever you return from products.php
jQuery(".list_product").html(productList);
},
error: function (x, y, z) {
var a = x.responseText;
jQuery(".list_product").html(a);
}
});
Use the full URL.
Provide the return values of .error() if you still have problems.
ive been trying for hours to get this to work and havent moved a budge.
What im trying to do is send an url when a button is click, but without refreshing the page
php code of button:
echo 'Send';
jquery code:
<script type="text/javascript">
//Attach an onclick handler to each of your buttons that are meant to "approve"
$('approve-button').click(function(){
//Get the ID of the button that was clicked on
var id_of_item_to_approve = $(this).attr("id");
$.ajax({
url: "votehandler.php", //This is the page where you will handle your SQL insert
type: "POST",
data: "id=" + id_of_item_to_approve, //The data your sending to some-page.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
</script>
votehandler.php:
<?php
$data = $_POST['id'];
mysql_query("UPDATE `link` SET `up_vote` = up_vote +1 WHERE `link_url` = '$data'");
?>
Ive removed all the error checks from votehandler.php to try to get any response but so far nothing.
any advice is welcome, trying to understand jquery/ajax.
Two problems with your code:
The jquery selector isn't working. Correct is: 'a[class="approve-button"]'
The code should being wrapped within the jquery ready() function to make sure that the DOM (with the links) has already been loaded before the javascript code executes.
Here comes a working example:
$(function() { // wrap inside the jquery ready() function
//Attach an onclick handler to each of your buttons that are meant to "approve"
$('a[class="approve-button"]').click(function(){
//Get the ID of the button that was clicked on
var id_of_item_to_approve = $(this).attr("id");
$.ajax({
url: "votehandler.php", //This is the page where you will handle your SQL insert
type: "POST",
data: "id=" + id_of_item_to_approve, //The data your sending to some-page.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
});