how to get innerHtml of body without an iframe with jquery - javascript

I have page with html something like this
<body><iframe ></iframe><div id="menu">......</div>.....</body>
I want to get the innerHTML of the body but without the iframe? How can i do that in jquery?

Try with .clone:
$(document.body)
.clone()
.find('iframe')
.remove()
.end()
.html();

$(document).ready(function(){
$('body').not('iframe').html();
});
that should get everything in the body but the iframe. you'll probably want to store that in a variable or something for reference later

I have found another way to do it
var page = $('body').html();
page = $('<div>' + page + '</div>');
var html = $(page).find('iframe').remove().end().html();
html variable contains the html without the iframe.
And it works with IE, since jquery.clone() did not work on my page may be because of malformed html as #lonesomeday suggestted

Related

Setting content of an element in tinymce textarea

I have a tinymce textarea (TinyMCE 3.5.11) that contains an element like
<span id="lastreplytimeee">...</span>
I need to access and change the content of this element using the span id as selector.
I have tried things like
tinyMCE.DOM.setHTML('lastreplytime', $input.val());
None worked.
Any suggestions?
this line is within .ready:
$().ready(function() {
jQuery('.flexy_datepicker_input').datetimepicker({
lang:'tr',
format:'Y-m-d H:i:s',
dayOfWeekStart:1,
onChangeDateTime:function(dp,$input){
document.getElementById("lastreplytimeee").innerHTML = $input.val();
}
});
});
1.Maybe try it,this code gets TinyMCE content and then replace some elements (TinyMCE 5)
tinymce.get('TinyMceID').setContent(
tinymce.get('TinyMceID').getContent().replace(
$(tinymce.get('TinyMceID').dom.doc.getElementById('lastreplytimeee')).get(0).outerHTML,
`<span id="lastreplytimeee">` + newValue + `</span>`)
)
2.or use this
tinymce.get('TinyMceID').dom.setHTML("lastreplytimeee", "newValue");
document.getElementById("id") gets the reference to that particular tag.
.innerHTML is to say assign value or display values in the HTML at that particular div you are referring to above.
Try to use-
document.getElementById("lastreplytimeee").innerHTML = $input.val();
If you are using jQuery, try this-
$("#lastreplytimeee").html = $input.val();
Hope it helps :) Happy Coding!
Found the solution, tinymce requires its dom utility to access and play with an element inside it, like:
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.dom.select('selector'), 'some inner html');

jquery detecting file change and displaying it

I have a text file that is modified by different python scripts, and I want to create a jquery function that detects each change in that file and to display that change in an initially empty html div
<div id="logtext"> </div>
using
document.getElementById('logtext').innerHTML= new_content_of_the_file;
( something similar to displaying a logfile )
how can I do that?
You can also use HTML like this:
var content = data_from_python;
$("#logtext").html(content);
The difference between HTML and append() function is that HTML replaces the content of your div. It's the equivalent of innerHTML while append just adds content to the end of an element.
Here is a reference on this topic:
.append()
.html()
Is this what you are looking for?
$('#logtext').append('<p>' + resultMessage + '</p>');
you can use append or html like this:
$("#logtext").append("to do");

.html() and .append() without jQuery

Can anyone tell me how can I use these two functions without using jQuery?
I am using a pre coded application that I cannot use jQuery in, and I need to take HTML from one div, and move it to another using JS.
You can replace
var content = $("#id").html();
with
var content = document.getElementById("id").innerHTML;
and
$("#id").append(element);
with
document.getElementById("id").appendChild(element);
.html(new_html) can be replaced by .innerHTML=new_html
.html() can be replaced by .innerHTML
.append() method has 3 modes:
Appending a jQuery element, which is irrelevant here.
Appending/Moving a dom element.
.append(elem) can be replaced by .appendChild(elem)
Appending an HTML code.
.append(new_html) can be replaced by .innerHTML+=new_html
Examples
var new_html = '<span class="caps">Moshi</span>';
var new_elem = document.createElement('div');
// .html(new_html)
new_elem.innerHTML = new_html;
// .append(html)
new_elem.innerHTML += ' ' + new_html;
// .append(element)
document.querySelector('body').appendChild(new_elem);
Notes
You cannot append <script> tags using innerHTML. You'll have to use appendChild.
If your page is strict xhtml, appending a non strict xhtml will trigger a script error that will break the code. In that case you would want to wrap it with try.
jQuery offers several other, less straightforward shortcuts such as prependTo/appendTo after/before and more.
To copy HTML from one div to another, just use the DOM.
function copyHtml(source, destination) {
var clone = source.ownerDocument === destination.ownerDocument
? source.cloneNode(true)
: destination.ownerDocument.importNode(source, true);
while (clone.firstChild) {
destination.appendChild(clone.firstChild);
}
}
For most apps, inSameDocument is always going to be true, so you can probably elide all the parts that function when it is false. If your app has multiple frames in the same domain interacting via JavaScript, you might want to keep it in.
If you want to replace HTML, you can do it by emptying the target and then copying into it:
function replaceHtml(source, destination) {
while (destination.firstChild) {
destination.removeChild(destination.firstChild);
}
copyHtml(source, destination);
}
Few years late to the party but anyway, here's a solution:
document.getElementById('your-element').innerHTML += "your appended text";
This works just fine for appending html to a dom element.
.html() and .append() are jQuery functions, so without using jQuery you'll probably want to look at document.getElementById("yourDiv").innerHTML
Javascript InnerHTML
Code:
<div id="from">sample text</div>
<div id="to"></div>
<script type="text/javascript">
var fromContent = document.getElementById("from").innerHTML;
document.getElementById("to").innerHTML = fromContent;
</script>

