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
Related
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
In my project I have two Asp.net pages. The first is the main page and the second is the backend script page. When the user clicks the first page javascript will call the second page and should alert with a message like "Please confirm." but javascript is returning the whole html tag from second page. It doesn't return only error. How can I show the error from second page to render it in the first page? Please help me
1.Javascript code
http://www.mx7.com/view2/yCsMjYCaDlYctvSe
2.Return html whole second page
http://www.mx7.com/view2/yCsMmssWC8MkqLH8
Dont use Ajax call $.post instead submit your form with form tag. This will fix your issue.
if you want to use $.post method change your server page to retun only alert data instead whole page.
I have a page linking to another separated page on the server. I would like to present a loader that finishes exactly when the second page is fully loaded. I dont use AJAX to call the second page, but a simple GET action. Is there a way to control that?
an example would be at: http://m.elal.co.il when you click on one of the buttons.
Thanks
I think the best way here is to preload page with ajax and then push all content of second page to body tag of this page.
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.
So what I want to do is load only a section of one webpage onto another page. So I want to grab the content of a page (stuff inbetween a div with a certain id) without the headers and footers. I know I've seen this before but its, stangly, a hard thing to find.
Anyone kind enough to point me in the right direction?
thank you
You can use the jquery's load method for that.
$('#result').load('test.html #container');
This will load contents of element having id container from test.html page into current page and inside the element with id result.