Is it possible to use Ajax / jQuery to load content on a local application (intranet)?
I'm thinking navigation div + changeable content div (multiple content html's).
Since I'm a beginner, this might seem like a stupid question but I appreciate all answers!
Regards
//Albin
it is possible to change content of div or any other element (that is the purpose of AJAX anyway).. you can try using jQuery
$('div').load('url');
the content of the URL is loaded into the div...
sure it is possible, because you just download jquery.js (script, whichs is framework). So you can make all needed changes.
Yes you can do this, the url can be a local relative or absolute one, it doesn't have to include a domain.
Related
Does anyone know how to load content into a div of external HTML page with jQuery?
Using $('#divname').html("content") only seems to be able to access div elements of the HTML page where the script is in.
If I understand correctly you want to change the content of a DIV of an external page like for example an iframe?
If so, this can't be done with simple jQuery due to security reasons
You can use load() to load all content , or target specific content from remote page into an element in local page. load() is an AJAX method. Do a little research on AJAX
$('#myDiv').load('remotePageUrl')
Or to only get part of the remote page
$('#myDiv').load('remotePageUrl #remotePageID')
API Reference: http://api.jquery.com/load/
Found it! This is what I needed:
access div in iframe parent
I thought I didn't matter that it was a child-parent relationship as long they were in the same domain, but apparently it does.
Thanks for the responses!
$.get("test.php", function(data){
$("div").html(data);
});
I want to lazyload some of the images on a page. Therefore I need to put the image url into a data-url attribute, but my <img> tags are generated by wordpress:
So I'm thinking to use js to change my <img> tags before the page loads - However, will the HTTP requests for the images already have been made [or put in a queue] by the time my js script runs?
(I know its a rather hack solution, but I can't work out a better way to change the wordpress generated <img> tags)
Rendering is synchronous, so yes, your images will have already been processed/requested by that point. I found a really good resource for understanding this here:
http://taligarsiel.com/Projects/howbrowserswork1.htm#The_order_of_processing_scripts_and_style_sheets
I hope that helps. :)
Does anyone know how to refresh a particular div in a page, i dont want to load whole page but one certain div. is it posible?
While I'm still in the process of learning myself, I think what you're essentially talking about is AJAX. The jQuery library gives you a number of ways to make AJAX calls, some high level, some low level. Search the jQuery home page for .load() for a high level solution and .ajax() for a lower level solution.
No its not possible, but you can use ajax to update content on the div(not exactly refreshing).
Edit: you can use simple javascript to complete an ajax request. In ajax a request is sent to the server which sends some data back which can be used to update the html inside the div.
www.w3schools.com/ajax/default.asp
It's called jquery. It's a javascript library to make many functions easier to write with less code. Ajax is a part of it and what you use to make Http requests to get dynamic content into a div.
If you dont want to reload the whole page then you may use jQuery Ajax.But using this you can only change the content of div tag without refreshing the whole page
Ajax is your best bet, but it isn't something exclusive to jQuery. if youre not using jQuery anyway, you will find it more efficient to write the scripts yourself instead of loading the entire jQuery library along with your site.
It's Very Easy to Do with jQuery and PHP (AJAX), you can load new value from database or anywhere from webpage you want and also you can set the time interval do check out this link:
http://phphere.blogspot.com/2013/12/how-to-refresh-particular-div-in.html
Here is a way, tell me if it works:
<html>
<head>
<script>
$(document).ready(function(){
$.post(
"anotherpage.php",
{"field":"value"},
function(r){
if(r!==''){
$(".replace").html(r);
}
});
});
</script>
</head>
<body>
<div>Some text</div>
<div class="replace">Default Text</div>
</body>
</html>
I think this option is not avaiable, but maybe you know some strategies for doing it!
I'm on http://www.mydomain.com, and I put an iframe with jquery of another domain :
<div id="myContent"></div>
$('#myContent').html('<iframe id="myFrame" src="www.anotherdomain.com"></iframe>');
Well, the page that I load, www.anotherdomain.com, it's mine, so I can add any kind of code!
What I'd like to do is set the height of myFrame regard the real size of the loaded page (which I can't know, it can changes during the time).
Is there a method where I can comunicate to the parent DOM (mydomain.com) the size of the inserted page (anotherdomain.com)?
I don't know it, I dubt so, but why don't ask.
You can send messages (such as the height of the frame) between iframes on different domains using postMessage: https://developer.mozilla.org/en/DOM/window.postMessage
The only solution I found for that was to pass iframe height via url. You can find my test here :
http://jsfiddle.net/Grsmto/nBWrJ/2/ (updated)
This solution works cross browsers (chrome, ff, ie all versions, mobile etc.) and cross domain.
You MUST have access to the iframe code itself AND the iframe host.
You can refresh the iframe height when you want (even if content change) just by calling the publishHeight() function inside your iframe.
This should work without jquery (mostly writen in pure javascript...).
The only inconvenient is that you will have the height in the url like :
http://www.yourdomain.com/index.html#1458px
But you should easily remove it or change it to something less ugly.
EDIT : It seems that Disqus and Twitter use this library to do that : http://easyxdm.net/wp/
EDIT 2 : On your page you put the code on the first jsfiddle page. In your iframe you put the code of the iframe (the red div "myiframe" in bottom right). Hope it's clear...
But check my link below it should be a better and easier solution.
Cross-domain communications are very limited, and impossible depending on the on the remote host. http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ You can use JSONP to try and retrieve information from the remote site, but its very trying and not for beginners.
The work around that I found that worked for me was I used a server side language instead to include the remote file. so instead of < iframe >
I did a PHP server-side include like:
<?php include 'http://www.example.com/file.txt?foo=1&bar=2'; ?>
This of course only applies if you are using PHP. Once I included it that way I was able to manipulate the DOM elements.
Is there a way to use an iframe or some other method of showing a named div from another website?
I want to pull in some data from a government website into a google map and when they click the point I want the information from one of the divs on that page to display.
Using JQuery, you should be able to exactly that with the load-function.
Here is a small example to get a container with id "container" on a page called Test.html:
$('#contentDiv').load('/Test.html #container');
You can visit the JQuery documentation here for more info.
I take assumption that you are sure of div's ID in that other website.
If yes. use Jquery Ajax to pull the site's content into a hidden iframe in your site. then fetch the content of the div-in-question into some variable and then you can use it for your purpose (parse html table data or do whatever)
Discard the iframe's content so that you don't have unnecessary items in your page's DOM.
Ajax Call
In-House Service to Scrape the HTML from the page
Select the div with xpath / SGML parser
Return to ajax call-handler
Replace the content of your div
However There are other problems, i.e. scraping someone's site for their content without their permission is BAD.
They may or may not care, but still you should seek permission, or one day you could find your webserver blacklisted from their site. Or worse... Especially a government site.
You should probably go about figuring out how to properly obtain the data you need (perhaps there's an api somewhere) and then render your own version.
You would have to make use of either JSONP or a middle-agent to retrieve the data (i.e. a PHP script using the CURL library).
JSONP functionality is included in numerous Javascript libraries such as MooTools and jQuery. That is the method I would use.
MooTools: http://mootools.net/docs/more/Request/Request.JSONP
jQuery: http://docs.jquery.com/Release:jQuery_1.2/Ajax
Once you have retrieved the body of the page the DIV resides on, you could use REGEX to extract the information from the specific DIV element.