Nette - {link!} macro can't handle already existing GET params in URL

Question

I Use Nette 2 in my project and I also use .latte template system with AJAX.

Now I have jquery function (in template) that should generate GET request on the same destination but it should add some GET parameters after it.

This destination is initially rendered using one GET parameter, then some actions are made and during some of them AJAX loads some information from the same destination (just adds a couple of GET parameters).

Now I generate AJAX URL using .latte {link!} macro (exclamation mark stands for signal). This is now able to generate new URL with GET params appended to original one. But append is badly parsed, because there is &amp%3B in the URL instead of just &.

I have this code in my template:

{block content}
<h1 n:block=title>New Rule</h1>

{snippet rulesForm}
    {form newRuleForm}
        {$form}
        <script type="text/javascript">
            {foreach $form['rule']->containers as $i => $rule}
                {include #jsCallback, id => $i, input => $rule['table']->name, link => tableChange}
                {include #jsCallback, id => $i, input => $rule['column']->name, link => tableChange}
            {/foreach}
        </script>
    {/form}
{/snippet}
{/block}

{define #jsCallback}
$('#{$control["newRuleForm"]['rule'][$id][$input]->htmlId}').on('change', function(){
    alert('{$link}');
    $.nette.ajax({
        type: 'GET',
        url: '{link {$link}!}',
        data: {
            'value': $(this).val(),
        }
    });
});
{/define}

How can I fix this problem so I can generate link which appends GET parameters correctly?

Thanks.

Answer 1

Best approach is to avoid generating inline Javascript. You can mark all those form controls by CSS class (eg. special-input), then you don't have to generate Javascript code in Latte iteration.

{snippet rulesForm}
    <div data-link-table="{link tableChange!}"></div>
    ...
{/snippet}

$('.special-input').on('change', function () {
    $.nette.ajax({
        type: 'GET',
        url: $('[data-link-table]').data('linkTable'),
        data: {
            value: $(this).val()
        }
    });
});