I am trying to append an HTML file to a div recent created by a js script but I get an error in the jquery library,
the code here, create a div and I want to append room.html within :
var contenedor = $('PageLoaded');
$('#button').click(function(){
container = document.createElement('<div></div>');
container.setAttribute('class','container');
container.get("room.html", function(htmlexterno){
$(".container").html(htmlexterno);
});
How can I embed room.html into the div which I am creating?
You seem a little confused about the difference between native JS and jQuery methods.
container is an Element object. It has no get() method as that's part of jQuery. To fix this you could use $.get() instead.
However, given your usage, it would appear that $.load() is more appropriate here as your goal is to add content to the new element.
$('#button').click(function(){
let $container = $('<div class="container"></div>').appendTo('#yourSelectorHere...');
$container.load("room.html");
});
Related
I have
<?php
include('print.php')
?>
That echoes html code inside my document, and after I load it I can't access the divs by id with jQuery
$("#"+divId)
It doesn't work even from chrome's console.
I can access them with plain javascript
document.getElementById(divId)
If I hardcode the divs I can access them via jQuery.
Can anyone explain me why php-generated code is not accessible via jQuery?
You need to use $('#' + divId) inside your document load. It does not work from chrome's console because variable divId does not exist.
Try this:
$(function() {
var divId = Whatever your Div ID is;
var div = $('#' + divId);
});
In the end it proved to be a stuipid distraction, The fact that the content was dynamically generated on the server side was totally incidental. One of the divs contained a dot instead of a dash in the id ('#1.0'), so jquery was interpreting it as '#[id].[class]'
I am trying to read the particular contents of an child IFrame wrapped in a div tag from parent window. I am using
detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
with this I'm able to access the entire content of that frame. But I need to access only a portion of that content. The problem is that the div which wraps the content that I am looking for contains only class and no ID.
<div class="watINeed"> <table class="details"> </table> </div>
I am unable to access the content which is in a form of table (with no id and only class).
Any help.
Edit1: I need to access the content of the table to check for char length and also for some html tags present in that content.
You can do this either using plain Javascript (as mentioned by Notulysses):
window.frames['myIframe'].document.querySelector('.watINeed .details')
or using jQuery (since you aded jquery) by specifying the iframe's document as context to $:
$(".watINeed .details", window.frames['myIframe'].document)
In the latter case you've a fullfeatured jQuery object.
Note that in either case the iframe's document has to be on the same domain otherwise you'd run into cross origin issues.
Tested against jQuery 2.0.x
Update
If you're running the selector during page load of the including page, you'll have to listen to the load event of the iframe before accessing its content:
$(window.frames['myIframe']).on("load", function(){
// above query here
});
If your are looking for a vanilla Javascript, and your target div is a direct children of starting selector, it is a simple task
var detailsValue = window.frames['myIframe'].document.getElementById('result').innerHTML;
var target;
for(var i = 0; i< detailsValue.children.lenght; i ++){
if(detailsValue.children[i].getAttribute('class')== 'watINeed'){
target = detailsValue.children[i] ;
}
}
otherwise, have to write a recursive method to scrap all children of structure
As i wrote above, it can be done using the following:
document.querySelectorAll(".className")[0] or $(".className")[0]
those are basically the same as both return a list of nodes and the [0] simply means taking the first result from the list.
there are 2 things to pay attention to:
the iframe loads the content asynchronously therefore when you execute the query its most likely that the elements you are searching for did not load yet.
executing the code after DOM loads is not enough.
the solution is simply put your code in a block that executes once all the asynchronous content is loaded:
window.onload=function(){
window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
}
or the jQuery alternative:
$(window).load(function(){
window.frames['myIframe'].document.querySelectorAll(".watINeed")[0];
});
the second thing is, according to the page Here, you can access the iframe's document using contentWindow.document:
window.onload=function(){
window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
}
or the jQuery alternative:
$(window).load(function(){
window.frames['myIframe'].contentWindow.document.querySelectorAll(".watINeed")[0];
});
live example: Fiddle
I have for example such piece of html:
var html = '<p>Title</p><b>edit me</b><i>remove me</i>';
I want to change title in it, but do not want to use regexp or string replace
functions for this, because if title would match tag name, then html could be corrupted.
I now trying to adopt jQuery for this, because it seems capable, but in reality things not so easy. Here is code:
$( $(html)[0] ).text('New title');
console.log(html); // --> prints out original html with old title
Any idea how to make this code work if it is at all possible ?
html = $('<div/>').html(html).find('p').text('New title').end().html();
http://jsfiddle.net/bEUHN/
Note: There are 3 wrapper elements in the created jQuery object using $(html), for selecting the p element you should use filter method.
$(html).filter('p').text('New title');
I can understand basic javascript and jquery but I'm having a hard time understanding how to allow a user to see the source code of an element for example.
If I have an element on a webpage like this
`<p>Hi I'm an element</p>`
every body knows it will be displayed as this
Hi I'm an element
but I want a user to see this in its source code form
`<p>Hi I'm an element</p>`
How on earth is this done??
The basic idea is to get the HTML of an element, then show it somewhere as plain-text. We can use .html() to get the HTML and then .text() to output the same HTML as plain-text:
//on the click of a link
$('a').on('click', function () {
//append a container with the plain-text HTML of an element
$('body').append($('<div />').text($('form').html()));
});
Here is the demo: http://jsfiddle.net/YbJfs/
Note that this does not get the actual <form> tag, but you could place the form in a container, select the container, and then use the .html() if that container and you'll have the <form> tag as well.
Also, if you want to add the HTML to a form input or text-area, you can use .val() rather than .text().
Here is a demo: http://jsfiddle.net/YbJfs/1/
You can use...
element.outerHTML;
...though it isn't technically the "source code". It's the HTML rendered by the browser, which may have some differences.
Also, you need a shim for Firefox 10 and lower.
function outerHTML(el) {
return el.outerHMTL || document.createElement('div')
.appendChild(el.cloneNode(true))
.parentNode
.innerHTML;
}
to grab the html of an element either use native javascripts innerHTML, or if you want to use jQuery use html() method. Examples ...
javascript:
var html = document.getElementById('myOb').innerHTML;
jQuery:
var html = $('#myOb').html();
I have created a div using jquery and put some text in it:
var newdiv=$('<div id="content">').append('some text here');
$("#wrapper").append(newdiv);
Now I am trying to use the plugin masonry on the div.
I have added the following just below the above that creates the div:
$("#wrapper").masonry();
I have checked and jquery and masonry are loading correctly.
The new div called content shows in firebug correctly, but the masonry part is not doing anything to the new "content" div.
Any ideas?
Perhaps you should try adding 'appended':
var newdiv=$('<div id="content">').append('some text here');
$("#wrapper").append(newdiv);
$("#wrapper").masonry('appended', newdiv);
There's an append/prepend example here http://masonry.desandro.com/demos/adding-items.html