Passing arguments to function passed to event click function.

[Mark Spritzler]

I am not sure if this works in JavaScript as I believe the function is created once and not for each???

function linkInListClickEventSetup(idOfTag, controllerPath, templateName) {
    $("#" + idOfTag).click( function(event){
        event.preventDefault();
        var controllerUrl = controllerPath + "/" + idOfTag;
        $.get(controllerPath, function(data) {
            showContent(templateName, data);
        });
    });
}

So the scenario is this, I have a template using Mustache/iCanHaz and that template will create a list of items I return from my server side. Basically loop through the list and show the template per item. I also want to attach a click event to each item. So I created a div in my template that will have the id of the tag equal the id of my item (PK) this is the idOfTag parameter. The controllerPath is the URL I want to call when the user clicks on that item area. The template name is the template that I will use to display the details of the one item selected.

I also wrote this so that I can reuse the exact same for all different types I will have Items, Events, and Users.

So my question is the click event of each item have access to the parameters passed in. Note that the click event function would be called well after the setup calls linkInListClickEventSetup.

I do have other options, but I prefer this one. Alternative option #1, put javascript in the template, Option #2 use an per item, but sometimes I have an already inside the template for something else. Like a user might have a TwitterAccountName and if you click on it, it will take you to their twitter account page.

Actually option #2 wouldn't work as I would still need to assign a click event to that since my app has all requests going through jquery .get and .post method with JSON

Thanks

Mark

[Bear Bibeault]

What part of it isn't working for you?

[Mark Spritzler]

At this point, I don't even fire off the event if I click the div area on my page. But when I step through the debugger, it looks like the values I need for connecting the click are all correct and working.

So I might pass ("29". "/events", "displayEvent")

and the 29 is the id of the div. "/events" plus the id will be the get URL I use, and "displayEvent" is the ICanHaz/Mustache template name.

When I click on the event on my page, nothing happens, not even in the debug/other consoles for debugging. This includes network calls, errors, etc. Not using Firebug, but Safari's Web Inspector.

Thanks

Mark

[Mark Spritzler]

I could just create the inner function as a standalone function. Then in my template for the div add an onClick attribute calling that standalone function. I'll try that.

Mark

[Mark Spritzler]

I could also store the values as hidden fields in each item, then the click function doesn't have to get values from the outside, inside the function I can get the values from inside the div.

Does every element have a getElementById function. So I don't have to go from document. Well, nevermind you can only have one tag with one id per document anyway. Maybe I meant something else. I guess I could get those inside values in the function with the event object. That stores what element it is acting on, I believe.

Mark

[Bear Bibeault]

In jQuery event handlers, the target is available as the function context.

[Mark Spritzler]

OK, I got it to work with the onclick attribute of my div

<div id="{{nodeId}}" class="clickList" onclick="clickItemInTemplate('/events/{{nodeId}}', 'eventDisplay')">

And my function is much smaller too

function clickItemInTemplate(controllerPath, templateName) {
    $.get(controllerPath, function(data) {
        showContent(templateName, data);
    });
}

Thanks

Mark

[Eric Pascarello]

in HTML4 ids can not start with numbers, HTML5 they can.

There is no need to add the onclick for every element by id, just use a common class and read the ids

    $(".someCommonClass").on("click", function(event){  
        event.preventDefault();
        var id = $(this).prop("id");  
        var controllerUrl = controllerPath + "/" + id;  
        $.get(controllerPath, function(data) {  
            showContent(templateName, data);  //<-- somehow need to define these variables
        });  
    });

Eric

[Gregg Bolinger]

Mixing behavior and markup is so anti-jQuery and I agree with Eric. I'd go one step further and use the data attribute...

<div data-id="{{nodeId}}" data-template-name="someTemplateName" ... class="clickList"></div>

$(".clickList").on(function(e) {
   e.preventDefault();
   var id = $(this).data("id");
   var templateName = $(this).data("template-name");
   $.get("/events/" + id, function(data) {
       showContent(templateName, data);    
   });
});

