0

I would really appreicate any help on this matter. Here is the code that I have so far:

    $('.Ajax_links').click(function() {
  window.location.hash = $(this).attr("href");
  var href = $(this).attr('href');  
  $('#contaniner_div').load(href);

  $('data-target').click(function() {
  var data-target = $(this).attr('data-target');
  $('#contaniner_Div_Nav').load(this.data-target);
  }

 return false;
});

I would like that messed up code above to load contents into these two divs below when the link with the class set to (class="Ajax_links") is clicked:

<div id="contaniner_Div"></div>
<div id="contaniner_Div_Nav"></div>

This is how the link looks: 

<a href="files/content.html" class="Ajax_links" data-target="files/navigation.html">

The first method that I was working with with the rel instead of the data-target method loaded content into these two divs when the link is clicked but the rel part of that content was not included into the hash. Making it impossible for me to bookmark the rel part of link or if I wanted to go back/forward by using the browsers buttons. (I'm using the ben Alman plugin). So now I am searching for a different method, but my code doesn't work. Could someone please help me?

spencer
  • 25
  • 7
  • 2
    What's `$(this)` *supposed* to be, when it runs? – David Thomas Jul 07 '12 at 17:26
  • An html page if that's what you mean? One that is set to load within rel attr like this: rel="loadthispage.html" – spencer Jul 07 '12 at 17:28
  • Well, maybe there's a little mess here about [a rel](http://www.w3schools.com/TAGS/att_a_rel.asp) attribute and jQuery 'this'. And page loading. – acondolu Jul 07 '12 at 17:36
  • What mess I am not as educated on the topic as you guys could you please be a bit clearer. And I've tried many many different edits of that code but unfortunately none works. – spencer Jul 07 '12 at 17:37

2 Answers2

1

I think you are going to need a plugin for back button and history support. This one is generally considered quite good:

http://benalman.com/projects/jquery-bbq-plugin/

Hogan
  • 69,564
  • 10
  • 76
  • 117
  • Thanks but I already have a pluging and my back and forward buttons are fully functional. It is the rel attr that won't obey and I just don't know why. At first it was giving the problem of disappearing once loaded but I fixed that, but this other issue I am trying to fix but to no avail. – spencer Jul 07 '12 at 17:40
  • Just wondering is this a normal issue once the other part of the link (href) works and obey when I try to click the back/forward button or bookmark a page shouldn't the rel work as well? – spencer Jul 07 '12 at 17:44
  • Are you talking about URL content after the `#`? If so that would be browser dependent -- it is not part of the standard to save that in a history. – Hogan Jul 07 '12 at 17:46
  • Well in the address bar it shows as: http://sitedommain/#undefined but in the actual writing of the rel attr there is no pound sign. Only in the address bar. – spencer Jul 07 '12 at 17:48
  • Exactly -- BBQ solves this problem. It is a good plugin. Take a look. – Hogan Jul 07 '12 at 17:48
  • Okay will do that, thanks for helping me out. But just in case you or anyone else manage to solve this issue please let me know your remedy. Because this is really puzzling. – spencer Jul 07 '12 at 17:51
  • The plugin you suggested is very nice but it doesn't fix the problem. Thanks for you assistance though I really appreciate it. – spencer Jul 12 '12 at 17:37
1

As David Thomas points out, and you seem to acknowledge, the $(this) in your code is a jQuery wrapper around the document object. That object has no rel attribute, so $(this).attr("rel") is the value undefined. In JavaScript, undefined != "", so that expression evaluates to true and you then set window.location.hash to another undefined value: $(this).attr("href"). That's why you're seeing URLs like domain/#undefined.

I should also point out that you're misusing the rel attribute on the HTML anchor tag.

This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.

This is the list of valid link types. You'd be better served by using data- attributes to store arbitrary bits of metadata about your HTML elements.

Brandan
  • 14,735
  • 3
  • 56
  • 71
  • Thank you so much for this very informative answer. I will definitely make some changes as I look into this. So if If tweak this up in way that makes sense it'll be able to work, right? – spencer Jul 08 '12 at 05:05
  • In theory, yes, you can make this code work. I'd still second Hogan's recommendation for the BBQ plugin, though. It sounds a lot like what you're trying to accomplish. – Brandan Jul 08 '12 at 13:04
  • Thanks for you help. I tested he ben alman plugin but it doesn't make the rel attr work. – spencer Jul 12 '12 at 17:36
  • The `rel` attribute is not meant to hold arbitrary data. Try replacing it with `data-target="files/navigation.html"` or something similar and using jQuery's [`data` API](http://api.jquery.com/data/) to retrieve the value. – Brandan Jul 15 '12 at 14:53
  • Having some problems. I've updated my question, could you please take a look at it? – spencer Jul 15 '12 at 21:22