Jquery: prepend content retrieved with .load - javascript

I'm loading an svg through ajax with jquery like so:
$("body").load("https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg");
Which loads just fine, but replaces all the content in the body. What I want it to do is prepend the loaded svg, so the svg does not replace everything but is inserted as the first element after <body>.

Use $.get() then do prepend in the callback:
$.get( "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" )
.done(function( data ) {
$("body").prepend($(data).find("svg"));
});

Well, you cannot just place an image retrieved into body like so.
If you want to display image, just show it via img tag.
If you retrieve data, you can use something like this:
$.get("https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" )
.success(function(data) {
$("body").prepend(data.activeElement.innerHTML);
});
The reason why your initial variant "worked" by showing an entire picture is that browsers can display image files, and your code just did that - the same would be if you just drag-n-drop an image into browser window.

Try this:
$.ajax({
url:"https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg",
method: "GET",
dataType: "html",
success: function(data) {
$("body").prepend(data);
}
})
You have to adjust the datatype in case you want to get different content (e.g. xml/json elements).
Works with your example - svg is right below the body and before your #svg div.

Try following code I checked it and working fine.
$("#svg").load("https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg");

Related

Ajax response - remove the scripts and styles

I have to make an AJAX call where I retrieve another page, completely. Then I would trim the html received to what I would like to see (styling wise) by removing or adding different stuff. As below:
$.ajax({
type: "GET",
url: "/booking-standard-mykad.html",
dataType: "html",
ifModified: true,
asnyc: true,
error: function() {
alert("Error");
},
success: function(data) {
data = $(data);
data.find(".somecssclass").remove();
//lots of other modifications
$('.book-now').html(data); //then I would display it here
}
});
Now the problem is, I don't seem to be able to remove the styles and scripts that are as well fetched in the head. I would like to keep some of the content in the head, what's below the head, in the body and in the footer.
What I have tried and failed:
data.find("title").nextUntil("script[src='http://thedomain.com/skin/frontend/smartwave/porto/js/porto.js']").andSelf().remove();
//removing whatever there is from <title> to a certain <script> fetched
As well, I have tried the load() function in jQuery, but since I have lots of JS functions in the footer and body that I would need, it didn't quite work. Hence I used Ajax.
Any thoughts on how to remove certain <scripts> , <meta> and <link> tags being fetched?
I solved this problem by fetching data to a third page using jQuery load(), removing whatever styles that I want, and then using an iframe to pull the data from that third page to my destination. All good and fast.

Why is my html loaded with ajax reporting the wrong element sizes?

I have the following code to insert HTML into a div:
$.ajax({
type: "POST",
url: "actions.php",
cache: false
}).done(function(html) {
$("#edit").fadeOut('fast', function() {
$("#edit").empty();
$("#edit").html(html);
$("#edit").fadeIn('fast');
});
});
Inside that html is a div with id "viewport", as well as a script that is supposed to run in the $("#viewport").ready() event, and it does, but it seems to run before the layout has adjusted to the css. When I output the width and height of the div, it says 100,100. Underneath that div (not inside it) is an <img>. If I make the script run when the image is done loading (takes a few seconds), then it outputs the right size and everything is good. The problem is I cannot wait for the image to load before running that code. Does anyone know why the code is running before the elements have taken the sizes that they are supposed to? Thanks for any suggestions.
I was able to fix this on my own. I used .load() to load the elements directly into the div instead of .ajax(). This seems to allow all of the elements take shape inside the div properly.

Get value from other page

I got a site where I want to pick up a value and save it in my script, but the value is inside a div on a different page. I have tried so many different things by now, and I cant get it to work.
Do anyone have a idea ?
Thanks!
if you are sure you have the cross-origin allowed , then just use load , and retreive that specific div
$( "#result" ).load( "ajax/test.html #container" );
where result is the div you want to store data inside , and container is the div on the other page.
will also save time and traffic to load the whole page using get.
http://api.jquery.com/load/
Try this:
$.get("pageurl",function(data){
$("yourdiv").html(data);
});
OR Better
jQuery.ajax({
url: "YourPageURL",
success: function(result) {
var html = jQuery('<div>').html(result); // Instead of div tag you can use specific id with div
},
});

Javascript: Get current page CURRENT source

I have HTML and I need to get page source of this html.
document.documentElement.outerHTML
or
$.ajax({
async: true,
type: 'GET',
cache: false,
url: window.location.href,
success: function(data) {
alert(data);
}
});
is working, but they display originally source. If I change html (by jQuery, for example), they don't read my changes.
Is it possible read CURRENT source of page?
Tried it on chrome and it works. Use
document.documentElement.innerHTML
Funnily enough your code also worked
document.documentElement.outerHTML
Check out the html printed to the console in this fiddle. It actually contains the changes made by jQuery.
Using jQuery you can do this by:
$( 'body' ).html();
For example.
Or convert to String:
$( 'body' ).html().toString();
You just need to grab the element and use the html method:
$('.selector').html();
Simple solution, source of a document usually embedded in html tag
so use $('html').html(), you will get everything between html tags.

How to open an html page in and html div?

The question might be a little misleading as I don't want to know how to open a html document in a div ,but I asked the question as I am currently facing a problem where I can't replace the html file which I have already placed in a div
I have already placed a html file in a div using ajax like this:
$.ajax({
url: 'calender.aspx',//this is html.aspx file
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);//mainBar is the div
}
});
this file gets placed on page load i.e document.ready function ,till here everything is fine.....my trouble starts when I want to replace the file,what I do is call a javascript function say replaceFile() on button click and write the same code to replace the file (changing the url of course)
like this
function replaceFile()
{
$.ajax({
url: 'Another.aspx',
cache: false,
dataType: "html",
success: function (data) {
$(".mainBar").html(data);
}
});
}
but this doesn't work,please help me out!
I guess your binding is not working when you try to click on the content you loaded via ajax . So you might want to change the binding of onclick from
$("#someButtonId").click(function(){
replaceFile();
});
to
$(document).on("click","#someButtonId",function(){
replaceFile();
});
jQuery on works with current and future elements.
with this function you will load the page into the element named result
.load( url , data, complete(responseText, textStatus, XMLHttpRequest)] )
function replaceFile(url)
{
$('#result').load(url, function() {
alert('Load was performed.');
});
}
replaceFile('htmlfile.html');
You can load this in Firebug and set a break point at $(".mainBar").html(data); to make sure it's being called. You don't have a failure handler, so it's possible that it's actually receiving an HTTP failure code, not a success code.
I'd also look at the network traffic under the Net tab to see what the request/response looks like. That's an easy way to find out what is really going on with most AJAX calls. IE9 has similar developer tools if you want to use it and not Firefox or Chrome.

Categories

Resources