I'm debuggin a site on ie8 and cannot get dynamic content added via AJAX to display on the page.
The ajax call is done correctly, I can console.log/alert the returned HTML and there are no script errors popping up. Only a blank page with empty text node.
My script appending content looks like this:
// ajax content returned (HTML string)
var makeUp = data,
target = $('.registryWrapper');
target.last()
// css3 transition
.addClass('fade out')
// clear
.html('')
// add
.html( makeUp )
.append( someotherstuff )
// Jquery Mobile enhancement
.trigger('create')
.removeClass('out')
.addClass('in')
Any idea why this does not work in
Thanks!
In IE8, .html()/.innerHTML will do nothing if the HTML coming in isn't perfectly formatted (against the DTD being used) - it doesn't tolerate any mistakes unlike when it's parsing normally.
If you substitute data with something very simple like <p>Hello World!</p> then you should find it works (if that doesn't then something else is wrong) - in which case you need to find what is wrong with the HTML being passed in.
Related
I have somewhere on website a specific text, let's say "NewYork", and I want to fire a Google Analytics event to track all the occurrences of this string.
For example if a visitor come to a webpage that contain the string 'NewYork', I want to send a Google Analytics event.
Text string is in a span tag as <span class="city">NewYork</span>
I do not know any JavaScript codes, just tried the following code adapted from someone else. And it is not working at all.
<script>
var htmlString = $('body').html().toString();
var index = htmlString.indexOf("NewYork");
if (index != -1)
{ ga('send', 'event', 'yesNewYork', 'foundnewyork'); } </script>
Does anybody know how to do this?
Possibly a jQuery solution?
Your approach is correct in principle, but can be improved upon.
You are already using jQuery syntax so I just assume jQuery is available.
First I would suggest you follow Lars Graubner suggestion and select a more specific element and grab the text content instead of the html (as the name suggests the text()-function does not return HTML markup but text only).
$('.city').text()
will adress the span from your example - the dot in the selector says "Look for elements with a classname of".
This will actually return all elements that have the class, but for your use case that does not matter much.
However you must make sure that the text is actually rendered on the page before you call your jQuery selector; if you place it in the head of the page the text isn't there yet when the event tracking runs and thus your selector will return nothing.
You can either put the script in the footer of the page, or you can wrap it into jQuery's document.ready-call. This makes sure that the function only runs after the DOM of the document has rendered (meaning that the page structure is complete, event if images and other assets are not yet loaded. Text will be present at this point). So this would look like this:
$( document ).ready(function() {
var myString = $('.city').text();
if(myString.indexof('NewYork') > -1) {
ga('send', 'event', 'yesNewYork', 'foundnewyork');
}
});
(Obviously this assumes you have jQuery included).
If this still doesn't work you need to be more specific as to the actual error your are getting.
I need some help pointing to the right direction. I have a jQuery code what pulls some HTML content via the $.get function after the page is loaded, puts them into the $data variable and it's appended to the div_content.
Everything works perfectly, except after the appending the javascript links in the original content don't work.
The code part:
$(document.body).ready(function() {
$.get("content1.php", {id:"1234" }, function(data) {
// for example this is the pulled data
var data = 'link'
$('.div_content').append(data);
});
});
The standard tags, without javascript aren't affected, they work fine.
I found some advices like this - jQuery Appended elements with href and javascript doesn't work - and this - Appending a link with Jquery - and read the jQuery's .on() function but doesn't seem to resolve my exact problem with appending the content.
I have jQuery 1.10.1, thanks for all the inputs.
Without seeing what data may contain its difficult to see exactly what you're trying to achieve but I can see the fist thing you do after receiving the ajax response is overwrite the returned data which is obviously incorrect.
perhaps you meant something like this?:
$.get("content1.php", {id:"1234" }, function(i,data) {
var link = 'link';
$('.div_content').append(link);
});
Thanks for the responses and comments, mea culpa, it was my, a design error. I had to include the jquery and fancybox JS and CSS into the someotherpage.php (the data-id attribute), and now it's working.
After an AJAX request I get a string with some HTML data like this:
var test = '<div id="test-options"><option value="">Select</option><option value="true#153237119">XS</option><option value="true#153237120">S</option><option value="true#153237121">M</option><option value="true#153237122">L</option><option value="true#153237123">XL</option><option value="true#153237124">XXL</option></div><div class="athoerstuff">Ather stuff here</div>';
I want to append this and after it's appended get only the content of div without the wrapper:
var li = $(test).appendTo('form');
$("body").find('#test-options').html();
-------------------------------
The problem was coming only on IE9 because the options without having the wrapper.
IE9 was looking at the options inside the div and realized that this is invalid. That is why, IE9 was not getting me the options.
I added a select wrapper in the server side script where I was making the request (option values) and, instead of:
$('#test-options').html();
I added:
$('#test-options select').html();
The result result was same as previous code, but now working on IE9 as well.
Thank you all for your help.
Maybe somebody can tell me why IE9 is not getting the options without the select wrapper and other browsers do?
If you are trying to get the options html then you can simply do like below,
$(test).unwrap().html();
instead of appending to body and retrieving the content.
http://jsfiddle.net/XYhbg/
The above is under the assumption with the data that you had in the test variable. Let me know if it is any different.
On my website I have a CKEDITOR to publish content. I have build an automatic save function when you switch pages that looks like this:
var oEditor = CKEDITOR.instances.text;
var content = oEditor.getData();
$('#form #text').html(content);
$.post("news/save/" + id + "/" + page, $("#form").serialize());
This gets the current content of the editor, places it in the textarea (it did not always do that automatically apparently). Then serializes the entire form and posts it to my website's save page.
This is works except for when I put youtube code inside the editor. Printing out the following works without any problems (after the content was set):
alert($('#form #text').html());
This would just prints the actual content with the youtube code. But when the .serialize() functions is called the content gets empty.
alert($('#form #text').serialize());
This would just print: "text=%0A".
Can anybody help me fix this problem or suggest another way to post the form's content to the save page?
Thank you.
Is #text is a textarea? if it is then you should probably using val() method to set the value instead of html(), because val() should be used to set/get form element's value.
You should call editor's synchronize procedure, that synchronizes editor contents with the value of the textarea.
After that, the value will be available for serialization as well.
I have a chat webpage for Firefox that is structured like this
..... Outer HTML
-----|......Frameset Frame
------------|...... header: contains jQuery post has returned data: rdata = new_iFrame_html_str, the entire html string of the iFrame that should be updated
------------|...... iFrame
--------------------|...... header: contains jQuery
--------------------|...... body: chat messages that depends on the header jQuery to behave properly
QUESTION: I can't this jQuery post to work, i.e. I can't find a way for this post to update the ENTIRE iFrame (header + body).
Things I've tried and FAILED with javascript and jQuery:
top.frames['framesetFrame_name'].document.getElementById('iframe_id').contentDocument.body.innerHTML = new_iFrame_html_str;
I don't like this because it's only changing the body, not the header, so the behavior generated from jQuery can't be shown
top.frames['framesetFrame_name'].document.getElementById('iframe_bucinid').contentWindow.location.reload();
I do not want to reload because a reload makes the iFrame flicker, bad for a chat program
top.frames['framesetFrame_name'].document.getElementById('iframe_id').contents().html = new_iFrame_html_str;
Not updating anything that shows :(
top.frames['framesetFrame_name'].document.getElementById('iframe_id').contentWindow.location.href = new_iFrame_html_str;
This is actually the wrong form here, because it should be = url_of_new_content
$( top.frames['framesetFrame_name'].document.getElementById('iframe_id') ).html( new_iFrame_html_str ) ;
Not updating anything that shows :(
So these two lines below are a roundabout way to get what I wanted (refresh the entire HTML of child iframe). However, the jQuery in the head of the iframe is still not executed, even though the head is refreshed.
Does anyone know why?
The first line takes out the "" and "" since we're updating HTML's innerHTML
var subtxt = new_iFrame_html_str.substring(6, txt.length-9);
top.frames['framesetFrame_name']
.frames['iframe_name']
.document.body.parentNode.innerHTML = subtxt;