I mean without requiring to refresh the whole page, Is it possible to load a part of html code through Ajax into the same division.
eg. If the user clicks on the PROFILE anchor (not having href) the anchor should generate request-object and load the content corresponding to PROFILE in the division below it??
Similarly if he clicks SETTINGS it should load settings details in the same division which was used to load the profile.
Yes you can do this. After you do the ajax call, once you get the response, you can bind it to the div. For this set some id to the div, do the document.getElementById('id').innerHTML = 'Your html response'.
Try exploring jQuery.
Hope this helps.
Related
I have tried everything I know to make title of header replicate items value, including substitution string &P10_TITLE_TEXT. inside headers title property. Generally, this would work for normal region, but in my case I try to modify value of pages main region, which is rendering first, before any other item. My assumption is that title text is not showing because it cannot see items value yet.
Is there a simple way to refresh title header after items are ready, or perhaps another better solution?
PS: This is main header of the modal dialog page, that has no property for setting static id, and it's template is less adjustable then normal regions.
Try the following javascript in "Execute When Page Loads" of the modal page:
$('.ui-dialog-title',parent ? parent.document : document).text( apex.items. P10_TITLE_TEXT.value );
Pre-Rendering computations may be the solution here.
You can try creating a computation before Regions under Pre-Rendering to set &P10_TITLE_TEXT.. There will be no need to "refresh". This is if you are simply loading it once.
If you are trying to set headers based on input every time you change it, I would advise separating into two pages so you can submit the page and APEX can reload and process, or just use javascript.
I'm trying to get the total number of the page (or the page value) of this URL:
http://scorelibrary.fabermusic.com/String-Quartet-No-2-300-Weihnachtslieder-23032.aspx
1/58
I think that I can't because the values are inside in the ASPX frame.
I'll try a lot of thing. This is the line:
<label id="page_count">1/58</label>
using the following XPath
//label[#id='page_count']/text()
How can I use XPath inside the ASPX frame to get the page value?
You are right, you cannot get that value directly because the element is in an <iframe>, and therefore lives in a different context. You need to activate or switch to the URL context of the iframe. There are JavaScript approaches like postMessage, but I think the easiest way is loading the URL of the iframe directly and access the DOM from there.
i need a jquery plugin where i want to load the module by default as HTML and upon clicking more link it should load the rest of the content via AJAX and then previous button should be enabled.
Currently when i google i can get lot of plugin which just load either via AJAX or Animation [by hidding the rest of the content]. But for performance issue i don't want to load all the content at one shot and then animation. So i want to load the 5 li's and upon clickiing "More" it should start loading the remaining content but it should also animation.
Could someone help me on this?
-- Bala
My advice to you would be to customize the jCarousel according to your needs. Specifically, when you render the page initially you can include the initial 5 elements of your carousel. Then, in the carousel's onchange event, once you reach the last slide you can use AJAX to pull in the additional images.
Depending on your needs, using jCarousel driven by a flat JavaScript array you could save some load time as the image URLs would be rendered in the original markup, but not downloaded by the browser until they are added to the visible portion of the carousel. No AJAX required. Here's a demo.
I'll explain:
I have a picture gallery, the first page is display.php.
Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.
So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night
I'll flip to the next one and the URL would be
www.mydomain.com/display.php?picture=The Big Ben
How do I do this?
The trick here are uri's with an anchor fragment.
The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.
The browser does not refresh if the resource is the same but moves to the anchors position when present.
This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.
Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.
Also kinda related to this topic is something called 'hijax', and it's something I really like.
This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.
You can use the jQuery history plugin for example.
changing the search of the url will load the changed url.
See also: stackoverflow, javascript changing the get parameter without redirecting
Do you really want to use AJAX here?
A traditional web request would work like this...
User navigates to display.php
User clicks "next" and location is updated to "display.php?picture=Big-Ben"
Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
User clicks "next" and location is updated to "display.php?picture=Parliment"
And so on.
With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...
User navigates to display.php
User clicks "next" and the next image location is obtained using an AJAX request
The image (and image description) is changed to the next image
What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.
this best describes everything i think: http://ajaxpatterns.org/Unique_URLs
I am new to ajax and i wanted to know if we can load a complete new page and not just a part of it using ajax. Please give a small example script for understanding if this is possible. Here i am trying to display only one url to user while i change from one page to another when he clicks on any of the links in the page.
You can of course request for a new page and load it via body.innerHTML = ajax.responseText;
I would strongly recommend against this though for reasons outlined in this post: Why not just using ajax for Page Requests to load the page content?
The whole premise really is that with
AJAX you don't need to reload the
whole page to update a small
percentage of that webpage. This saves
bandwidth and is usually much quicker
than reloading the whole page.
But if you are using AJAX to load the
whole page this is in fact
counterproductive. You have to write
customised routines to deal with the
callback of the AJAX data. Its a whole
lot of extra work for little to no
increase in performance.
General rule for where to use AJAX: If
your updating >50% of your page, just
reload, else use AJAX.
You will not only need to request for the new page, but then also take care of ensuring the old styles on the current page are removed and don't interfere with the new page. Theres all sorts of problems associated with what your trying to do. It's possible, but I recommend not to do it.
edit: actually you might be able to just do document.write(ajax.responseText) which should take care of overwriting everything in the document, including css styles etc. Though still don't recommend it.
When you're finished with processing the AJAX request simply use this JS line:
window.location.replace('<URL of the new page>');
This has exactly the effect of loading the new page via
....
When you make an AJAX request, a request goes off and brings you the contents of the URL that you have requested. Now technically you can do whatever you like with the contents (which could be HTML), you can replace any element within the DOM with it. Be careful however of replacing EVERYTHING on the page, you are more likely just going to want to replace what is within the tags.
If what you want to do is show one URL for multiple pages, AJAX is overkill. Why not just use an IFRAME?
This could be useful if your page was unsure if it was expecting back errors to be inserted onto the page or a "new" submission confirmation page. This can be used when you want to put a validation servlet (or whatever) in front of the submission servlet (or whatever). If the page always hits the validation servlet, you hide the submission servlet which actually performs the data update. In the case where the validation passes, forward to the submission servlet. The user never knows what happened in the background.
When the page gets a response back you could just look at the first portion of the response text and determine if it had a keyword set by the server, which means this is a new page. Remove the keyword from the text, and do document.write(ajax.responseText); as described previously. Otherwise insert the response text into your errorBox div and let the user retry submission.