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.
Related
I don't know how to remove the html wrapper in the iframe.
An example:
var content = '<html><body>A page</body></html>';
$('iframe').contents().find('html').html(content);
Even if it does not look like it in the developer tools, the above now have 2 html tags.
var html = $('iframe').contents().find('html html').height();
When using the above I get a height. When only using one html in the selector I just get 0. It proves that there are 2 html tags.
How can I get rid of the html wrapper in the iframe?
In my case I will not modify the content variable. It's fetched from elsewhere.
UPDATE
I tried this:
$('iframe').find('html').replaceWith(content);
But it gave me:
Failed to execute 'replaceChild' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.
From my experience, you should use document.write:
var content = '<html><body>A page</body></html>';
var iframeDoc = $('iframe')[0].contentDocument; // jQuery is just for the example of course
iframeDoc.write(content);
See -DEMO-
If you want to overwrite previous set content used with snippet before, you will need to call iframeDoc.open(); before calling iframeDoc.write(content);. It doesn't really makes sense but it is...
I'm trying to get the innerHTML of an YUI table element. Whenever I try to do so the innerHTML or .html() (jQuery) doesn't give me full html but only a part of it. I'm confused why is it happening. I don't think there is some kind of upper bound to the size of html() we can retrieve. Here is my code..
alert(document.getElementById("table").innerHTML);
console.log($("#table").html());
$.post("MainPageHTML",
{
"data" : $("#table").html()
},function(result){
TCProJSM.newsClicked = false;
location.href = result;
},
"text"
);
Please help and thanks in adance.
Basically I want to save the state of my current page(means all the selections, maps etc on it) while I'm migrating away from it to another page, so when I comeback to this page I just have to repaint the page with my saved stuff. For that I'm doing .html() for the elements required and posting the data to server to be saved. But as I said above I'm getting incomplete data (only few lines from the beginning) for every element I want to save it's state for.
Is there any thing else I can try apart from HTML to get the data which can be repainted when I visit the page again ??
try to use .html() in jQuery.It will give the whole html.
innerHTML can't be applied for several DOM elements, such as table, tr or select, instead of it should be used childNodes or something similar.
In your situation it will be better to create some json file based on #table data and post exactly it.
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.
Can't seem to get this one to work...
I have a page that hides certain links. When the DOM is loaded, I'm using jQuery to toggle some of those elements. This is driven by using a data attribute like so:
<div class="d_btn" data-usr='48'>
<div class="hidden_button">
Then, I have the code:
$.each($(".d_btn"), function() {
var btn = $(this).data('usr');
if ( btn == '48' ){
$(this).children('.hidden_button').toggle();
}
The above all works as planned. The problem is that I am trying to remove the data-usr from the class .d_btn once the if statement is evaluated. I've tried the following and nothing works (i.e., after the page is loaded, the source still shows the data-usr attribute:
$(this).removeAttr("data-usr");
$(this).removeData("usr");
I've been working on this for a couple of hours now and...nothing! Help is greatly appreciated!
UPDATE
I've tried the great suggestions of setting the data attribute to an empty string but I'm still not getting the desired result.
To explain a little further, The reason I'm trying to remove the attribute is so when an ajax response adds another item to the page, the previously added items would already have the button either shown or hidden. Upon AJAX response, I'm calling the same function once the DOM is loaded.
Currently, when something is added via AJAX, it toggles all the buttons (showing the ones that were hidden and vice versa.) Ugh...
I'm also fully willing to try alternatives to my approach. Thanks!
UPDATE
Well, the light bulb just flashed and I am able to do what I want to do by just using .show() instead of .toggle()
Anyway, I'd still like to find an answer to this question because the page will be potentially checking hundreds of items whenever something is added - this seems horribly inefficient (even for a computer, hahaha.)
Why don't you set the value to a random value or empty variable instead if removeAttr does not work..
$(this).attr("data-usr" , '');
$(this).prop("data-usr" , '');
Changing the DOM doesn't affect the source. It affects the DOM, which you can view with the Inspector/Developer Tools. Right click => View Source will give you the original source of the page, not the actual current source as modified by JavaScript.
Set it to a blank string:
$(this).attr("data-usr", "");
I second what Kolink said: check the DOM, not the source. (Chrome: Ctrl + Shift + i).
As others have stated. Checking the source will only show the original unedited source for the webpage. What you need to do is check the DOM using developer tools.
I've just checked everything in Chrome's inspector on jsfiddle here and the attribute is definitely being removed as well as the data.
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.