from jQuery, I load a web page inside a div in my page:
$(document).ready(function () {
url = 'http://www.ansa.it/';
$("#box")
.html('<object data=' + url + '/>');
What can I do to get a reference to an element loaded in this div?
Example:
$('#IDToken1').val("CCCC");
Doesn't work. What can I do to access the element with id 'IDToken1' loaded from http://www.ansa.it in my div with id 'box'?
Thanks in advance
Max
You cannot when you use OBJECT to embed the document. You could use an IFRAME instead.
An embedded document is only rendered within another document (e.g.,
in a subwindow); it remains otherwise independent.
Reference: https://www.w3.org/TR/html4/struct/objects.html#h-13.5
It sounds like you need to use a GET request.
$(document).ready(function () {
url = 'http://www.ansa.it/';
$.get( url, function( data ) {
$( "#box" ).html( data );
});
});
Related
I'm trying to create a more generic local-storage setup for my application so I don't have to create a function for each time I add a new element to the page that I want to store in local storage. I have my jquery setup like so.
/* SET LOCAL STORAGE */
$( document ).on( "keyup",".localStorage",function(){
var id = $(this).attr('id');
if(id) {
id = "#" + id;
localStorage.setItem(id, $(this).val());
}
});
The part that seems to be having some difficulty, is when the page is loaded, looping through each ".localStorage" element and applying the proper data (somewhat like saving as a draft).
I can't seem to use jQuery's $each() function, as that doesn't work with elements loaded through $ajax().
So what's the best way to find elements on a page even if they are loaded dynamically? Any help is greatly appreciated. Thanks!
You CAN in fact access elements added dynamically to the page. I would just try something like this in your event code:
var elements = $('.localstorage');
for (var i in elements) {
doStuf(elements[i]);
}
I want to build a url, send the url and display the returned html page in a div or any block element on the same page.
Ultimately, what I want to do is send a request as soon as the user enters a name, create a div to display the response,
fill the div with the response, hide the div then display a button or tab for the user to click to see the returned document.
But for now I'm just trying to figure out how to get the response into a div on the same page.
This seems like a fundamental HTML activity but I can't figure out how to direct the returned page to a div instead of having it replace the original page.
I would prefer to do this with plain HTML5 and javascript, not JQuery, but if JQuery is the only way I'll tackle that learning curve.
<html>
<body onload="buildPage()">
<div id="documents"></div>
</body>
<script>
function buildPage() {
var name="somename" ; // this will eventually come from user input and be passed in
var documentName = name + ".html";
var url ="http://localhost:8080/docserver/getpage?name=" + documentName;
// create a div to display the requested document
var newDiv = document.createElement("div");
newDiv.id = documentName;
newDiv.style.visibility = "hidden";
// ... probably need to do something here to direct the url response into the new div
// nest the newDiv in the existing div
document.getElementById("documents").appendChild(newDiv) ;
//TBD create a button to display the returned document
}
</script>
</html>
It sounds like you want to make an ajax request, which returns html, then render that html in a div?
I would also recommend using jQuery if you are not. It will make your life a lot easier.
Your file(s) will need to look something like this:
HTML
....
<div id="mydiv"></div>
....
JQUERY
$( document ).ready(function() {
$.ajax({
'type': 'get',
'contentType': 'text/plain',
'url': 'path/to/your/script/',
'dataType': 'html',
'timeout': 50000
}).done(function (data) {
// success
$('#mydiv').html(data);
}).fail(function (error) {
// something went wrong
console.log(error);
});
});
For the sake of simplicity, Let's say your html that is returned is:
HTML
<p>Hello World!</p>
Your page (after the ajax request runs) will look like this:
HTML
....
<div id="mydiv"><p>Hello World!</p></div>
....
This should get you rolling.
To expand on my comment, this code will pretty much do it for you
$.ajax({
url: "mypage.html",
cache: false
})
.done(function( html ) {
$( "#results" ).append( html );
});
With really good supporting documentation found here http://api.jquery.com/jquery.ajax/
Thanks to all that answered my query. Especially jonny who did some impressive hand holding. I really don't understand JQuery so I wanted a pure html/js solution. Here is what I ended up doing.
function buildPage() {
var name="somename" ; // this will eventually come from user input and be passed in
var documentName = name + ".html";
var url="http://localhost:8080/FDS/documents?filename=" + documentName ;
// create a div to display the requested document
var newDiv = document.createElement("div");
newDiv.id = documentName;
//newDiv.style.visibility = "hidden";
// create an iframe to place in the div
var newIframe = document.createElement("iframe") ;
newIframe.src = url ;
// nest the iframe in the div just created
newDiv.appendChild(newIframe) ;
// nest the newDiv in the existing div
document.getElementById("documents").appendChild(newDiv) ;
The missing component was an iframe. I thought I saw JQuery using iframes in the tabs widget but I did not pursue that avenue until it looked like I was going to get only JQuery based replies.
So I'm trying to use ajax to put content into a div, and trying to have it change all internal links before it adds the content so that they will use the funciton and load with ajax instead of navigating to another page. My function is supposed to get the data with ajax, change the href and onclick attributes of the link, then put it into the div... However, all it's doing is changing the href and not adding an onclick attribute at all. Here's what I was using so far:
function loadHTML(url, destination) {
$.get(url, function(data){
html = $(data);
$('a', html).each(function(){
if ( $.isUrlInternal( this.href )){
this.onclick = loadHTML(this.href,"forum_frame"); // I've tried using both a string and just putting the function here, neither seem to work.
this.href = "javascript:void(0)";
}
});
$(destination).html(html);
});
};
Also, I'm using jquery-urlinternal. Just thought that was relevant.
You can get the effect you want with less effort by doing this on your destination element ahead of time:
$(destination).on("click", "A", function(e) {
if ($.isUrlInternal(this.href)) {
e.preventDefault();
loadHTML(this.href, "forum_frame");
}
});
Now any <a> that ends up inside the destination container will be handled automatically, even content added in the future by DOM manipulations.
When setting a function to onclick through js it will not show on the markup as an attribute. However in this case it is not working because the function is not being set correctly. Easy approach to make it work,
....
var theHref=this.href;
this.onclick = function(){loadHTML(theHref,"forum_frame");}
....
simple demo http://jsbin.com/culoviro/1/edit
I got a site where I want to pick up a value and save it in my script, but the value is inside a div on a different page. I have tried so many different things by now, and I cant get it to work.
Do anyone have a idea ?
Thanks!
if you are sure you have the cross-origin allowed , then just use load , and retreive that specific div
$( "#result" ).load( "ajax/test.html #container" );
where result is the div you want to store data inside , and container is the div on the other page.
will also save time and traffic to load the whole page using get.
http://api.jquery.com/load/
Try this:
$.get("pageurl",function(data){
$("yourdiv").html(data);
});
OR Better
jQuery.ajax({
url: "YourPageURL",
success: function(result) {
var html = jQuery('<div>').html(result); // Instead of div tag you can use specific id with div
},
});
I want to extract the src of the iframe which are present in a html page and save those in a file. I wanted to use jquery for doing this. Is it possible to write a jquery . Which one of php /javascript /jquery should I use for this.
Thanks,
Vinay
Try this
var ifrms = [];
$("iframe").each(function() {
ifmrs.push(this.src);
});
$.ajax(function(){
url: "urlOfThePage",
data: { sources: ifmrs }
});
First retrieve the source of each iframe element on the page:
$(document).ready(function() {
$("iframe").each(function() {
//You'll want to persist this value somewhere instead of alerting it.
alert($(this).attr("src"));
});
});
Once you have the iframe source(s), it's up to you how to submit them to the server. You could persist the value(s) in a hidden element in the form or use the .ajax() method of jQuery to post the form via AJAX.