jQuery Ajax posting not working

Question

My jQuery ajax posting is not working. Here is the javascript

function SocialButtons() {  
var $buttonWrapper = jQuery('.WrapperDiv');
if ($buttonWrapper.length){
    var postData = $buttonWrapper.html();
    jQuery.ajax({
        type: 'POST',
        url: 'http://www.wordpress-site.com/wp-contents/themes/theme-name/post.php',
        data: postData, 
        cache: false,
        success: function(data) { 
            console.log(data);
        },
        contentType: "application/json",
        dataType: 'json'    
    });
}
}

I am saving the data to be posted inside a hidden div like

<div class='WrapperDiv hidden'>{"post_id":392,"url":"http:\/\/www.wordpress-site\/post\/post-title\/","title":"SEO Friendly title"}</div>

All I am getting in return from the post.php page is an empty array. Here is my code for post.php

<?php
if(isset($_POST)){
    print_r($_POST);
} else {
    echo "0";
}   
?>

Any Idea whats wrong?

EDIT : Its working after I removed

    contentType: "application/json",
    dataType: 'json'

the html grabbed would just be a string? you need to create a real array from that. — PlantTheIdea, Apr 26 '13 at 17:20
postData is just a string, not an object. When using strings, the string would have to be built as a querystring, not JSON. — adeneo, Apr 26 '13 at 17:21
Something like : `
?post_id=392&url=http:\\www.wordpress-site\post\post-title\&title=SEO%20Friendly%20title
` — adeneo, Apr 26 '13 at 17:48

score 0 · Answer 1 · answered Apr 26 '13 at 17:25

0

What about something like this:

var postData = "data=" + encodeURCIComponent($buttonWrapper.html());

Than in PHP:

echo $_POST["data"];

Than parse it or something....

answered Apr 26 '13 at 17:25

Draško

727
1
8
12

score 0 · Answer 2 · answered Apr 26 '13 at 17:29

Couple of things to try,

Try to pass the data directly in to the data object first. If it works then you can debug and see why it's not ready your hidden div.

instead of $buttonWrapper.html try $buttonWrapper.text();

function SocialButtons() {  
var $buttonWrapper = jQuery('.WrapperDiv');
if ($buttonWrapper.length){
    var postData = $buttonWrapper.**text**();
    jQuery.ajax({
        type: 'POST',
        url: 'http://www.wordpress-site.com/wp-contents/themes/theme-name/post.php',
        data: **{'id':1}**, 
        cache: false,
        success: function(data) { 
            console.log(data);
        },
        contentType: "application/json",
        dataType: 'json'    
    });
}
}

Cory Shaw · Answer 3 · 2013-04-26T17:43:55.347

Inside your jQuery ajax call, your data is not set to $_POST variable names. Hence why nothing is showing

Try changing your function to this:

function SocialButtons() {  
  var buttonWrapper = jQuery('.WrapperDiv');
  if (buttonWrapper.length){
    var postData = buttonWrapper.html();
    jQuery.ajax({
    type: 'POST',
    url: 'http://www.wordpress-site.com/wp-contents/themes/theme-name/post.php',
    data: {postData: postData}, 
    cache: false,
    success: function(data) { 
        console.log(data);
    },
    contentType: "application/json",
    dataType: 'json'    
    });
  }
}

Then you should have a $_POST['postData'] variable on your print_r or var_dump of $_POST.

@rahulRam See my edit. Take out '$' in front of buttonWrapper, and see if that works. — Cory Shaw, Apr 26 '13 at 17:45

score 0 · Accepted Answer · answered Apr 29 '13 at 09:50

0

Its working after I removed

contentType: "application/json",
dataType: 'json'

answered Apr 29 '13 at 09:50

rahul Ram

91
1
1
6

jQuery Ajax posting not working

4 Answers4