JQuery: unable load a page in div when item selected in select list

Question

I am trying to load a page inside my div when either of the items are selected from the following select list:

<select id="opt">
                    <option value="">-Select a Plan-</option>
                    <option value="bin">Binary MLM</option>
                    <option value="mat">Matrix MLM</option>
                    <option value="uni">Uni-Level MLM</option>
                    <option value="gen">generation MLM</option>
                </select>

when an onchange event is triggerred, following jquery code:

$('#opt').on('change', function(event) {
    var val = $(this).val();
    $.("#desc").load('/assets/pages/'+val+'.html.twig');
});

should load a page in this span:

<span id="desc"></span>

but it isn't working that way. Please help me to point out the problem here. also note that this is a symfony project, and pages to be fetched are stored in /web/assets/pages directory(/web is publicly accessible), also the pages are named same as the value that could be selected from the select tag.

Answer 1

You should use other action for loading templates, like this:

/**
 * @Route("/load-template/{templateName}", name="frontend.load-template")
 */
public function loadTemplateAction(Request $request, $templateName)
{
    return $this->render(sprintf("%s:%s", "BundleName", $templateName));
}