How to insert defined block to javascript?

dnd

Hello everybody, I have this code in latte, where I repeatedly insert ROW (defined block) to table.

{block content}
{form klientForm}
<table id="tableZapasy">
	<tr><td>Number</td><td>Match</td><td>S</td><td>R</td><td>M</td></tr>
{for $i=1;$i<=5;$i++}
	<tr id="addRow-{$i}" data-idNum="{$i}">
	{include row}
	</tr>
{/for}
</table>
{/form}
<span id="tableZapasyAddRow">ADD NEW ROW</span>
{/block}

{define row}
		<td><input type="text" name="number[]" value="" /></td>
		<td><input type="text" name="typ[]" value="" readonly="readonly" /><input type="hidden" name="typId[]" value="" /></td>
		<td><input type="text" name="sektor[]" value=""/></td>
		<td><input type="text" name="rada[]" value="" /></td>
		<td><input type="text" name="misto[]" value="" /></td>
		<td><span class="delRow">del</span></td>
{/define}

Everythink works fine here. Now i need to add a new line to the table with this script:

<script>
	$('#tableZapasyAddRow').click(function(){
		$('#tableZapasy').append({include row});
	});
</script>

Here is my problem, firebug console shows me this:

SyntaxError: expected expression, got '<'
$('#tableZapasy').append(		<td><input type="text" name="number[]" value...

I tried to add quotations, but still wrong:

$('#tableZapasy').append('{include row}');

SyntaxError: unterminated string literal
$('#tableZapasy').append('		<td><input type="text" name="number[]" valu...

Please, is there any way how to correctly insert defined block as string to javascript (jquery) function's String parameter in latte?

Thanks for any ideas.

===========================

Hi, two hours later there is an update. If I define table row in one line (literaly no breaks/enters), everythink works fine.

{define row}<td><input type="text" name="cislo_vstupenky[]" value="" /></td><td><input type="text" name="typ[]" value="" readonly="readonly" /><input type="hidden" name="permVstup[]" value="" /></td><td><input type="text" name="sektor[]" value=""/></td><td><input type="text" name="rada[]" value="" /></td><td><input type="text" name="misto[]" value="" /></td><td><span class="delRow">del</span></td>{/define}
$('#tableZapasy').append('<tr>' + '{include row}' + '</tr>');// I forgot use <tr> erlier, but it change nothing here

Still, is there a way how to use “entered” template block?

Last edited by dnd (2015-07-28 11:24)

spagr

Hi,
let's try to use {capture $var} in this case, instead of {define}, Context-Aware Escaping can solve JavaScript variables problem ( but I'm not sure if it can solve the JavaScript multi-line string too )

{capture $row}
 <tr>
        <td><input type="text" name="number[]" value="" /></td>
        <td><input type="text" name="typ[]" value="" readonly="readonly" /><input type="hidden" name="typId[]" value="" /></td>
        <td><input type="text" name="sektor[]" value=""/></td>
        <td><input type="text" name="rada[]" value="" /></td>
        <td><input type="text" name="misto[]" value="" /></td>
        <td><span class="delRow">del</span></td>
 </tr>
{/capture}

<script>
    $('#tableZapasyAddRow').click(function(){
        $('#tableZapasy').append({$row});
    });
</script>

Last edited by spagr (2015-07-28 15:32)