Passing parameters to jQuery function via link

Question

I have a jQuery function:

$(function(){ 
function InitDialog(c,b){
    /* some code */     
}

$('a[name=dialog]').click(function(e)                                                 {         
            InitDialog(caption, bodyText);        
    fadeInCommon(e,this);
});
});

And also I have a link defined in html code like below:

<ul>
<li><a href="#dialog" name="someInformation" }">something</a></li>
</ul>

My question is how can I pass the parameters (caption, bodyText) to Init() function via link? I've heard about some method like below:

<li><a href="#dialog" name="someInformation" onClick="return {height: 100, width:200};"}">something</a></li>

But I don't understand how can I get and parse it? Thanks

Jibi Abraham · Accepted Answer · 2012-03-21 05:11:26Z

7

Since you are using jquery, I would recommend that you do the following to store data on your element

<a href="#dialog" name="some_name" data-params="{'param1':'someValue', 'param2':'someOtherValue'}">Link Text</a>

Then in your click function, you can access it as shown below

$('a#dialog').click(function(){
    var me = $(this), data = me.data('params');
    //console.log(data);
});

Edit - Fiddle added

Check the fiddle to see a working sample

edited Mar 21, 2012 at 5:11

answered Mar 21, 2012 at 4:57

Jibi Abraham

4,6962 gold badges33 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faridul Khan Over a year ago

Fiddle link is working fine

widyakumara · Accepted Answer · 2012-03-21 05:00:49Z

2

using data-* attribute, you can:

<a name='dialog'
 data-caption='this is the caption'
 data-bodytext='this is the body'>klik</a>

and the javascript:

$(function() {
    function InitDialog(c, b){
        alert('the caption: ' + c);
        alert('the body: ' + b);
        }

    $('a[name=dialog]').click(function(e) {
        caption = $(this).data('caption'); // gets data-caption attribute value
        bodyText = $(this).data('bodytext'); // gets the data-bodytext attribute value
        InitDialog(caption, bodyText);
        fadeInCommon(e,this);
        });
    });

tho instead of using name as the selector, i'd recommend class instead

answered Mar 21, 2012 at 5:00

widyakumara

1,2522 gold badges11 silver badges14 bronze badges

Comments

neshkeev · Accepted Answer · 2015-04-08 11:13:54Z

1

So first, I think you want to say $('a[href="#dialog"]') to get the a tags, then in the click function, $(this).attr("name") will give you the some information, which you could store a json string...

<a href="#dialog" name="{caption:'XXXX', bodyText:'XXXX'}">My Text</a>

$('a[href="#dialog"]').click(function() {
     var data = JSON.parse($(this).attr("name"));
     InitDialog(data.caption, data.bodyText);
});

But, I don't think that's the right way of going about what you're trying to do, would you be better to create the dialog in a div lower down the page, hide it, and only show it when you click the link? Because the term 'bodyText' implies it's going to be big...

Or just:

 <a href="javascript:InitDialog('Caption', 'BodyText'); fadeInCommon(e,this);">My Link</a>

edited Apr 8, 2015 at 11:13

neshkeev

6,4863 gold badges32 silver badges49 bronze badges

answered Mar 21, 2012 at 3:41

jamie-wilson

1,92521 silver badges38 bronze badges

2 Comments

Nolesh Over a year ago

name="{'caption':'XXXX', 'bodyText':'XXXX'}" - you forgot quotes! Then I should use replaceAll function to replace ' to " After that it will work!

jamie-wilson Over a year ago

Oh sorry I did too, I was thinking about it like a JS object and not a JSON string. Single quotes should work though? That or say name="{\"caption\":\"....

Collectives™ on Stack Overflow

Passing parameters to jQuery function via link

3 Answers 3

Edit - Fiddle added

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit - Fiddle added

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related