undefined custom attribute Jquery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

undefined custom attribute Jquery

Post by publicGenome »

Hi There,
I'm having a jqgrid. With each row has a link for delete.

On click of the delete link, want the custom attribute I've set.
custom attribute is the primary key for row item.

On click of the URL, that particular item will be deleted from the database, and grid.

Example:

Code: Select all

<a href="#" del_val="9" onclick=delete_pipeline()>Delete</a> 

Code: Select all


$val=$(this).data('del_val'); //--data
alert($val); //undefined

$val=$(this).attr('del_val'); //--attr
alert($val); //undefined

I changed del_val in double quotes:

Code: Select all

<a href="#" "del_val"="5" onclick=delete_pipeline()>Delete</a> 
Then again I've undefined.

How do I fix it?
Thanks.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: undefined custom attribute Jquery

Post by requinix »

attr() should have worked.

However you aren't doing this the best way.
1. Use custom data attributes as defined in HTML 5. That mean the "data-" prefix.

Code: Select all

<a href="#" data-del-val="9">
2. Don't use onclick properties. Add the click handler using Javascript (ie, jQuery). You can do it really easily with

Code: Select all

$("a[data-del-val]").click(function() { // click handler for any <a> with a data-del-val attribute
(assuming the <a>s are not being dynamically generated or altered)
3. Get the del-val with .data().

Code: Select all

$val = $(this).data("del-val"); // will look for data-del-val
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: undefined custom attribute Jquery

Post by publicGenome »

requinix wrote:attr() should have worked.

However you aren't doing this the best way.
1. Use custom data attributes as defined in HTML 5. That mean the "data-" prefix.

Code: Select all

<a href="#" data-del-val="9">
2. Don't use onclick properties. Add the click handler using Javascript (ie, jQuery). You can do it really easily with

Code: Select all

$("a[data-del-val]").click(function() { // click handler for any <a> with a data-del-val attribute
(assuming the <a>s are not being dynamically generated or altered)
3. Get the del-val with .data().

Code: Select all

$val = $(this).data("del-val"); // will look for data-del-val

Hi requinix,
Thanks for your reply.

<a> are being added dynamically.
Is there another approach for dynamic ones?
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: undefined custom attribute Jquery

Post by Celauran »

Why would you need another approach?
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: undefined custom attribute Jquery

Post by publicGenome »

I think I got it working:

I added class to the dynamically added anchor tags:

Code: Select all

<a href="#" class="delete_pipe" data-del-val="12" >Delete</a> 

Code: Select all

$('body').on('click','a.delete_pipe',function(){
//do stuff here

var id=$(this).data("del-val"); //works great....

I found about this from:

http://stackoverflow.com/questions/1359 ... l-elements

I hope this would be fine?
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: undefined custom attribute Jquery

Post by publicGenome »

Celauran wrote:Why would you need another approach?
Hi Cel,
Thanks for your reply.

Code: Select all

	$("a[data-del-val]").click(function(){

		alert("yahoo");
		});
This (above) method didn't work if HTML (anchor tags I'm adding) are created post page loading.

Thus, I looked for different method. :)
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: undefined custom attribute Jquery

Post by requinix »

publicGenome wrote:I hope this would be fine?
Yeah, that's the dynamic version: using .on with a parent element and a selector.
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: undefined custom attribute Jquery

Post by publicGenome »

requinix wrote:
publicGenome wrote:I hope this would be fine?
Yeah, that's the dynamic version: using .on with a parent element and a selector.
Thank you. :)
Post Reply