nathan hayfield nathan hayfield - 4 years ago 132
Javascript Question

Data Attribute in Frame returning undefined from JQuery

The html looks like this:

<ul class="categoryitems">
<li><a data-url="../po/browse_po.php" href="welcome.php" target="main">PURCHASE ORDERS</a></li>
<li><a data-url="../po/po_email_config.php" href="welcome.php" target="main">PO EMAILS</a></li>
</ul>


Ignore the hrefs they are not relevant. I plan to prevent default on them.

What is relevent is the jquery failing:

$('a').click(function()
{
alert($(this).parent().html()); //shows the a tag with the data-url attribute
//$(this).data('url',"..someurl.com");
alert($(this).data('url')); //returns undefined; when the previous line is uncommented works
alert($(this).attr('data-url')); //this works
});


If it makes a difference the click function is wrapped in this:

$("#wndNavbar").ready( function() {

});


Because its in a frame:

<frameset cols="<?=$gl_navbar_width?>,*" frameborder="0" framespacing="5" border="0">
<frame id="wndNavbar" name="wndNavbar" src="nav_bar.php" scrolling="auto" marginheight="0" noresize>
<frame name="main" src="welcome.php" scrolling="auto" marginheight="0" noresize>
</frameset>

Answer Source

That's not how you read the data-url. this is the right way:

alert($(this).data('url'));

or

alert($(this).attr('data-url'));

Update: Since the above doesn't seem to fix it for you, have you tried to use

$(document).ready(function() {

});

or

$("#wndNavbar").live(function() {

});

instead of

$("#wndNavbar").ready( function() { 

});

UPDATE 2: You seem to be using a frame, NOT an iframe. ready does not work on frames, so you need to use load:

$("#wndNavbar").load( function() { 

});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download