Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts

    .on click syntax error

    Getting a Syntax Error: missing ) after argument list.

    All I want to do is make each item returned from the getJSON call to have a click event. For example. when someone clicks on an item, it might bring up a full list of details about an item. So it seems I have to pass information to the function.
    Code:
    $.getJSON("getproducts.php", function (json) {
        $.each(json.products, function (i, val) {
            var prodinfo = '<li>' + this['productname'] + '</li>';
            var prodcode = val.productcode;
            var sellerid = val.sellerid;
            var ordernum = val.ordernum;
            $('#productsdiv').append($('<li></li>')
                .append($('<p></p>')
                .text(val.productname)
                .hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            })
    
                .on("click", {
                prodcode: prodcode,
                sellerid: sellerid,
                ordernum: ordernum
            }, salesorder);))
    
        })
    });

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Use JSHint or a similar lint tool, it shows you issues with your code.

    Let’s format your code a little better so it’s easier to read:
    PHP Code:
    $('#productsdiv').append(
      $(
    '<li></li>').append(
        $(
    '<p></p>')
          .
    text(val.productname)
          .
    hover(
            function () {$(
    this).addClass('hover');},
            function () {$(
    this).removeClass('hover');}
          )
          .
    on("click", {
            
    prodcodeprodcode,
            
    selleridsellerid,
            
    ordernumordernum
          
    }, salesorder); // end on()
        
    // end append()
      
    // end append() 
    It’s hard to spot but actually quite logical: The semicolon after salesorder) is wrong as it’s inside the append() function.

    However, you could have saved all that hassle if you wrote your code a little more effectively:
    PHP Code:

    $('#productsdiv').append(
      $(
    '<li>').append(
        $(
    '<p>', {
          
    textval.productname,
          
    hover: function() {$(this).toggleClass('hover');},
          
    click: function() {
            
    // do stuff on click
          
    }
        }) 
    // end <p>
      
    // end append()
    // end append() 

  • Users who have thanked VIPStephan for this post:

    wjrasmussen (11-01-2012)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Use JSHint or a similar lint tool, it shows you issues with your code.

    Let’s format your code a little better so it’s easier to read:
    PHP Code:
    $('#productsdiv').append(
      $(
    '<li></li>').append(
        $(
    '<p></p>')
          .
    text(val.productname)
          .
    hover(
            function () {$(
    this).addClass('hover');},
            function () {$(
    this).removeClass('hover');}
          )
          .
    on("click", {
            
    prodcodeprodcode,
            
    selleridsellerid,
            
    ordernumordernum
          
    }, salesorder); // end on()
        
    // end append()
      
    // end append() 
    It’s hard to spot but actually quite logical: The semicolon after salesorder) is wrong as it’s inside the append() function.

    However, you could have saved all that hassle if you wrote your code a little more effectively:
    PHP Code:

    $('#productsdiv').append(
      $(
    '<li>').append(
        $(
    '<p>', {
          
    textval.productname,
          
    hover: function() {$(this).toggleClass('hover');},
          
    click: function() {
            
    // do stuff on click
          
    }
        }) 
    // end <p>
      
    // end append()
    // end append() 
    I should have left the hover off as it isn't part of what I want. I used a beautifier to clean up the code and pasted it. So that's their issue.

    My real problem is with the .on. What doesn't that work?

    Thanks for the jshint. I fixed the issue in the real code!
    Last edited by wjrasmussen; 11-01-2012 at 11:54 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •