60

I have an HTML string from a Ajax loaded source. I would like to get some attributes from an object (image) in this string, before I put the HTML into the document.

I've got something like:

$.ajax({  
        url: uri+'?js',  
        success: function(data) { 
            var htmlCode = $(data).html();  

            $('#otherObject').html(data);
        }  
    });

How can I get attributes (the src for example) from this HTML string?

KatieK
  • 13,586
  • 17
  • 76
  • 90
MarvinS
  • 767
  • 1
  • 6
  • 8

4 Answers4

107

I'm not a 100% sure, but won't

$(data)

produce a jquery object with a DOM for that data, not connected anywhere? Or if it's already parsed as a DOM, you could just go $("#myImg", data), or whatever selector suits your needs.

EDIT
Rereading your question it appears your 'data' is already a DOM, which means you could just go (assuming there's only an img in your DOM, otherwise you'll need a more precise selector)

$("img", data).attr ("src")

if you want to access the src-attribute. If your data is just text, it would probably work to do

$("img", $(data)).attr ("src")
falstro
  • 34,597
  • 9
  • 72
  • 86
  • 2
    uuh, thanks for your answer! it's the solution :) i didn't see it. i wish you a good first april - and now i'll get in shame ;) – MarvinS Apr 01 '09 at 09:13
  • mhm, i've to regreat my comment. your example doens't work for ie (tested in version 7). i used "$(data)" - "data" - "$(data).html()" - nothing works. any suggestions? – MarvinS Apr 01 '09 at 10:06
  • $("img", $('
    ')) worked in FF (haven't got IE7). Having just the IMG tag enclosed, or enclosed in just a body did NOT work, so perhaps it translates to a single entity? Did you try $(data).attr () directly?     – falstro Apr 01 '09 at 14:52
  • i tried $(data).attr() but this doesn't work either. i think it doesn't work in general with ie 7. i've to look for a workaround for exmaple to put the code into a hidden div, read the attribute and then show the code official in the document. – MarvinS Apr 03 '09 at 14:48
  • @Roe really thanks for your code... It was about 2 hours working on this and now i found the way (your code)... thanks again – Dr TJ Jul 05 '11 at 00:22
  • Same again. Works like a charm. – madc Oct 01 '11 at 14:06
  • It didn't work for me because I was trying to parse the whole page. This answer helped: http://stackoverflow.com/a/1069953/854477 – int_ua Jul 18 '12 at 23:33
2

MarvinS.-

Try:

$.ajax({  
        url: uri+'?js',  
        success: function(data) {  
                var imgAttr = $("img", data).attr('src'); 
                var htmlCode = $(data).html();
                $('#imgSrc').html(imgAttr);
                $('#fullHtmlOutput').html(htmlCode);
        }  
    });

This should load the whole html block from data into #fullHtmlOutput and the src of the image into #imgSrc.

1

just add container element befor your img element just to be sure that your intersted element not the first one, tested in ie,ff

1

One thing to note - as I had exactly this problem today, depending on your HTML jQuery may or may not parse it that well. jQuery wouldn't parse my HTML into a correct DOM - on smaller XML compliant files it worked fine, but the HTML I had (that would render in a page) wouldn't parse when passed back to an Ajax callback.

In the end I simply searched manually in the string for the tag I wanted, not ideal but did work.

The Coder
  • 4,981
  • 2
  • 29
  • 36