How to dynamically load external page content - javascript

How and what would be the best way to go about dynamically loading page content? (load new content without whole page reload / refresh using div container )
I have a gallery page and want to load only the new gallery content from other pages I will be making in the future. I will be using the pagination bar to load the content. Preferably without hashtags in address bar. I'd appreciate any help. Thanks.
Here is the gallery page I'm working on.
http://www.hlipublishing.com/nmg/index.html
Below are examples of what I'm looking for and caught my attention.
http://www.unheap.com/
Rethinking Dynamic Page Replacing Content and Doc Template from CSS-Tricks.

Try using ajax:
$.ajax({
url: url,
data: prameters,
dataType: "html",
type: "post"
success: function(result){
//append your dynamic image here
$("#gallery").html(result);
}
});
On the success part, the result should return the html for your images. Then you're free to append it anywhere on your page. This whole process won't reload your page or add hashtags to your URL(unless you used an <a> tag as trigger to your ajax)

$.ajax() is your answer. Basically, what you want to do is:
Write a script that will return JUST the inner data (what goes inside section.portolfio) for one page. Ideally, you can use a function to check if the call is from AJAX, and return only the inner data for ajax, or the full page for normal requests.
Write a .click function for your pager that will grab the page # you want to view (from a rel tag, href tag, pretty much anything)
Within the .click function call $.ajax() with the url for your script, the data for the page, and a success function to handle the return (which should accept the returned data in the format you specify. I would guess 'html'. This function should clear out the current content and refill the section with the new content.
As an aside, one problem with your current filtering system is that you only filter the content from the page you're on, meaning you can end up with less than a full page of results even when there are more results. If you expand your function to also accept filter parameters, you can pass both the filter and page in the AJAX request to achieve a nicer user experience.

Related

Is it possible to make changes to a page source content variable through Ajax

Is it possible to make changes to the page source content through Ajax loaded by a jsp include in the main jsp ?
If not is it possible to reload that portion of the page alone (the jsp that loads some of the content) and to have a portion of the content in the page source changed ?
Details:
I've a variable called page this var gets its content from a java controller as a map of <String key,map<String key,String value>then it performs multiple actions and adds different params to the map, convert it to JSON and sends it to a jsp.
Recently I wanted to do something different,I want to add a param to the 'page' variable called contentOfThePage this variable gets its content dynamically when the document is fully loaded, after that I perform an Ajax request to the controller to add the new param, but the problem is that the new changes never makes it to the page source unless i reload the page or i navigate to another page and this is causing a lot of trouble as the page source may contain the page content of the previous page!
Any idea on how to avoid this and make changes to the page source (NOT DOM) directly ?
keep in mind that the contents are added dynamically but i need a way to change the page source without impacting the performance by requesting a reload after the ajax request succeeded
First You want to update some data that is already there after page load
you already have a json so a rest call i assume
you call it using ajax
now you added something else that you want to change
Yes it can be done actually
but not with the present set
i assume you have a single jsp and trying to change that jsp
well fit whatever you want to change in a panel like a graph or anything else
Add a button to top of the panel and on click the button url must be to the rest call so then data will be updated
I too have faced a similar problem with graphs,
i needed the graph to give updated data without refreshing the whole page,
so i put it inside a panel and wrote a rest controller that gives data for the graph and put a refresh button that calls this rest controller. This let me then update the graph without refreshing the rest of page

Ajax call returning whole page

I have following page with some random tips: http://www.javaexperience.com/tips
I want to display the tips only on the other pages of website so I am making an ajax call and adding whatever returned by the ajax response to a Div's HTML.
The DIV html is:
<div id="tips"><div>
The ajax call is:
jQuery("#tips").load("/tips/");
The problem is that the ajax call results in whole page content to be added to div (since the page gets appended to the div, the above jQuery code gets invoked infinitely) where as I want to add only the tips section. Is there any easy way out?
This is the expected behavior of the load method, it'll always download the entire content. You can specify that a certain part of the loaded page be parsed and placed into the calling container.
jQuery('#tips').load('url #tip1');
You need:
$('#tips').load('ajax/test.html #container');
More info on load here

reload div without reloading page using javascript

I am currently just working on simple and final UI changes for a website I am working on and was wondering if someone could help me figure something out.
I have a page that has three divs on it and I was wondering how I could use javascript to reload the content of these divs without reloading the page when someone clicked on a certain link?
Thanks!
Use AJAX. Watch here
Or as suggested in other answers - use a framework or a library like jQuery which makes element selection and AJAX as easy as possible
in case you need to go to the server to get the content: read about AJAX. there is a good jQuery framework making ajax calls very easy.
if you don't need to go to the server just select the element you need and change his innerHTML value. again - you can select elements via jQuery in a more easy way.
To reload this div you can use ajax call.
With your ajax call, your get your data, without reloading the page, and then replace your div content with the new data.
something like that
$.ajax({
type : 'get',
url : 'urltogetdata',
success : function(data){
$('#yourdiv').html(data);
}
});
this code is jquery code, but it work with other lib

Refresh a webpage with following action

I want to do a very simple thing with AJAX. Apologize if it sounds very simple.
If I add some new data to my database from my client side JS page (with AJAX call) with a save button, then I want make the newer data visible with that button click as well. For this, I assume I have following options -
Refresh the page (which does not work for me since initially my table is hidden and refresh takes the page to its initial position. I also tried to refresh page and then added one action to make that table visible but unfortunately it just refreshed the page and did not perform the following action)
Refreshing the part of the page (that certain div) which I have no idea how to do.
So my question is -
Is it possible to refresh the page followed by other functions?
How can I refresh a div using JS?
Either of the solutions would be fine for me. Thanks in advance.
To refresh a div, as far as I know you need a php page to get the info you want to be displayed in there then use ajax function to put that page in there.
You can have the server side code return the contents of the div to change after the data is saved.
Using jQuery it's very easy to change the content of a div after making an ajax call.
$.ajax({
type: "POST",
url: "/someurl",
data: theDataToSendToTheServer,
success: function(data){
$('#theDivsId').html(data);
}
});
JQuery's html() attribute will allow you to update a single div via Javascript.
You can use JQuery's Post method to update the Server and/or retreive new data to refresh the div with.
Not using jQuery? It's still pretty easy.
document.getElementById('theIDofYourDiv').innerHTML = 'the new contents of your div, including <span>nested HTML tags</span> if you want, provided as a string';

AJAX - Reload a part of a webpage without the use of a separate file to load

Title might be a bit confusing, so let me explain.
I have a website that has a side-panel, which contains information about the user, things the user can do, etc. When the user is not logged in, this side-panel becomes the area for logging in or registration.
The code for this is:
<?php
if($user->loggedIn)
{
?>
<!-- side-panel for logged in users here -->
<?php
}
else
{
?>
<!-- login/registration etc -->
<?php
}
?>
What I want to do is load this snippet of code again when the user clicks login with AJAX, and use a jQuery effect (probably fade) that smoothly makes the side-panel transition from login/registration to the shiny users-only panel.
I know I could do this if I put that code in another file, and loaded it through AJAX into the div for the side-panel... but I would rather not make a separate file for the side-panel only. Is this possible?
You could load the page with an AJAX request and then strip out the data other than the side panel, but what would be the point? Your best option would be to simply separate the side panel into its own file.
Oh, and that would also be considered the proper way of doing it, so you can edit the sidebar without editing the pages it occurs on.
If i understand corectly what you neey, you may try this way:
$.ajax({
type: "GET",
url: "url", // replace 'url' with your url
cache: false,
success: function(data){
alert($(data).find('#sidebar').html());
}
});
Maybe will work with $.load() or $.get(), dunno.
Why are you opposed to keeping the side panel in its own file? Keeps things more modular and organized.
If you really are opposed to keeping the content in a file, you could put the content in a database and query for it when ever the AJAX call is made.
Could you pass a query string parameter to the page and then based on that only do a partial render(sidebar only) of the page?
Then just use your normal jquery/ajax method and include the query string paramater.
$.ajax(function(){
url: MyPage.php?sidebar_only=true
ect...
})
Assuming that you will be getting the actual user data through another call, you could use two divs. The div containing the html for the user panel starts hidden. When you get a successful login, hide the login div and show the user panel div. Using the data from the AJAX login, fill in the panel custom info. I assume the AJAX login call will return the necessary info to fill in the user name and what they can do. This just makes it so you don't have to pull in the html for the whole user panel.

Categories

Resources