Get control/access elements out of HTML js object using jquery

Question

I want to access the element from a HTML string using JQuery.

I have a following AJAX function which returns HTML text on success. I wish to extract only the contents of the tag from that HTML text using Jquery.

suppose i have a variable resp containing HTML content. I want to access the contents of the tag inside this HTML content as below..

var resp = "<html><head></head><body><form action="changePassword" name="fmChangePassword"> .... form elements .... </form></body> </html>"
alert(resp); //this alerts the full HTML content properly                 
alert($(resp).find("form").html()); //trial 1 -- returns NULL
var test = $(resp).find("#changePassword"); //#changePassword is the ID of the form
//alert(test.html());
displayChangePwdWindow(test);   //need to pass the form content here

I tried using .find() but no success.

Can anyone help me how to do this?

what exactly do you want to do?? will give the full code in jsfiddle ? — yosafatade
– yosafatade, Commented Nov 7, 2012 at 12:13
Can you show your resp content? Maybe something is wrong with it. Because that should work fine: jsfiddle.net/cEBsF — Viktor S.
– Viktor S., Commented Nov 7, 2012 at 12:17
Edited the question to make it clearer. Yes, the HTML content is getting alerted properly. — DarkKnightFan
– DarkKnightFan, Commented Nov 7, 2012 at 12:18
I suspect some weird characters (encoding) in your resp that dont allow jquery to parse it as html — A. Wolff
– A. Wolff, Commented Nov 7, 2012 at 12:19

yosafatade · Accepted Answer · 2012-11-07 12:34:30Z

1

Maybe you need to use .filter() instead of .find(). you can check the Demo: first demo

or maybe if you still want to use .find() you could place the HTML into a wrapper to search from. you can check the Second Demo: second demo

answered Nov 7, 2012 at 12:34

yosafatade

1851 gold badge2 silver badges12 bronze badges

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

Comments

rahul · Accepted Answer · 2012-11-07 12:22:04Z

0

may be this can help you

$.ajax({
   type: "POST",
   url: url,
   error: function(jqXHR, textStatus, errorThrown) {
      alert(errorThrown);
   },
   success: function(resp){
      var test = jQuery("<div/>").append(resp).find("#changePassword");
      alert(test.html());
      displayChangePwdWindow(test);  //need to pass the form content here    
   }
});

answered Nov 7, 2012 at 12:22

rahul

7,6738 gold badges42 silver badges55 bronze badges

Comments

bipen · Accepted Answer · 2012-11-07 12:18:37Z

0

HTML
Create a hidden div in your body....

<div id="DIVID" style="display:none"></div>

AJAX

$.ajax({
        type: "POST",
        url: url,
        error: function(jqXHR, textStatus, errorThrown)
        {alert(errorThrown);},
        success: function(resp){

         $('#DIVID').html(resp);
         var test = $("#changePassword").html();

         displayChangePwdWindow(test);  //need to pass the form content here    
        }
});

OR.. you just append it to a body first.. no need to create a hidden div

$.ajax({
        type: "POST",
        url: url,
        error: function(jqXHR, textStatus, errorThrown)
        {alert(errorThrown);},
        success: function(resp){

         $(document.body).append(resp);
         var test = $("#changePassword").html();

         displayChangePwdWindow(test);  //need to pass the form content here    
        }
});

answered Nov 7, 2012 at 12:18

bipen

36.6k9 gold badges51 silver badges62 bronze badges

2 Comments

DarkKnightFan Over a year ago

looking at the your it looks like you are adding the complete resp content (i.e. the full HTML content) into the DIV. I just want the <form> content of resp

bipen Over a year ago

i am adding the full html content to the div... and using the selector to select the id... $("#changePassword"). which now, will be available in the body... so this should work.....

Collectives™ on Stack Overflow

Get control/access elements out of HTML js object using jquery

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related