[Mark Spritzler]

I am using Html5 only.

Thanks Eric. However, with your example I am at the same question I started this thread with, how do I pass in the value for templateName, in my original code in the first post, the main function takes templateName as a parameter and somehow its value needs to get into the function inside the function inside the function. I thought I understood the scope of the value lasting that it would be there, but that didn't seem to work.

Again, I was able to get the onclick to work, but still can't seem to get it with on() or click() or live() or delegate() and get that templateName passed in without doing something like a hidden tag in the html.

But I also agree that I do not really want to use onclick.

Mark

[Gregg Bolinger]

See the edits to my last post. Does that help?

[Bear Bibeault]

Gregg is definitely leading you down the right path. That's the approach I'd be taking.

[Mark Spritzler]

Thanks Eric and Gregg. Yeah I was wondering if there was a way to "create" your own attributes in tags to add data of your own.

I was taking your approach, with a slight difference in terms of the selector. I already had a class in the div tags to use. So I just changed my old code to use it instead and matched Eric's solution. For templateName in this case I hard coded it to see if it would work. Since the main click before was only to display a list of events, so the template name would always be the same.

So to describe the process and what I have

index.jsp page has menu option "Events" here is the click function for it

$('.events').click(function(event) {
        event.preventDefault();
        showEventsPage()
    });

here is the showEventsPage function which makes a REST API call to my server to get a list of Events.

function showEventsPage() {
    var controllerPath = "/events";
    //clickItemToDisplayData(controllerPath, "clickableListByType");
    $.get(controllerPath, function(data) {
        showContent("clickableListByType", data);
        $(".clickList").on("click", function(event){
            event.preventDefault();
            var id = $(this).prop("id");
            var controllerUrl = controllerPath + "/" + id;
            $.get(controllerUrl, function(data) {
                showContent("clickableListByType", data);
            });
        });
    });
}

Here is where I put the code you suggested. My main issue in the beginning wasn't so much my code as I put it in the wrong place so the attachment of the click functions was happening before the List of Events and templating system write the html for those events. So there was nothing to connect them too. Now that I put that code inside the .get(), now it hooks them up and works fine.

After I do this for one more list like Users, then I'll refactor to make it more reusable for any type of lists, and that probably will lead me to the data-id this.data that Gregg posted.

Thanks again for your help

Mark

[Bear Bibeault]

In fact, it you end up using a custom attribute in every clickable elements such as data-id, you can leverage that to apply the event handlers rather than assigning a new class for the purpose:

$('[data-id]').click( ... );

[Gregg Bolinger]

Something else you might consider, just for keeping things a little cleaner is to use the delegate version of the on function so you don't have to have it inside your $.get callback.

function showEventsPage() {  
    var controllerPath = "/events";  
    //clickItemToDisplayData(controllerPath, "clickableListByType");  
    $.get(controllerPath, function(data) {  
        showContent("clickableListByType", data);  
    });  
}  

$("some-selector-that-contains-your-clickList-div-elements").on("click", ".clickList", function(event){  
       event.preventDefault();  
       var id = $(this).prop("id");  
       var controllerUrl = controllerPath + "/" + id;  
       $.get(controllerUrl, function(data) {  
           showContent("clickableListByType", data);  
       });  
});  

Basically, that is like the old live() or delegate() function from previous jQuery versions. But I think this approach is more about personal preference than any real gain.

[Mark Spritzler]

For that delegate way of doing it. When will it run that or should I say add it to my individual items?

The lists won't show up till the user asks for them. So never on page load. Those lists show up dynamically from $.get() calls.

Also in your example where do I get the controllerPath from? It has to be generic enough because each list will have a different controllerPath for the items. They will be in the form of events/{id} itemsNeeded/{id}, users/{id} for the controllerUrl and also the String that gets passed to showContent("{templateName", data), since each type events/items/uses have a different Template name for the details page? The lists themselves will be in a template called "clickableListByType". I guess for that part I could do what I did in the list template where I have a conditional in there to determine from the data if it has a certain field it is a certain type. And do that for the partial template for the detail pages.

