I'm always having trouble with that,
i'm loading a file with AJAX :
$.ajax({
url: fullHref,
success : function(result) {
console.log(fullHref+" was loaded via AJAX");
saveImages(result);
}
});
and trying to iterate through all images in result :
function saveImages(file){
console.log("savesImages enterd");
$(file).find('img').each(function(){
console.log("The file has this image : "+$(this).attr('src'));
});
}
}
I've also tried :
$('img',file)
$('img',$(file))
$('img',$(file).html())
Yet it doesn't enter the loop.
Any suggestions?
I'm using Chrome, and i don't wanna use regex.
Tryfilter() instead of find:
$(file).filter('img').each(function() { /* ... */ });
find() looks down the DOM tree which is not what you want if the img elements in the string are all at the root level.
Just make a new node and set the innerHTML of it.
$('<span></span>').html(file).find('img').each(...
Related
I have some errors in my extension. I have this code that do a find() on an external page:
$.ajax({
url: 'http://www.subspedia.tv/traduzioni.php',
success: function(data) {
$(data).find('.itemListaSerie').each(function() {
console.log($(this).attr('title'));
});
}
});
The find function work correctly but after the result I have a lot of errors that say "File not found" on all images in the page that I'm doing the request.
The screen show my result:
You need to post process the relate links like immagini/serie/covers/33.png for each of the images, and convert them into something like
http://www.subspedia.tv/immagini/serie/covers/33.png
instead of using it as is
EDIT:
The images loaded are probably due to the $(data). If you need only the titles, then you should replace the src of all the tags before $(data)
success: function(data) {
var strippedData = data.replace(/src='(?:[^'\/]*\/)*([^']+)'/g, "");
$(strippedData).find('.itemListaSerie').each(function() {
console.log($(this).attr('title'));
});
Credit to #Gumbo for his answer on regex for matching src. Note, this will remove all src attributes in the page
After your success function, using $(data) you create an element that contain all the html from http://www.subspedia.tv/traduzioni.php so, the document is looking for all the script, css and the images included in that page.
try to replace all the img as words in data as string and then call $(data).find....
Hope this helps you! Anche se mi sarei spiegato meglio in Italiano ;)
I have this xml file which has text init.
i.e
Hi my name is steven
When i add a Setinterval to load the xml file every 10 seconds i get
Hi my name is stevenHi my name is stevenHi my name is stevenHi my name is steven
This continues duplicating every 10 seconds
Here is my javascript xml function
myLoadInteval = setInterval(Xml, 10000);
function Xml(){
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://www.mobilefriendlywebapps.co.uk/tayloredtest1/note.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("menu").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("div#site_list").append( $(this).find("cd").text() );
$("div#treatments").append( $(this).find("cd1").text() );
$("div#preparation").append( $(this).find("cd2").text() );
$("div#products").append( $(this).find("cd3").text() );
$("div#info").append( $(this).find("cd4").text() );
$("div#price").append( $(this).find("cd5").text() );
$("div#promo").append( $(this).find("cd6").text() );
});
}
});
}
How do i remove the old xml before the new on loads?
Rather than using append() use html()
i.e
$("div#site_list").html( $(this).find("cd").text() );
If I've understood right, you're getting duplicate content because you're appending to the HTML elements each time, not emptying them first. If you want to replace the contents, do just that, rather than appending. So:
$("div#site_list").append( $(this).find("cd").text() );
...would become
$("div#site_list").text($(this).find("cd").text());
Or, if you XML contains CData-protected HTML mark-up, use the html() method instead.
I want the source code of an HTML page (1.html) to be used in another page (2.html). Furthermore, I want to perform operations on it in 2.html.
Is there a way to do this?
EDIT: 1.html is a separate public webpage and I do not have access to make changes to its source code. I have to do whatever I need only by using 2.html.
To get the DOM converted to a string:
document.getElementsByTagName('html')[0].innerHTML
Question: what do you mean by "use it"? Do you need to include 1.html inside 2.html? Or do you just need to process it?
Its very simple
On 2.html use this jQuery snippet
$.get("1.html", function(response) {
alert(response)
//do you operations
});
jQuery:
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
I don't understand whatyou mean that you must make modifications, but you could simply load the second page through AJAX
var url ="1.html";
$.ajax({
url: url,
dataType: 'html'
success: function(data){
//do something with data, which is the page 1.html
}
});
Use can use .html method alternatively to get the entire html data of the page.
$(function(){
var a = ($('html').html())
})
A realy simple and modern way is the follow:
fetch('1.html').then(function(response) {
/* when the page is loaded convert it to plain text */
return response.text()
}).then(function(html) {
/* initialize the DOM parser */
var initParser = new DOMParser();
/* parse the text */
var parse = initParser.parseFromString(html, 'text/html');
/* you can now even select part of that html as you would in the regular DOM */
/* example */
var docOutput = parse.querySelector('html').outerHTML;
console.log(docOutput);
}).catch(function(error) {
console.log('Error fetch page: ', error);
});
$.get("progress.txt", null, function(data_aj){
if(data_aj.substr(0,14) == "<!-- MSG:: -->"){
$("#list").html("<li>"+data_aj+"</li>");
window.clearTimeout(timeOutId);
}else{
$("#list").html(data_aj);
}
});
I really have tried everything but can't figure out whats wrong. If I use alert(data_aj); it gives the desired output and just works fine but HTML(data_aj) just doesnt loads into a <ul> element #list using .html(). Can anyone tell me why?
Have you tried putting your code in a document ready, as your alert will fire fine but if your dom is not loaded then you cannot append to it. Also use .append() for lists not html
$(document).ready(function() {
$.get("progress.txt", null, function(data_aj){
if(data_aj.substr(0,14) == "<!-- MSG:: -->"){
$("#list").append("<li>"+data_aj+"</li>");
window.clearTimeout(timeOutId);
}else{
$("#list").append(data_aj);
}
});
});
Listen up...
$.get() is a shorthand for $.ajax().
So when you do this
$.get(uri, function(data){
//Your functionality
});
You're really doing this
$.ajax({
url: uri,
type: "GET",
success: function(data) {
//Your functionality
}
});
By default this returns the page as HTML. Or rather, by default, it first checks the MIME-type on the page, and if none is found, it returns HTML. As you are requesting a .txt file it will interpret it as a simple textfile. If you want to tell it what you would like to return (HTML), you can either do it in the MIME-type on the server page, or you could use $.getJSON().
An easy way to solve this is thus doing:
$.get(uri, function(data) {
//Your functionality
},
"html");
Which is the same as doing:
$.ajax({
url: uri,
type: "GET",
dataType: "HTML",
success: function(data) {
//Your functionality
}
});
Also it is not a good idea to use html() because you are replacing the existing html inside of your ul element every time you want to add an additional new node.
Try making use of:
$('#list').append('<li>' + data_aj + '</li>');
Basically you can just append the <li> to the <ul> itself.
Lastly make sure your dom has already been loaded by placing all your JQuery code into the
$(document).ready(function() {
//Your code...
});
Otherwise if your HTML is not fully loaded yet, your list might not exist yet so there is no way for JQuery to put some values into unexisting HTML.
I'm new to JQuery and web development in general. I'm trying to load some data from an XML file and build an unordered list. I've got that part working, now I'm trying to use the TreeView plugin so I can collapse/expand the data. The data is loaded like this:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "solutions.xml",
dataType: ($.browser.msie) ? "text" : "xml",
success: function(data) {
var xml;
if (typeof data == "string") {
// Work around IE6 lameness
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
list = ""
$(xml).find("Group").each(function() {
group = $(this).attr("name");
list += "<li><span>" + group + "</span><ul>";
$(this).find("Solution").each(function() {
solution = $(this).attr("name");
list += "<li><span>" + solution + "</span></li>";
});
list += "</ul></li>";
});
$("#groups").html(list);
},
error: function(x) {
alert("Error processing solutions.xml.");
}
});
$("#groups").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
});
and the HTML looks like this:
<html>
...
<body>
<ul id="groups">
</ul>
</body>
</html>
The unordered list shows correctly, but the little [+] and [-] signs don't show up and the sections aren't collapsible/expandable. If I get rid of my Ajax loading and insert an unordered list inside of #groups manually it works as expected.
What am I doing wrong? Is there any other plugins or Javascript libs that could make this easier? The solution needs to work on IE6 locally (i.e. webserver).
Update: I found a work-around: If I define my treeview stuff like this it works:
function makeTreeview() {
$("#container").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
}
setTimeout('makeTreeview();', 50);
I think the problem is, when I create the treeview, the ajax stuff hasn't done it's work yet, so when treeview() is called, the unordered list hasn't been created yet. I haven't tested this with IE6 yet. Is there a nicer way to do this, without using SetTimeout()?
I made the same type of call for another project.
For other reasons you will probably want to wrap your ajax call in an anonymous function to create a closure so that your variables remain what you expect them to...
The success method is a callback function that happens after your call is complete , just create your treeview inside that method, or break it out into a seperate fumction if you need to for clarity.
in the example that you show - your treeview will still fail if the ajax call takes longer than 50ms - which could easily happen during initial load if more than two objects are being loaded from that same server.
This example used JSON, and concurrently loaded html data from a page method into a series of divs.
$(document).ready(function() {
for (i= 1;i<=4;i++)
{
(function (){
var divname ="#queuediv"+i;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "test12.aspx/GetHtmlTest",
data: "{}",
error: function(xhr, status, error) {
alert("AJAX Error!");
},
success: function(msg) {
$(divname).removeClass('isequeue_updating');
$(divname).html(msg);
$("#somethingfromthemsg").treeview();
}
});
})();
}
});
Hope that helps!
You need to get FireBug (Firefox add-in) and then you can see in the console what is being returned, and make sure it matches what you expect (And that it is actually doing the request..).
Once you get it working in FF, you can support the ancient 10-year old IE6 browser.
There's also some other things you may want to consider:
The whole ActiveXObject("Microsoft.XMLDOM") jumps out as me as unnecessary. If you pass XML in a string to $(), jQuery turns it into a DOM object.
Additionally, .Find can be replaced by:
$('Element', this);
So for example:
var xmlDoc = '<Group><Solution name="foo" /><Solution name="bar" /></Group>';
$('Solution', xmlDoc).each(function() {
document.write( $(this).attr('name') );
});
would spit out:
foo
bar
Also, with firebug, stick a console.log(list); at the end, to be sure you're generating the HTML you think you are. If you're really stuck in IE6, alert(list) somewhat works as a poor man's equivalent (as long as your file isn't too big).
In short, I think you're on the right track, you just need the tools to debug properly.
For anyone who also finds their way to this post. I had this trouble with an ajax call.
If you want to wait for the ajax call to be returned, you need to set async as false.
$.ajax({
type: 'POST',
async: false,
........