html jquery.load, dynamic file names

Question

i got a menu made with li / a, and i got jquery.load working with this. when i click on a link it loads without refreshing the page the content in a div. but what is the best way to add the filename that has to be loaded in an attribute?

this will load the page with the original link: 127.0.0.1/filetobeloaded.html for example. <a href="filetobeloaded.html">test</a>

but if i do <a href="#" rel="filetobeloaded.html">test</a> i think this is the wrong attribute =/.

so what attribute should i use for this?

Greets, Stefan.

binarious · Accepted Answer · 2012-04-25 12:18:58Z

1

Use the href attribute, that's what it is for. In the .click function you just do a return false. That will prevent the browser from redirecting to that page.

<a href="filetoload.html" class="ajaxLinks">MyLink</a>

$('.ajaxLinks').click(function() {
    // do something with this.href       

    return false;
});

Using the href attribute gives you the option to let it work without javascript.

edited Apr 25, 2012 at 12:18

answered Apr 25, 2012 at 12:13

binarious

4,58828 silver badges35 bronze badges

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

1 Comment

binarious Over a year ago

an explanation on the downvote would be nice. we're all here to learn something ;).

Shyju · Accepted Answer · 2012-04-25 12:21:48Z

1

Use href attribute. So that it will work for your javascript disabled browsers too.

<a href="yourpage.html" class="ajaxLink">Link 1</a>

and in Script

$(function(){

 $("a.ajaxLink").click(function(e){
    e.preventDefault() //to prevent the normal behaviour of a tag
    $("#yourContentdiv").load($(this).attr("href"));
 });

});

answered Apr 25, 2012 at 12:21

Shyju

220k106 gold badges421 silver badges499 bronze badges

Comments

nanobar · Accepted Answer · 2012-04-25 12:15:17Z

0

If you are using it is fine to use href or rel, in another element you would use data- like data-load="url"

on a click you just need to supress the event, so:

$('a').click(function(ev) {
  // load stuff here using $(this).attr('href')
  ev.preventDefault();
  return false;
}

answered Apr 25, 2012 at 12:15

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Collectives™ on Stack Overflow

html jquery.load, dynamic file names

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related