Jquery Ajax simple application: missing ) after argument list

Question

I'm pulling my hair out here. I keep getting "missing ) after argument list" on my final line of code. I'm thinking it has something to do with my concatenation but I can't figure it out. It's jQuery with jQuery UI: a simple slider. User increases the amount on the slider and the available flights at that amount are displayed. Clicking on the available flight shows the duration:

  $(document.ready(function(){
  $.ajax({
    url: 'http://localhost:8888/all_work_july_6/javascript_start_here/flights.php',
    dataType: "json",
    success: function(data){
        var counter = 0;
        $.each(data, function(key, value){
            $("#flightList").append('<li ' + 'id="flight' + counter + '"' + ' class="flightLi">' + value['trip'] + '<span class="hiddenPrice">' + value['price'] + '</span></li>');

        counter++;
        });
    }


});

$("#priceSlider").slider({
orientation: "vertical",
min: 200,
max: 1650,
step: 200,
value: 1650,
slide: function(event, uiElement){
    $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
    var numRegex = /(\d+)(\d{3})/;
    var inputNum = uiElement.value;
    var strNum = inputNum.toString();
    strNum = strNum.replace(numRegex, '$1' + ',' + '$2');
    $("#spanPrice").text(strNum);
    $("#inputPrice").val(uiElement.value);
    $(".hiddenPrice").each(function(){
        if($(this).text() > inputNum){
            $(this).parent().addClass("hidden");
        }
        else if($(this).text() < inputNum){
            $(this).parent().removeClass("hidden");
        }
    });
}

});

$(".flightLi").on('click', function(){
$("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
var myId = $(this).attr("id");
$.ajax({
    url: 'http://localhost:8888/all_work_july_6/javascript_start_here/details.php',
    dataType: "json",
    data: { "flightID": myId },
    type: "POST",
    success: function(data) {
        $("#flightDetails").removeClass("hidden").append('<ul>' + '<li class="detailsLi">Trip Duration: ' + data['duration'] + '</li>' + '</ul>');

        }

    });
});
});

Answer 1

Here is a live demo

$(document).ready(function() {
// mocked response from flights.php
var data = {
  json: $.toJSON({0: {trip: "Hawaii", price: "1000"} }),
  delay: 3
}

// AJAX post to "fllights.php" and process the response
$.ajax({
  url:"/echo/json/", // JSfiddle Echo API - http://doc.jsfiddle.net/use/echo.html
  data:data,
  type:"POST",
  success:function(data){
    var counter = 0;
    $.each(data, function(key, value){
      var li = "<li id='flight"+counter+"'"+" class='flightLi'>"+value['trip']+"<span class='hiddenPrice'>"+value['price']+"</span></li>";
      $('#flightList').append(li);
      addListener();    // add the onClick listener to the newly created <li> item. 
      counter++;            // You could also pass in the id attribute to this method 
      });
    }
});

// Slider
$("#priceSlider").slider({
  orientation: "vertical",
  min: 200,
  max: 1650,
  step: 200,
  value: 1650,
  slide: function(event, uiElement){
    $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
    var numRegex = /(\d+)(\d{3})/;
    var inputNum = uiElement.value;
    var strNum = inputNum.toString();
    strNum = strNum.replace(numRegex, '$1' + ',' + '$2');
    $("#spanPrice").text(strNum);
    $("#inputPrice").val(uiElement.value);
    $(".hiddenPrice").each(function(){
      if($(this).text() > inputNum){
        $(this).parent().addClass("hidden");
      }
      else if($(this).text() < inputNum){
        $(this).parent().removeClass("hidden");
      }
    });
  }
});

// moked response from details.php for "flightID": myId
data = {
  json: $.toJSON({duration: '1000 hrs'}),
  delay: 1
}


// wraper method to only add the onClick listner after the new <li> is inserted to the DOM
function addListener(){
  // List item onClick AJAX
  $(".flightLi").one( "click", function() { // Using the .one method to only add the onClick event listener once
    $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
    console.log("Flight id: "+$(this).attr("id"));
    $.ajax({
      url:"/echo/json/",
      dataType: "json",
      data: data,
      type: "POST",
      success: function(data) {
        var li = "<ul><li class='detailsLi'>Trip Duration: "+data['duration']+"</li></ul>";
        $("#flightDetails").removeClass("hidden").append(li);
      }
    });
  });
}

// Origional code 
// This doesn't work due to the fact that the <li> item 
// in the flightList list is inserted to the the DOM after the intital load
// you can also bind the event at the document level see this post http://bit.ly/1S0H2q0

// $(".flightLi").on('click', function(){
//   $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden");
//   console.log("Flight id: "+$(this).attr("id"));
//   $.ajax({
//     url:"/echo/json/",
//     dataType: "json",
//     data: data,
//     type: "POST",
//     success: function(data) {
//       var li = "<ul><li class='detailsLi'>Trip Duration: "+data['duration']+"</li></ul>";
//       $("#flightDetails").removeClass("hidden").append(li);
//     }
//   });
// });

});

A few things I noticed while going through your code:

• The $("#flightDetails").html("<p>Flight Details</p>").addClass("hidden"); line is actually removing the Trip Duration: content because it completely replaces the html inside of the #flightDetails element. - This might be intentional
• Adding the onClick event listener to the newly created <li> elements must be done at the document level, or from inside of the call back that actually injects them into the DOM. I chose to implement the call back method. See this post for adding the listener at the document level
• Adding the event listener from inside of the call back method opens up the issue of possibly adding the event listener to the same element multiple times. This can result in an onClick event firing multiple times per one trigger. Again you must either add the event at the document level, or use the one method to only add the event once. See the JQuery.one documentation

Answer 2

 Missing )in $(document

Replace $(document to $(document)

Answer 3

The problem was in the first line, Missing ) in $(document

//$(document.ready(function(){ You had this. ) is missing

$(document).ready(function(){