How to pass AJAX arguments to the extbase action? - ajax

Question

Now that I managed to get values from the database, I want to specify more what I want to be passed.
From a select box that reacts to the event function below, I want to read out a value (uid of a record) and pass it to my ajaxAction:
var uid;
$('#mySelectBox').change(function() {
arguments = $(this).attr('value');
var uri = '<f:uri.action arguments="{uid: '+uid+'}" action="ajax" controller="Mycontroller1" pageType="89657201" />';
jQuery.getJSON(uri, function(result) {
// do something
});
});
I tried it with arguments, no idea if that is the right way. Additionally, as Marcus Biesioroff suggested, I should save my JS into a separate file, but then I would have to write the uri on my own instead of the Fluid way, right?
My ajaxAction looks like this:
public function ajaxAction($uid) {
$dataFromRepo = $this->myRepository->findByUid($uid);
$resultArray = array(
"field1" => $dataFromRepo->getField1(),
"field2" => $dataFromRepo->getField2(),
"field3" => $dataFromRepo->getField3(),
"field4" => $dataFromRepo->getField4(),
);
return json_encode($resultArray);
}
I'm sure that the uid is not passed correctly, everything else works.

Answer 1

There are some mistakes:
You can't break vievhelper's syntax with JS even if it's placed in view, you need to pass full path of the action from <f:uri.action />
you cannot place this JS in view, because it contains curly brackets there's other description of the issue
you need to call ajax function from external file and pass to it action's link and uid separately, and then add the
in the view:
<script type="text/javascript">
var actionsPathFromViewHelperSetInTheView
= '<f:uri.action action="ajax" controller="Mycontroller1" pageType="89657201" />';
</script>
<script type="text/javascript" src="path/to/ext/Public/yourExternal.js"></script>
<!-- of course this field may/should be created with Fluid's viewhelper -->
<select id="mySelectBox" onchange="performAjaxCall(this)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
in the yourExternal.js (of course you need to change tx_yourextkey_yourplugin prefix to your own)
function performAjaxCall(selectFieldObj) {
$.ajax({
url: actionsPathFromViewHelperSetInTheView,
data:{
"tx_yourextkey_yourplugin[uid]":selectFieldObj.value
},
success:function (data) {
// do something with your json
alert('Load was performed.');
}
});
}
in your controller:
public function ajaxAction() {
// try to always validate the incoming arguments
if (!$this->request->hasArgument('uid') || intval($this->request->getArgument('uid')) == 0) {
header('HTTP/1.1 400 Bad Request');
return json_encode(array('error'=> 'Bad request'));
}
$uid = intval($this->request->getArgument('uid'));
$dataFromRepo = $this->myRepository->findByUid($uid);
if ($dataFromRepo == null) {
header('HTTP/1.1 404 Not found');
return json_encode(
array('error'=> 'Not found or you have no access or something else... happens...')
);
}
$resultArray = array(
"field1" => $dataFromRepo->getField1(),
// etc...
);
return json_encode($resultArray);
}