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
},
});
Related
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 );
});
});
I have a mediawiki where I would like to get the content from into another page. So I have:
http://bourlo.net/wiki/index.php/Lunet
And would like to display parts of this in a bootstrap modal on another page:
http://bourlo.net/stack/
The heading of the wiki page is retrieved by:
$("#wikiModal h4.modal-title")
.load( "http://bourlo.net/wiki/index.php/Lunet .firstHeading");
That works, yeah! But I don't want the complete
<h1 id="firstHeading" class="firstHeading" lang="nl-informal">Lunet</h1>
In the <h4> from the modal, but only the content >>> Lunet
How can I do this?
You need to use other ajax method instead. For the example:
$.get("http://bourlo.net/wiki/index.php/Lunet", function(html){
var txt = $(html).find('.firstHeading').text();
$("#wikiModal h4.modal-title").text(txt);
});
So you want to extract the text only from your ajax returned text:
$.get( "http://bourlo.net/wiki/index.php/Lunet", function(html){
$("#wikiModal h4.modal-title").text( $(html).find('.firstHeading').text() );
});
That's because you with .load(), you cannot manipulate the responseText before inserting into the DOM. Let's acknowledge that you can actually do something like this:
$h4 = $("#wikiModal h4.modal-title")
$h4
.load( "http://bourlo.net/wiki/index.php/Lunet #firstHeading", function(){
$h4.find('#firstHeading').replaceWith(function(){
return $(this).text();
});
});
This is definitely more clumsy. But I bothered to put this out because, once in a while, you're constrained to use the .load version instead of the .get version by factors beyond your control.
I want to add some arguments to all images in a website, but these are dynamic.
Unfortunately the (only) way I have to do this would be by intercepting the image before loading. Javascript would be the only way to go here since I can change the header.
Any third party libraries like jquery are not an option.
Something like:
http://www.example.com/acme.jpg
Would be captured and transformed into
http://www.example.com/acme.jpg?v=120
The way I see it javacript would have to be, inline, in the header of the page, before the images start to load. I don't need to change the html itself, only intercept when the browser calls the image and tweak it a bit as ilustrated.
Is this possible?
You could try this jquery solution :
$(function() {
$( "img" ).load(function() { // select your images here
var src = $( this ).attr("src");
$(this).attr("src", src + "?v=120" ); // set the new url here
});
}
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.
I am sending an ajax request to one of my controller to update the user interaction (which page he visits/likes) for an very insight analytics. I am storing these information in my mongo db.
All I want is, on success of this request, delete this script. But all the alert works, but the script never deletes. The following is my code
<div id="delete_this">
<script>
$(document).ready(function() {
$.ajax({
url: weblink+'user-interactions',
type: 'POST',
dataType: 'html',
data: {
//some post data
},
})
.done(function(html) {
alert("works");
var status = "executed";
alert("works here");
$("#delete_this").remove();
})
.fail(function(html) {
console.log("error");
});
});
</script>
</div>
WHAT I HAVE DONE TILL NOW:
1) tried with adding a div as the parent and pointing to delete that div as shown in script.
2) separated out the .remove() from the script into a new script tag and used something like this.
<script>
$(document).ready(function() {
$("#delete_this").remove();
});
</script>
tried to specify the parentnode and delete the child.
I failed in all three attempts. I am really stuck out here.
Any reasons why it is not working?
I also have another question relating to this.
This link says that the javascript stays in the session till the page is refreshed. So why are'nt we following a standard where we can execute the scripts and delete them
By doing so, we will be able to achieve building a bit more secured webpages. Is'nt it?
You could use plain Javascript to do this (not tested this)
var domNode = document.getElementById('delete_this');
var nodeParent = domNode.parentNode;
nodeParent.removeChild(domNode);
Not sure this is ideal but it should remove it completely from the DOM.
This works :
<button>remove</button>
<script id="test">
$( "button" ).click(function() {
$( "#test" ).remove();
alert("removed " + ($( "#test" ).length == 0));
});
</script>
try it here: http://jsfiddle.net/4ungb/
So either you have a) other errors that prevent that script to complete or b)
your criteria for testing deletion is not correct.