Is it possible to retrieve a div ID from another file via a javascript from one file.
Example:
Lets say you are editing index.html and want to retrieve an ID, using getElemntById from page2.html.
I understand that you can use document.getelementbyid; if you want to get the id from the same document, but is there anything you can use to get it from another document?
Thanks in advance
You will have to make an AJAX call to page2 first.
Paste the response of XMLHTTPObject in some invisible div.
Then get the required div that you want to retrieve.
Personally, I would create an include file with the content you require on both pages, and include it on both pages. Then it would just be a matter of showing/hiding the div.
You can do this fairly easily with AJAX - you have to make an asynchronous call to page2, and then process the response to get the element you're looking for. Look up jQuery's get() method for an easy AJAX implementation - it handles the details of the XMLHTTPRequest for you.
It's also worth noting that if page2 is a page served by your server, an even easier solution is just to copy whatever information you need from page2 to page1 on the server side. Alternatively, if you do need to do an AJAX call because it isn't feasible to put all the information you might need onto page1 from the beginning, you can have your server (using php, Rails, Django, etc.) return different information for an AJAX call. So you can have it return only the info you need, rather than returning the entirety of page2.
Related
I am new to Ajax and web development in general. When I googled Ajax, a lot of sites (like here) said that one of the key features or Ajax is that you can dynamically update content on the webpage without reloading it.
My question is this: can't you just do this by using document.getElementById("...").innerHTML = "whatever you want it to change to"? I know that with Ajax you can make requests to a webserver and whatnot. That is not my question. My question is that why do people claim that changing a webpage without reloading it is something special about Ajax when you can do it with normal JavaScript?
And also, in the link above, it said that with Ajax you can "request/receive data from a server - after the page has loaded". Why "after the page has loaded"? Is there another way to request/recieve data from a server while the page is still loading?
Thank you!
My question is this: can't you just do this by using
document.getElementById("...").innerHTML = "whatever you want it to
change to"?
You can indeed change the inner markup of dom Element instances using this property.
I know that with Ajax you can make requests to a webserver and
whatnot. That is not my question. My question is that why do people
claim that changing a webpage without reloading it is something
special about Ajax when you can do it with normal JavaScript?
Javascript is client side. Ajax is special in that it requests data from a server so you can use it in the client (javascript).
Javascript by itself (understand, without the XmlHttpRequest object) does not allow that. All you can do is client side dom manipulation, not knowing what's on the server side (which means, among other things, no access to shared databases)
And also, in the link above, it said that with Ajax you can
"request/receive data from a server - after the page has loaded". Why
"after the page has loaded"? Is there another way to request/recieve
data from a server while the page is still loading?
Yes.
jsp, php, are two examples of server side languages. When you request http://page.php (for example), the server routes the request to the *.php interpreter. The code inside the page is then used to generate http headers and html content back to client. This is a round trip that happens every time a page is accessed. The page is first loaded using this system.
Ajax allows you to proceed with subsequent calls to any php script, while the page is already loaded.
ajax is a way of loading data from the server without reloading the entire page, innerHTML is one way of injecting that data into the page...so ajax is a way of communicating with the server while, innerHTML is a way of manupilating the page.
Hello here is the key deference between ajax and document.getElementById().innerHTML is
AJAX
AJAX will load the content when you want to change for the perticuler div and change the content the content are not stored in any where in current web page
document.getElementById().innerHTML
Where when you want to change the content without ajax then you need to store the content in any javascript variable or in hiddent html so it will load the content if you want to show or not.
i have two pages, lets say:
webpage1.com, and
webpage2.com
webpage1 contains
page.html - contains reference variables in accessing the proper data stored in webpage2.com. one reference variable may be stored in localStorage
webpage2 contains
page.html - contains the layout of the whole webpage
page.php - contains the information being worked at behind the scenes, also this guy should fetch the data i send from webpage1.
i know you guys may say something like ajax is the way to go. but webpage2 is already using an AJAX function on its plugin (yes webpage2 has a plugin that i need), so ajax is already not an option as for me. i also tried passing a string parameter on the url but webpage2's page.php just won't respond on $_GET when i try to fetch it.
i'm thinking of something like a variable that is capable of being shared cross domain. like for example cross-domain localStorage, or cookies, or $_SESSION.
lastly, webpage1 and webpage2 has a different server.
i hope you guys understood. thanks
Here we have a <div id="content"> and inside it AJAX loads data from the server. We have preloaded JS scripts in the whole file.
Some of the server's AJAX answers are whole forms. That forms have the same ids, but different structures. What is needed is to pick the data from freshly baked forms came from the server via AJAX, using JavaScript and create a kinda queryString to send its data again to the server via AJAX itself.
What has been tried:
I put a code which is getting data from the form on the page using JS. It works great when the form is a static part of the page and i loaded within the initial DOM loading, but, after AJAX re-loading the real DOM is differ than that in the cache, which has been initially loaded with the page.
I tried to put JS code into the answer from the server with the form. But, it does not work as well. Even simple alert('Hello!') does not work.
I am new in AJAX so, please, do not judge me with all the severity.
Thanks!
If your issue is picking up only the latest baked forms, you can try the following approach:-
In each ajax call of the page, before setting the response content to the desired div, find all objects having class name called 'lastUpdated' (or any other unique class name that you can come up with) and remove all the lastUpdated class associations using the jQuery code
$('.lastUpdated').removeClass("lastUpdated");
Now set the response to the desired div and add the class 'lastUpdated' to this div alone.
Thus at any point of time,
$('.lastUpdated')
will help you pick the data from freshly baked forms came from the server
The clearest example of this I could think of is the Reddit Upvote/downvote buttons how when you click the button, the value for upvotes is updated, the upvote button lights up, and the page DOES NOT reload, you just stay exactly where you are on the page.
I am trying to make a feature similar to this and I can totally figure out how to do it with reloading, but I want it to not reload so the user experience isn't disrupted.
Is it possible to do this with php? or would I need to use javascript or something?
The action I would need it to perform would be a basic update query in the database.
This would be done with an Ajax call to your php script. Ajax is designed for these asynchronous updates and/or reloads.
Another way you can do this is with HTML5 WebSockets. You could have the client send a trigger to the server when the user clicks the upvote, and then the server could update and push back the data. It would, however, be a bit overfill for this.
If what you want to do is to contact a server to either send it some state or to retrieve some state from the server (or both), then you would use AJAX with javascript in order to contact the server without reloading the page. You can then also use javascript to update the state of your page after the operation. That is generally what the Reddit page you refer to is doing.
Conceptually, you'd set up your page like this:
Put the link on the page.
With javascript install an event handler so you are notified of a click on the link.
When the link is clicked, your event handler will be called.
Prevent the default behavior of the link so the browser doesn't navigate to a new page.
Then, in the event handler, send your data to the server using AJAX. You will obviously need a URL on your server and server process that can accept and process the data for you and return a value if you need to.
If you need the response from the server, then set up a callback function for when the AJAX call completes (this will be some indeterminate time in the future).
Then, if you need to change the current page in any way (like show one more upvote), then you can modify the current page with javascript to show that new state.
Ajax is easier to use with a library (like jQuery) that contains some ajax support code, but you can certainly implement it in plain javascript too.
Here's one example of ajax with plain javscript. You can find many other examples with Google.
This MDN tutorial on AJAX seems pretty helpful too to show you how it works.
You could use JavaScript to do this. Here's a quick sample:
Vote Up
Simple solution in JavaScript:
var el = document.getElementById("upvoteBtn");
el.addEventListener("click", onVoteClick);
function onVoteClick(e) {
e.preventDefault();
// do something
}
Here's a fiddle.
NOTE: I see you'd be updating the database. In that case, you would have to use AJAX in the onVoteClick function (or use XMLHttpRequest) for this. JavaScript is a client-side programming language and will not be able to communicate to the server without the use of AJAX or XMLHttpRequest. Using the jQuery library, you should be able to write AJAX pretty easy.
It's called AJAX.
With AJAX you can send a request in the background.
The easiest way is to use the jquery libary for this.
You can also output some data as JSON back to the script if you want to take some other actions depending on the result from that query.
A good tutorial is this one.
It also explains how this requests (called: XMLHttpRequest) work.
You need to use Javascript's XMLHttpRequest
You can use AJAX...
It allows you to use JavaScript (client side) to call server side functions. Here's a good example.
How should I proceed in achieving the following:
I need to get the data from another server which is a jsp page it has the data related to the information i want to show in tooltip. The code for this is working and I can make ajax call to get the response.
The concern is that I want the contents of qtip library to fit in the page since the page doesn't allow cross domain contents. If I will try to just reference the contents of qtip saved on my website(the domain is different from the page which I am using) it wont allow to do this. so is it fine embedding the contents in the main form or there is some other optimal way?
Similar question was asked:
How to display information returned by ajax call in a tooltip
If you can't reach cross domain via AJAX you can always uses an intermediary script (in your case Java) to output a buffer containing the information you want in the qTip.
Script calls digest.jsp?params=someparameters
digest.jsp fetchs the information from any domain it needs.
outputs the information in a buffer in XML o JSON
with javascript you parse the information an put it in the option attribute.
If it doesn't work for you nor you want to do it you can always relay in putting the information in each title="" attribute in each option.