I've been struggling with this for a while, I checked everything I could think of and I'm sure this should work.. but it doesn't. The idea is simple - you have a form input of type "text". When you type a number in the input and click "Click me!", it should POST the data in JSON format to a Route (handled via Closure), which would then check if the input is in JSON format and if yes, make a database request, then return the data.
Here is my view (table.blade.php)
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>json test</title>
</head>
<body>
<form action="#">
<input type="text" name="articleID" id="articleid" placeholder="Enter article id" value=""/>
</form>
<a href="#" id="trigger">Click me!</a>
<script>
$(document).ready(function(){
var a_id = $("#articleid").val();
var article = { id: a_id };
$("#trigger").click(function(){
console.log(article);
$.ajax({
type: "POST",
url: "/json",
data: article,
dataType: 'json',
success: function(data){
alert(data.title);
}
});
return false;
});
});
</script>
</body>
</html>
And my routes.php
Route::get('json',function(){
return View::make('table');
});
Route::post('json',function(){
if (Input::isJson())
{
$request = Input::all();
$article = Article::find($request['id']);
if (!is_null($article))
{
return Response::json($article);
}
else return Response::json(['error' => "Object not found"],404);
}
else return "not json";
});
I've got two problems with this:
-
console.log(article);printsObject { id=""}so JS doesn't seem to pick up the value of theinput - No matter what, I always receive the response
"not json", even if I replacedata: articlewith something likedata: {id: 123}in the ajax call
UPDATE
Thanks to milz, the first issue is now fixed, I refactored the $(document).ready() function like so:
$("#trigger").click(function(){
var a_id = $("#articleid").val();
var article = { id: a_id };
console.log(article);
$.ajax({
type: "POST",
url: "/json",
data: article,
dataType: 'json',
success: function(data){
alert(data.title);
}
});
return false;
});
Now the object is properly set, however the backend still returns only "not json"... I have no idea what I'm doing wrong here, I will appreciate any help! Thanks in advance!
