how do basic jquery ajax in typo3 flow?

Question

I am trying to do some very basic ajax. I just want an onchange event on a select that will call an ajax function that will get the options for another select and fill it in. However I am not sure how to do this in a simple way in Typo3 Flow. My php code for the action just looks like this:

 public function getProductsByCategoryAction(  $category='' ) {

        $postArguments = $this->request->getArguments();

        echo __LINE__;

        TYPO3\Flow\var_dump($postArguments);  die;
}

and my ajax call looks like this:

jQuery('#get_category').change(function(event) {
        event.preventDefault();
        alert('get products');
        var category  = jQuery('#get_category').val();
        alert(category);
        jQuery.ajax({  
            url: "/admin/orders/getproductsbycategory.html",
            data: {
                'category': category                
            },
            async: true,
            dataType: 'html',
            success: function(data) {
                alert('hi mom');
                ...

            }
        });
    });

when I try this url in the browser mysite-dot-com/admin/orders/getproductsbycategory.html?category=17ca6f3e-a9af-da7d-75cd-20f8d6a05ed0 on the page the var_dump just gives me array(empty). Why doesn't the request->getArguments() call work and give the category argument?

The getproductsbycategory.html is created in Neos and has the right plugin for the action call. So I know the right action gets run but it does not get any args. At this point the argument is just a string and not an _identity even though I should eventually do it that way, I'm trying to keep things simple for now for the sake of expediency.

Thanks

Update: as a temp workaround shameless hack I just did this to get the variable:

$categoryID = $_GET['category'];

which works but I'd like to know the proper way especially if it does not involve writing my own view helpers.

Answer 1

First define variable in your html file

<script>
var ajaxUrl = '<f:uri.action action="actionName" controller="(controllername)Ajax"/>';
</script>

Your Ajax code will look like :->

$.ajax({
    data: '&lookup='+{somevalue},
    type: 'POST',
    url: ajaxUrl,
    success: function(data) {
        $('.lookup-id').append(data);
    },
}); 

Your conroller action will look like :->

public function getLookupIdAction(){

    // Get company detail for set logo of company
    $companyDetail = $this->getUserCompany();

    // Template Name
    $templateName = 'GetLookupID.html';
    $viewVariables = $this->lookupIdentifierRepository->findByCompany($companyDetail);
    $templatepath = 'resource://WIND.Alertregistration/Private/Templates/LookupIdentifier/' . $templateName;
    $this->standaloneView->setLayoutRootPath('resource://WIND.Alertregistration/Private/Layouts');
    $this->standaloneView->setPartialRootPath('resource://WIND.Alertregistration/Private/Partials');
    $this->standaloneView->setFormat('html');
    $this->standaloneView->setTemplatePathAndFilename($templatepath);
    $this->standaloneView->assignMultiple(array("lookUpValue" => $viewVariables));
    $this->standaloneView->setControllerContext($this->getControllerContext());

    return $this->standaloneView->render();
}

Your view file look like :->

<f:layout name="Lookup" />
<f:section name="Content">
    <label for="lookupId" style="box-sizing: border-box;">Identifier</label>
    <div class="select-box" style="box-sizing: border-box;">

        // Your Code 
    </div>
</f:section>