Question

I’m new to javascript, I can’t seem to figure out what I am missing. I was experimenting with the ajax functions from jquery. I got stuck on this piece of code. The idea is that when a checkbox is checked, it executes a php script and outputs the status of that script to the “Status” div.

I’ve spent the last hour looking over my code and I can’t see that I missed anything. Of course it probably doesn’t help that my javascript skills are pretty low.

function playback(){
  $.ajax({
    url:"ChangePlayback.php",
    type: "GET",
    if((document).getElementById('LoopPlayback').checked)
    {
      data: "playback=1",
    }
    else
    {
      data: "playback=0",
    }
    success:function(result){
      $("#Status").html(result);
    }
  });
}

I get the following error with firebug:

missing : after property id
[Break On This Error] if((document).getElementById('LoopPlayback').checked) 

Thanks!

Answer 1

You need to refacor a bit; The if needs to be in the assignment, not like a CASE statement in SQL:

...
'data': 'playback=' + (document.getElementById('LoopPlayback').checked ? '1' : '0'),
...

This is an inline ternary statement. Alternatively, if you wanted to keep the structure, you can store the prefs then .extend() them:

var ajaxConfig = {
  'url': 'CHangePlayback.php',
  'type': 'GET',
  'data': 'playback=0',
  'success': function(result){
    $('#status').html(result);
  }
};
if (document.getElementById('LoopPlayback').checked){
  ajaxConfig = $.extend(ajaxConfig,{ 'data': 'playback=1' });
}

$.ajax(ajaxConfig);

And of course the simpler method to this is just making a data variable and placing it within the configuration after:

var data = 'playback=0';
if (document.getElementById('LoopPlayback')){
  data = 'playback=1';
}

$.ajax({
  ...
  'data': data,
  ...
});