Jquery Post Not Processing file - php

Question

I am stil having issues with my code the file is not being processed when permalinks are set to anything other than default.
<div id="thanks" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Redeem Points</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" class="contact" name="commentform" >
<div class="form-group">
<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>
<input type="hidden" name="playerid" value="<?php echo $playerId;;?>" />
<input type="number" valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />
<label class="control-label col-md-4" for="Comments">Comments?</label>
<input type="text" name="comments" />
</div>
<div class="form-group">
<div class="col-md-6">
<button class="btn btn-success" id="submit">submit</button>
Close
</div>
</div>
</form>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div><!-- End of Modal -->
I thought the inital issue was the but when i turn permalinks off it appears to work ok I really dont no what the issue is here thanks. The html above is in the file /wp-content/themes/gogreensoccer5/kids-dashbaord.php as well as the jquery below i am at a loss.
type: "POST",
url: "/bin/sendredeempoints.php",
<script>
$('#thanks').modal('show').on('shown.bs.modal', function () {
//Ajax Method Call starts here
var points = $("#points").val();
$("#send_btn").click(function () {
var dataString = 'points=' + points;
alert(dataString);//Remove this
return false;//Remove this
$.ajax({
type: "POST",
url: "/bin/sendredeempoints.php",
data: $('form.contact').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function () {
alert("failure");
}
});
//Ajax Method Ends
}); //Click Function ends
}); //Modal event Ends
</script>
Stop with the downvoting whoever it is.
Edit
Got A bit further
added this to my functions but its still saying file not found :-(
function load_these_scripts() {
wp_register_script( 'your_script', get_bloginfo('template_directory').'js/redeempoints.js', false, false, true );
wp_localize_script( 'my_ajax_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
add_action("wp_ajax_php_function_name", "redeempoints");
add_action("wp_ajax_nopriv_php_function_name", "redeempoints");
function redeempoints() {
// Some stuff here
global $wpdb;
// $result = $wpdb->get_results( /* SQL code goes here */ );
// Do something with $result
}
You may only redeem the maxium points of :
" />
" name="points" class="form-control" placeholder="How many points do you wish to redeem." />
Comments?
</div>
<div class="form-group">
<div class="col-md-6">
<button class="btn btn-success" id="submit">submit</button>
Close
</div>
</div>
</form>
my js file
var formdata = $('form.contact').serialize();
var allData = {
action: 'redeempoints',
data: formdata
}
jQuery.ajax({
type : "post",
dataType : "json",
url : myAjax.ajaxurl,
data : allData,
success: function(response) {
if(response.type == "success") {
// Do something
}
else {
// Do something else
}
}
});

Answer 1

You need to change the way you use AJAX alongside WordPress :)
First up, in your functions.php (or plugin file), you'll have to localize admin-ajax.php and register a JS file where you'll make the AJAX calls - looks like this:
add_action( 'wp_enqueue_scripts', 'load_these_scripts' );
function load_these_scripts() {
wp_register_script( 'your_script', 'URI_OF_JS_THAT_MAKES_THE_AJAX_CALLS/scripts.js', false, false, true );
wp_localize_script( 'my_ajax_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
Then in your scripts.js you need to make the AJAX calls like this:
Use this instead of the "data :"
$("#send_btn").click(function () {
var formdata = $('form.contact').serialize();
var allData = {
action: 'php_function_name',
data: formdata
}
jQuery.ajax({
type : "post",
dataType : "json",
url : myAjax.ajaxurl,
data : allData,
success: function(response) {
if(response.type == "success") {
// Do something
}
else {
// Do something else
}
}
});
});
The action: "php_function_name" actually tells WP which function to call but you also need register that well. Do it like this, back in your functions.php (or plugin file):
add_action("wp_ajax_php_function_name", "php_function_name");
add_action("wp_ajax_nopriv_php_function_name", "php_function_name");
function php_function_name() {
// Some stuff here
global $wpdb;
$result = $wpdb->get_results( /* SQL code goes here */ );
// Do something with $result
}
Make sure you register the function with both "wp_ajax" & "wp_ajax_norpiv" otherwise it will only work for logged in users.
Cheers

Answer 2

First. This is an ajax post. Using jquery post its a bit different http://api.jquery.com/jquery.post/
Your question is about posting in jquery, not ajax. So lets modify your code a little:
<script>
$('#thanks').modal('show').on('shown.bs.modal', function () {
var points = $("#points").val();
$("#send_btn").click(function () {
var dataString = 'points=' + points;
alert(dataString);//Remove this
return false;//Remove this
var url = "/bin/sendredeempoints.php";
var data = $('form.contact').serialize(),
$.post( url, { data: data })
.done(function() {
$("#thanks").html(msg)
$("#form-content").modal('hide');
}).fail({
alert("failure");
});
});//Click Function ends
}); //Modal event Ends
</script>
Posting with ajax is a pain in the ass. Since there is Jquery .post() its very easy. Modify if it's not correct. Let me know if it helped.
I see you use alert(). Use console.log() instead. No annoying popups. you can see the data in developer tools console.
EDIT2
The error you get, means your url isn't correct. You are trying to post to a file instead to an url.
I suppose you have an index file or a file that includes other files.
Enter some php code to the file that includes this script.
The php script checks in the url for data and if its true.
<?php
if(isset($_POST['data']) AND $_GET['data'] == 'true'){
//Go to your php file. or include it.
//EXAMPLE
include "/bin/sendredeempoints.php";
//On the sendredeempoints you can do whatever you want with the post.
}
?>
Change your var url to this:
var url = "YOURWEBSITE.com?data=true"; // or the easy one
var url = window.location.href + "?data=true";