using jquery selector to change attribute in variable returned from ajax request

Question

I'm trying to pull in a filename.txt (contains html) using ajax and change the src path in the data variable before I load it into the target div. If I first load it into the div the browser first requests the broken image and I don't want this so I would like to do my processing before I load anything onto the page.

I can pull the src values fine but I can't change them. In this example the src values aren't changed. Is there a way to do this with selectors or can they only modify DOM elements? Otherwise I may have to do some regex replace but using a selector will be more convenient if possible.

  $.ajax(
  {
     url: getDate+'/'+name+'.txt',
     success: function(data)
     {
        $('img', data).attr('src', 'new_test_src');
        $('#'+target).fadeOut('slow', function(){
           $('#'+target).html(data);

           $('#'+target).fadeIn('slow');
        });

     }
  });

My reason is I'm building a fully standalone javascript template system for a newsletter and since images and other things are upload via a drupal web file manager I want the content creators to keep their paths very short and simple and I can then modify them before I load in the content. This will also be distributed on a CD so I can need to change the paths for that so they still work.

Justin · Accepted Answer · 2012-12-14 05:32:30Z

1

You can modify the html without adding it to the page:

var divHTML = "<div><img id='a' src='old'></div>";
var newHTML = $(divHTML);
$("#a", newHTML).attr('src', 'NEW');
alert(newHTML.html());

See it in action: http://jsfiddle.net/23B8f/1/

answered Dec 14, 2012 at 5:32

Justin

27.4k16 gold badges118 silver badges130 bronze badges

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

Comments

karim79 · Accepted Answer · 2010-03-29 21:01:09Z

0

I think you will need to capture the returned data into a variable before you manipulate anything. Try this:

$.ajax(
  {
     url: getDate+'/'+name+'.txt',
     dataType: "html",
     success: function(data)
     {
        var html = data;
        $('img', html).attr('src', 'new_test_src');
        $('#'+target).fadeOut('slow', function(){
           $('#'+target).html(html);
           $('#'+target).fadeIn('slow');
        });

     }
  });

Also, I would set the dataType option to html just to be on the safe side. Unfortunately, I am unable to test this right now. Another thing to consider is, the manual says this of the returned data:

"html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.

so you could also try wrapping the return data in $() before using any jQuery methods on it, e.g.:

$('img', $(html)).attr('src', 'new_test_src');

edited Mar 29, 2010 at 21:01

answered Mar 29, 2010 at 20:53

karim79

343k67 gold badges420 silver badges409 bronze badges

1 Comment

Blake Over a year ago

That was the first thing I thought as well but it doesn't work. I also tried all the other possible solutions without any luck. At this point I'm assuming it's just not possible for the selector to manipulate variables.

Collectives™ on Stack Overflow

using jquery selector to change attribute in variable returned from ajax request

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related