How can I modify the returned value of jQuery's html() method?

I have a div that I want to write to a popup window (for printing).
I'm grabbing the contents of the div's I want on the page using jQuery's html() function like so:
function printOptions() {
var printwindow = window.open('', 'Report', 'height=600,width=600');
printwindow.document.write('<html><head><title>Report</title>');
printwindow.document.write('</head><body>');
printwindow.document.write($('#ReportHeader').html());
printwindow.document.write($('#ReportData').html());
printwindow.document.write('</body></html>');
printwindow.document.close();
printwindow.print();
return true;
}
However, before I document.write() the contents of the #ReportHeader and #ReportData div's, I would like to alter them a little.
Specifically, I would like to replace all textboxes with a simple span containing that textboxes value.
Something like:
$("input[type=text]").each(function() {
$(this).replaceWith("<span>" + $(this).val() + "</span>");
});
How can I do that to just the contents of those divs without altering my existing page? I just want to modify what I'm going to be writing out to the print window. I don't think I can select on what the html() returns though, because it is just returning a string.
I do ~not~ want to modify the original page that is launching the popup. Just the contents of what I'm going to be writing to the popup.
Any ideas on how I could do this?
You can use .clone() to do it efficiently, like this:
printwindow.document.write(
$('#ReportHeader').clone().find("input[type=text").each(function() {
$(this).replaceWith("<span>" + $(this).val() + "</span>");
}).end().html()
);
This gets a copy of the original #ReportHeader and its children so you can manipulate them how you want without modifying the original, as well as not enduring the expense of html string -> node conversion, which is compartively quite expensive.
You can do whatever you want to the div via the regular jQuery selectors and modifiers.
var $reportHeader = $($('#ReportHeader').html());
// Remove some div
$reportHeader.find('div.to_remove').remove();
// Now use $reportHeader.html() to add the modified contents to printwindow
You can clone the content, then perform the replacements, then write it:
var cloned = $($('#ReportData').html());
Using the $('html string') function:
http://api.jquery.com/jQuery/#jQuery2
To replace all inputs with static span elements, you can do something like this..(not tested)
$(":input").each(function() {
var parent = $(this).parent();
var val = $(this).val();
$(parent).remove($(this).append("<span>" + $(this).val() + "</span>"));
});

jQuery: load method reload same div in div?

i'm a little confused.
i want to actually reload the same page and fetch a div with a certain id from it. so i'm trying to reload a part of website into the same part of the website. ;) i know it sounds weird.
somehow i don't get what i'm doing wrong or better how i have to do it.
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view");
so in this case the same div gets loaded into the same div and that's not what i want.
it then looks like:
<div id="#server_view"> <div id="#server_view"> blabla</div> blabbla </div>
i actually just want to grab the contents of the div inside and reload them. how can i solve this little problem.
You can grab the children with the selector you're passing to .load(), like this:
var $sv = $('#server_view');
$sv.load('/server/ftp/' + goToURL + " #server_view>*");
All we're doing different is getting all direct children to insert using the > child selector.
use .get and replace the element
$.get('/server/ftp/' + goToURL, function(response){
var newContent = $(response).find('#server_view').html();
$('#server_view').replaceWith( newContent );
});
Simple end fast.
$( "#content" ).load( "# #content>*" );
if you are using $('#server_view');, you must have DIV ID as server_view, not #server_view

Categories

Resources