Mikail Mikail - 2 months ago 7
Javascript Question

Query process dom inside a variable

I have an HTML snippet which I'd like to get>modify>display, here is HTML:

<div class="col-lg-12 loader" style="position: absolute; left: 0px; top: 0px; height: 100%; z-index: 99; right: 0px; background: rgba(255, 255, 255, 0.8);">
<span class="text-center" style="padding-top: 20%; display: inherit;">
<img id="IDloaderGif" src="{{asset('imgs/gears.gif')}}" >
<p style="font-size: 30px;">Loading ...</p>
</span>
</div>


and here where I'm processing the snippet :

function (callback) {

$.ajax({
url: app.url('js/html/loader.html'),
type: 'GET',
data: {},
}).done(function(data) {
var data = $(jQuery.parseHTML(data)).find('#IDloaderGif').attr('src', app.url('imgs/gears.gif'));
callback(data);
});

}


so here is my problem:

$(jQuery.parseHTML(data)).find('#IDloaderGif').attr('src', app.url('imgs/gears.gif'));


this does find the element and modifies it, but
var data
now contains only this element, only the element with selected id :
'#IDloaderGif'
but I needed the entire snippet but it gives me only that element , not the whole snippet, so I need to modify the snippet without loosing the whole data.|thank you|

Answer

find() returns only the found element, so set the entire HTML to the data variable, then find and modify

var data = $(jQuery.parseHTML(data));

data.find('#IDloaderGif').attr('src', app.url('imgs/gears.gif'));

callback(data);