I have a problem here and if you guys could help me I'll be glad for it. So I want to hide a button "changeOrderUp" when it's in the first row and want the same with "changeOrderDown" button, when it founds in the last row. But FireBug returns this error: "SyntaxError: expected expression, got keyword 'if'", and I couldn't identify the reason. Please, help me!

Here is my js code:

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){
    $('<tr><td class="ordem-pergunta-'+ordem+'">'+ordem+'</td> \
    <td class="ds-pergunta-'+ordem+'">'+data.var_pergunta[ordem - 1].ds_pergunta+'</td> \
    <td class="cd-pergunta-'+ordem+' hide">'+data.var_pergunta[ordem - 1].cd_pergunta+'</td> \
    <td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary '+if(ordem == 1){ document.write('hide');}+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+if(ordem == (data.var_pergunta).length)){ document.write('hide');}+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-ordem-pergunta');
                        }

I have a problem here and if you guys could help me I'll be glad for it. So I want to hide a button "changeOrderUp" when it's in the first row and want the same with "changeOrderDown" button, when it founds in the last row. But FireBug returns this error: "SyntaxError: expected expression, got keyword 'if'", and I couldn't identify the reason. Please, help me!

Here is my js code:

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){
    $('<tr><td class="ordem-pergunta-'+ordem+'">'+ordem+'</td> \
    <td class="ds-pergunta-'+ordem+'">'+data.var_pergunta[ordem - 1].ds_pergunta+'</td> \
    <td class="cd-pergunta-'+ordem+' hide">'+data.var_pergunta[ordem - 1].cd_pergunta+'</td> \
    <td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary '+if(ordem == 1){ document.write('hide');}+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+if(ordem == (data.var_pergunta).length)){ document.write('hide');}+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-ordem-pergunta');
                        }

• javascript
• jquery

• Formatting your code so that it is easier for people to see where the if statement is would help you get some answers. – LenW Commented Aug 24, 2015 at 14:53
• 1 Sorry LenW, It's my first question here, I tried to post my code as clear I could, but I failed haha! In my following questions I'll be better. Thx for your ment. – Bruno Oyama Commented Aug 24, 2015 at 15:00
• You should try writing you code in html and hide it and then just use jQuery in the background to pull it in as a template and then un -hide it – johnny 5 Commented Aug 24, 2015 at 15:07
• @johnny5 I do this when I have to change the orders during the edit view. But this code is when I'm inserting a new one, so I'm using ajax to send it withou refresh the page. – Bruno Oyama Commented Aug 24, 2015 at 15:20
• Yeah that's fine. What I'm saying is write the html on the page as hidden. When your done with ajax clone the hidden html, remove the hidden class and the id you use to get the template. It will make your code more easy to read and maintain – johnny 5 Commented Aug 24, 2015 at 15:22

2 Answers 2

Javascript does not allow inline if conditionals. If you need inline conditions, you should use the ternary operator, which behaves very much like an if block.

On top of that, you shouldn't be using document.write. It won't return a string for concatenation, but will erase the document and write just that string to the page.

You should replace each instance of

if(ordem == 1){ document.write('hide');}

with something like

(ordem === 1 ? 'hide' : '')

This will:

1. Compare ordem to 1, strictly (=== is more strict than ==)
2. Return 'hide' if the parison was truthy
3. Return an empty string otherwise

You can also simplify your code by placing a + at the end of each line, rather than escaping the newline. Using an escape like that is somewhat more difficult to read.

All together, I would refactor that snippet to be:

for (var ordem = data.var_pergunta.length; ordem >= 1; --ordem){
  $('<tr><td class="ordem-pergunta-' + ordem + '">' + ordem + '</td>' +
    '<td class="ds-pergunta-'+ordem+'">' +
      data.var_pergunta[ordem - 1].ds_pergunta +
    '</td>' +
    '<td class="cd-pergunta-'+ordem+' hide">' +
      data.var_pergunta[ordem - 1].cd_pergunta +
    '</td>' +
    '<td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary ' +
      (ordem === 1 ? 'hide' : '') +
    '" type="button"><i class="fa fa-angle-up"></i></button>' +
    '<button id="'+ordem+'" class="btn-change-order-down btn btn-info ' +
      (ordem === data.var_pergunta.length ? 'hide' : '') +
    '" type="button"><i class="fa fa-angle-down"></i></button>' +
    '</td></tr>').insertAfter('.tr-ordem-pergunta');
}

With a string that long, you may be better off looking into using a real templating library like Handlebars.js. Written as a template, your string could bee:

<tr>
  <td class="ordem-pergunta-{{ordem}}">{{ordem}}</td>
  <td class="ds-pergunta-{{ordem}}">{{prev_ordem.ds_pergunta}}</td>
  <td class="cd-pergunta-{{ordem}} hide">{{prev_ordem.cd_pergunta}}</td>
  <td>
    <button id="{{ordem}}" class="btn-change-order-up btn btn-primary {{#if first_ordem}}hide{{/if}}" type="button">
      <i class="fa fa-angle-up"></i>
    </button>
    <button id="{{ordem}}" class="btn-change-order-down btn btn-info {{#if last_ordem}}hide{{/if}}" type="button">
      <i class="fa fa-angle-down"></i>
    </button>
  </td>
</tr>

and you would render it as:

template({
  ordem: ordem,
  prev_ordem: data.var_pergunta[ordem - 1]
  first_ordem: ordem === 1,
  last_ordem: order === data.var_pergunta.length
});

try this. store your condition value in a variable and print it.

for(var ordem = (data.var_pergunta).length; ordem >= 1 ; ordem--){
if(ordem == 1){ var val = document.write('hide'); }
if(ordem == (data.var_pergunta).length)){ var another = document.write('hide');}
$('<tr><td class="ordem-pergunta-'+ordem+'">'+ordem+'</td> \
<td class="ds-pergunta-'+ordem+'">'+data.var_pergunta[ordem - 1].ds_pergunta+'</td> \
<td class="cd-pergunta-'+ordem+' hide">'+data.var_pergunta[ordem - 1].cd_pergunta+'</td> \
<td><button id="'+ordem+'" class="btn-change-order-up btn btn-primary '+val+'" type="button"><i class="fa fa-angle-up"></i></button> \
    <button id="'+ordem+'" class="btn-change-order-down btn btn-info '+another+'" type="button"><i class="fa fa-angle-down"></i></button> \
    </td></tr>').insertAfter('.tr-ordem-pergunta');
                        }