Geek Answers Handbook

Jquery ajax $ .get result does not find class

I am stuck in a seemingly simple problem.

I want to get the received HTML request from an ajax request and see if a particular element has a specific class and take the HTML code of another response element and use it to replace something, etc.

$(function() { $('.js-nav').on('click', function(e) { e.preventDefault(); var $this = $(this); var $url = $this.attr('href'); $.get($url.url, function(response) { var $response = $(response); var $body = $response.find('.js-wrapper').html(); var _isLight = $response.find('.js-wrapper').hasClass('body-light'); console.log($body); console.log(_isLight); History.pushState({ state:$url }, $title, $url); }); }); });

The console returns this:

 undefined false

Now the .js-wrapper element is not in the header, but in the div that is inside the body.

The HTML response (console.logged after receiving it with $ .get) looks like this:

 <!doctype html> <!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]--> <!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]--> <!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="utf-8"> <title> some title ... </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- some header stuff like css files and scripts(the ones that HAVE to be in the header) --> </head> <body> <div class="js-wrapper wrapper body-light"> <header class="js-header header"> <!-- some content divs and whatnot --> <nav class="header-nav"> <ul class="js-header-nav-list header-nav-list"> <li class="header-nav-item"> <!-- a couple nav li --> </li> </ul> </nav> </header> <div class="content"> <!-- Content --> </div> <footer class="footer"> <section class="footer-newsletter"> <!-- footer sections... --> </section> </footer> </div> <!-- Some scripts --> </body> </html>

(I included the call to historyJS just in case, if he could do something with it)

Help, as always, is evaluated.

0
source share
4 answers

Thanks to comment by @Girish Sakhare and @Alexanders answer here I got a solution:

 var $response = $("<div/>").html(response);

So now the function looks like this:

 $(function() { $('.js-nav').on('click', function(e) { e.preventDefault(); var $this = $(this); var $url = $this.attr('href'); $.get($url, function(response) { var $response = $("<div/>").html(response); var $body = $response.find('.js-wrapper').html(); var _isLight = $response.find('.js-wrapper').hasClass('body-light'); console.log($body); console.log(_isLight); History.pushState({ state:$url }, $title, $url); }); }); });

So I had to first add an answer to an empty div .

thanks

0
source

I would first respond to the answer and make sure that you returned the correct html.

Then you can confirm that you have html with a specific class.

.hasClass is exactly what you want, undefined, probably because you are not getting html back to confirm that the console has registered it.

use $ ('Your Div'). contents ();

To get html content

Then $ ('Where do you want to place the html Div'). append (Your Div);

+1
source

It looks like you are trying to get a property that should not exist ie

 $url.url

The $ .get code block should look like this

  $.get($url, function(response) { var $response = $(response); var $body = $response.find('.js-wrapper').html(); var _isLight = $response.find('.js-wrapper').hasClass('body-light'); console.log($body); console.log(_isLight); History.pushState({ state:$url }, $title, $url); });
+1
source

Seems to work in

 { http://jsfiddle.net/Px6tu/ }

Please try to copy the response log to make sure that you get what is expected.

Also see Ajax Response Find HTML snippets with Find

0
source

More articles:


All Articles