CODEWITHSUNDEEP
jqueryajax
Eggo
Eggo

Reputation: 539

When setting a variable, my jQuery fails to work properly

I have this function:

<script type='text/javascript'>
$('#clicktogohome').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});
$('#listentosong').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});

popstate = function(url){
  url = '/ajaxlinks/'+window.location.pathname.substr(1);
  if (url == '/ajaxlinks/'){url =  '/ajaxlinks/index.php'}
  $('#ajaxloadcontent').load(url+"#ajaxloadcontent > *");
}

window.onpopstate = function(event){
  popstate(window.location.href);
  event.preventDefault();
}
</script>

This function is very important to my website and works perfectly, when I do not add this line:

if (url == '/ajaxlinks/'){url =  '/ajaxlinks/index.php'}

After adding this line, the new URL updates, and the back and froward button still work, however, it seems as if this line does not work and update the div on my page:

$('#ajaxloadcontent').load(url+"#ajaxloadcontent > *");

Is this common in jQuery and does anyone know how I can fix it. The function works without setting the variable "url," but it must be done for my usage of the function. Does anyone know how to fix this? Thanks!

Upvotes: 0

Views: 94

Answers (2)

David Thomas
David Thomas

Reputation: 253308

The problem is the lack of a space between the url variable and the string. It should, I think, be:

$('#ajaxloadcontent').load(url+" #ajaxloadcontent > *");

It's an incorrect use of load() which expects a URL and a selector to be found in the page found at that URL.

I'd also question why you're using the > * selector; since using only #ajaxloadcontent will retrieve the element itself (including its descendant elements).

Further to the comment left to this question:

That still does not work for me. If you want to see the problem that I am having, go here pearlsquirrel.com/listen.php?u=101 and click on the PearlSquirrel logo. The URL updates and yet the content does not load. This still occurs with the code above.

It's important to note that the JavaScript console reports:

GET http://www.pearlsquirrel.com/ajaxlinks/index.php 404 (Not Found)

Not to mention reference errors:

http://www.pearlsquirrel.com/:53Uncaught SyntaxError: Unexpected identifier http://www.pearlsquirrel.com/:365Uncaught SyntaxError: Unexpected end of input

Reference:

Upvotes: 3

gen_Eric
gen_Eric

Reputation: 227190

You need a space between the URL and selector in .load.

$('#ajaxloadcontent').load(url+" #ajaxloadcontent > *");

Upvotes: 0

Related Questions