How to pass AJAX arguments to the extbase action?

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);
}