This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Get selected element’s outer HTML
In jQuery I'm currently using this to get some HTML:
var content = $("tr#add-ingredients-over-here").html();
But, I actually need to include that tr in the selected HTML. I can't figure out how to do this. I also need to replace that with some other HTML after.
Any suggestions on how to do this?
What you are looking for is the outerHTML of the element. You can try this:
var content = $("#add-ingredients-over-here")[0].outerHTML;
This is supported by all current browsers. Firefox was the last to add support for this in Firefox 11 (March 2012); all other browsers already support this for at least 4 years now. If you must support older browsers than this stackoverflow thread has a jQuery-based implementation that works everywhere:
jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};
Another fully cross browser approach. Makes a clone of tbody, removes all but the row wanted and retrieves the html from it
var content = $("#add-ingredients-over-here")
.parent().clone().find('tr:not(#add-ingredients-over-here)').remove()
.end().html()
EDIT: WHy can't you just use clone() if you need the whole TR? A clone can be inserted in another table as a jQuery object
/*copy whole row to another table*/
$('#otherTable').append( $("#add-ingredients-over-here").clone() );
Try
$("tr#add-ingredients-over-here").parent().html();
It will retrieve the parent first, and then return its HTML content
Related
This question already has answers here:
innerHTML not working javascript
(2 answers)
Closed 7 years ago.
I am trying to use javascript to dynamically change the header to my website and thus the header was not changing. My html, for simplicity, looks like
<div class="container">
<h1 id="name">Nic</h1&g
<p id="email"></p>
<hr>
</div>
<script src="js/something.js"></script>
My javascript lives in a file called something.js and looks like
$(document).ready(function() {
console.log('I got run');
$('#name').innerHTML = "YO";
$('#email').innerHTML = "why hello";
})
For some reason I see the log in the console but the html never changes. Why is the header not getting changed?
I did try looking at the stack overflow question
Javascript: Does not change the div innerHTML
and here Setting innerHTML: Why won't it update the DOM? and many others however none of them address my issue.
In jQuery you use .html("text") instead of .innerHTML
$(document).ready(function() {
console.log('I got run');
$('#name').html("YO");
$('#email').html("why hello");
})
Jquery doesn't have innerHTML property to set html instead it has method.
Use .text() if your content is only plain text
Like this
$('#name').text("YO");
If it has html content then use .html()
Like this
$('#name').html("<p>YO</p>");
DEMO
This question already has answers here:
jQuery attribute selector for multiple values
(2 answers)
Closed 7 years ago.
This is pretty simple, but I need to be able to toggle showing columns in a table.
The idea is to have a function that will take the name of the column (all the rows have the same data-field in the same column) and hide it, adjusting the width of the table as it goes.
Using Chrome's inspector, I came up with a simple proof of concept
$('[data-id="column"],[data-field="column"]').toggle()
After running the above, I need to adjust the width of the element plus / minus 4 pixels for the table to fit correctly - The table renders a white box on the right hand side where the column(s). This is just a proof of concept and the actual width will be stored in a variable that will be manipulated to allow multiple columns to be hidden.
$(".oe_list_content").width($(window).width()+/-4)
I made a simple function to come up with the initial idea, but when I run the function, it returns undefined and doesn't make the changes. I'm fairly certain that it can, but is the jQuery selector not able to take a function variable?
function rowToggle(row){
// Verify the rows even exist in the DOM
if($('[data-id="'+row+'"]').length){
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
if($('[data-id="'+row+'"]').is(':hidden')){
$(".table").width($(window).width()+4);
}else{
$(".table").width($(window).width()-4);
}
}
}
This really seems like a variable problem because
var row = "column";
$('[data-id="'+ row +'"]').toggle();
doesn't actually toggle the field. Am I missing something?
This line
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
Should be:
$('[data-id="'+row+'"],[data-field="'+row+'"]').toggle();
It's a single selector string. Not two strings separated by a comma as you had it.
Further reference to this issue: jQuery attribute selector for multiple values
This question already has answers here:
Get selected element's outer HTML
(30 answers)
jQuery: outer html() [duplicate]
(4 answers)
Closed 9 years ago.
I use this JQuery to create some elements:
var form = $(document.createElement("form"));
form.prop({"action":"/DoSomething", "method": "POST"});
var input = $(document.createElement("input"));
input.prop({"type": "image", "src": "someUrl.png"});
form.append(input);
I now want to get the entire html string that is generated by all that so:
<form action="/DoSomething" method="POST"><input type="image" src="someUrl.Png" /></form>
So that I can pass it through some other Javascript functions!
However, doing form.html() obviously only shows this:
<input type="image" src="someUrl.Png" />
So how do you get all the html?
EDIT
Yeah I can see that this is a duplicate, when I first wrote it, I had no idea what I was trying to achieve or the atleast the name given to what I was trying to achieve.
You can use:
form.wrap('<div />').parent().html()
to work across all browsers or
form[0].outerHTML
if you don't really care about older Firefox versions (< 11)
One solution:
Create a temporary element, then clone() and append():
$('<div>').append($('#xxx').clone()).html();
See more answers here: https://stackoverflow.com/questions/5744207/jquery-outer-html
check out this
form[0]
you need the element it self not wrapped version so just use the index 0
var outer_html = $('selector').clone().wrap('<p>').parent().html();
You can simply use the DOM element, rather than a jQuery object, and get outerHTML...
In your code it would be...
form[0].outerHTML;
http://jsfiddle.net/6ugyS/1/
Just use the containg element of form
form.parent().html()
This question already has answers here:
How do I get the entire page's HTML with jQuery?
(5 answers)
Closed 9 years ago.
This event is triggered when I make it:
$(document).on('dblclick', function() {
alert($(document).html());
});
But the exception is thrown in the console:
Timestamp: 20.7.2013 18:59:35
Error: TypeError: t is null
Source File: http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
Line: 5
Is this a jQuery related issue or I'm using a wrong approach to get entire HTML of a current HTML document?
If you want everything, including the DOCTYPE and understand that it is generated source and not original source, you can use XMLSerializer on document.
$(document).on('dblclick', function() {
alert(new XMLSerializer().serializeToString(document));
});
Try this code rather :
$(document).on('dblclick', function() {
alert($('html').html());
});
document is not an element, so it doesn't have a way to render itself as HTML. There's currently no compatible way to get the entire actual source, short of an Ajax request for the current URL -- and even that may not return the same thing.
$('html').html() will get you everything inside the <html> tag. In most cases, that's plenty. Tack on a <!DOCTYPE html>, and you have yourself a valid HTML document (assuming the original source represented one).
document.documentElement.outerHtml to get most of the document. That'll include the <html> tag, but not anything validly outside of it. Specifically, it won't get you the doctype, or any comments that appear before or after.
For modern browsers, a new XMLSerializer may get you the current contents of the document. It doesn't work in IE8, though.
And of course, all of these methods of telling the browser to HTMLify the document, return the contents as the browser understands them. The browser may mangle invalid HTML to get it to fit within the document. For example, stuff appearing after the <body> element may be moved to inside it.
Two questions ... I want to use the object tag to embed an html file that uses external style sheets ... however, nothing that I have tried works. The first question is how to that? ... note: the style sheets are linked to both documents.
The second question is how to determine and set the height attribute of the object so as to eliminate scrollbars ...
The object tag is inside the folllowing DIV ...
In IE8, I simply call "ScrollHeightValue('SF_010A','SF_010B')" ... which are the ids of the object tag and the body of the document being embedded.
function ScrollHeightValue(a, b) {
var testObject1 = document.getElementById(a);
var testObject = testObject1.getElementById(b);
testObject1.style.height = testObject.scrollHeight + 'px';
}
Thus, the second question really is ... how do I do this for non-IE browsers?
I'm a novice ... maybe I'm not asking the questions correctly ... just want to know hoe to detetmine the height of the object so that the content of the object is visible ... without the scrollbars.
Thanks,
Bob
Answer to question number one:
To embed external HTML files in your page, use iframes, not "object".
Answer to question number two:
To get the total height of a DOM element, use its scrollHeight property. However, this property has been reported to be off by 5px for IE 8.
Try https://developer.mozilla.org/en/DOM/window.getComputedStyle
If you want to embed a HTML document in another, you must use an iframe, not an object.