CODEWITHSUNDEEP
jqueryajaxjson
JPK
JPK

Reputation: 491

Data not being sent via JQuery/AJAX

i am trying to send the contents of an input box to a php file via JQuery/AJAX. When the script runs, all seems well, however, I receive nothing back. The following is my ajax call;

$(document).ready(function(){

$("#kinaseEntry").change(function ()    {

    var kinaseEntry = $("#kinaseEntry").val();
    var dataString = "kinaseEntry=" + kinaseEntry;

    $("#waiting").show(500);
    $("#message").hide(0);
    alert(kinaseEntry);

    //Fetch list from database
    $.ajax({
        type : "GET",
        url : "post.php",
        datatype: "json",
        data:   dataString,
        success : function(datas)   {
            $("#message").show(500);
            $("#message").html(datas);
            alert(datas);
        }
    });
    return false;
});
});

I get the following result in the address bar after the script has run;

http://www.someaddress.com/test/?kinaseEntry=#

Any help will be greatly appreciated, I am only starting to familiarize with JSON.

This is the results form testing the php file 

{"kinaseSKU":"ABL1","url":"https:\/\/products.beta.invitrogen.com\/ivgn\/en\/US\/adirect\/invitrogen?cmd=catProductDetail&showAddButton=true&productID=P3049","molecularWeight":"125.4 kDa","tracerSKU":"","antiSKU1":"","antiSKU2":"","bufferSKU":"","tracerConc":"","assayConc":""}

The input form looks like;

<form id="form" action="#">
<p>To begin, start typing a Kinase:</p>
<input type="text" size="25" name="kinaseEntry" id="kinaseEntry" />
</form>

Upvotes: 0

Views: 443

Answers (3)

mdprotacio
mdprotacio

Reputation: 842

var dataString = "kinaseEntry=" + kinaseEntry;

Since the problem is that you didn't receive feedback from the action url, you may want to check your post.php. Also if you are using datatype json make sure you do the following:

header("Content-type:application/json");
echo json_encode($variable); //where variable is your result

JQuery is strict on content type being received if you specify json as the datatype

Upvotes: 1

benqus
benqus

Reputation: 1149

Try this one:

$(document).ready(function(){
    $("#kinaseEntry").change(function ()    {
        $("#waiting").show(500);
        $("#message").hide(0);

        //Fetch list from database
        $.getJSON("post.php", {
            kinaseEntry : $(this).val()
        }, function (datas) {
            $("#message").html(datas);
        })

        return false;
    });
});

Seems easier for me... =] Hope this helps.. =]

Upvotes: 0

Klaus Byskov Pedersen
Klaus Byskov Pedersen

Reputation: 121067

From the docs:

The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string using jQuery.param() before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the contentType option from application/x-www-form-urlencoded to a more appropriate MIME type.

You are just sending a plain string, not a key/value pair. Try adding an = to your string or use a map.

Upvotes: 0

Related Questions