This is what I did in the clickableListByType/listPartialByType. the list uses the listPartialByType partial template, which brings in the partial template of either userPartial, eventPartial, or userPartial, user if there is a firstName property, eventPartial if there is a title property, and itemPartial if there is a quantity property.

<script id="listPartialByType" class="partial" type="text/html">
    <p class="listOfDomains">{{ type }}</p>
    <ul>{{#domainObjects}}
        <li class="radius15InfoBubble">
            {{#firstName}}
                {{>userPartial}}
            {{/firstName}}
            {{#title}}
                {{>eventPartial}}
            {{/title}}
            {{#quantity}}
                {{>itemPartial}}
            {{/quantity}}
        </li>{{/domainObjects}}
        {{^domainObjects}}
        <li>
            You have no {{type}}. Go get some!
        </li>{{/domainObjects}}
    </ul>
</script>

<script id="clickableListByType" class="partial" type="text/html">
    <div id="{{ divId }}">
        {{>listPartialByType}}
    </div>
</script>

Thanks again you guys.

Mark

p.s. Now I will have to add Gregg to my aboutus page. ;)

[Mark Spritzler]

Bear Bibeault wrote:In jQuery event handlers, the target is available as the function context.

How again? What would be my parameter. Is that what I would get with function(e) e would be the target? or via this? or via self?

Thanks

Mark

[Bear Bibeault]

e is the jQuery.Event instance, this (function context) is the target.

[Mark Spritzler]

Bear Bibeault wrote:e is the jQuery.Event instance, this (function context) is the target.

Thanks

Mark

[Mark Spritzler]

This is confusing me.

I have come across another situation where I need to have code run after something else has completed, but don't want to put it in the middle of a function inside a function inside a function, in order for the code to wait till the other code has finished.

Gregg Bolinger wrote:Something else you might consider, just for keeping things a little cleaner is to use the delegate version of the on function so you don't have to have it inside your $.get callback.

function showEventsPage() {  
    var controllerPath = "/events";  
    //clickItemToDisplayData(controllerPath, "clickableListByType");  
    $.get(controllerPath, function(data) {  
        showContent("clickableListByType", data);  
    });  
}  

$("some-selector-that-contains-your-clickList-div-elements").on("click", ".clickList", function(event){  
       event.preventDefault();  
       var id = $(this).prop("id");  
       var controllerUrl = controllerPath + "/" + id;  
       $.get(controllerUrl, function(data) {  
           showContent("clickableListByType", data);  
       });  
});  

Basically, that is like the old live() or delegate() function from previous jQuery versions. But I think this approach is more about personal preference than any real gain.

Thanks

Mark

[Eric Pascarello]

You could always trigger an event. Look at the API for trigger() and bind something to listen for the event.

[Mark Spritzler]

Eric Pascarello wrote:You could always trigger an event. Look at the API for trigger() and bind something to listen for the event.

That sounds promising.

Thanks

Mark

[Mark Spritzler]

Hmm. CallBacks looks like it could work to so I fire() the callbacks in the callback function of the loading the contents.

Or the jQUery deferred object.

Both look like objects that I can call inside the callback function of the .get(). So before I call my function that then calls .get(), I can register a few other .get() calls that have to occur after the first one. Since before the first .get() call the <section> that the subsequent .get() calls call will not even exist in my page.

The first get is getting my User information but will not contain any collections populated. I then use a Template to show the User details, inside that template are 7 <section> tags for the collections, so I go 7 .get() to get each associated collection and use another template to list them one by one into the 7 different <section> tags. So if Callback or Deferred doesn't work. Do you think I could get a $.ready() in my template and it run. The template is only a partial part of the page, which was already loaded in the first request to get to my site. Each request after that only returns json and no new pages to load.

Thanks

Mark

[Mark Spritzler]

So I got Gregg's way working perfectly and think it is the best approach.

Thanks

Mark