Gmail like ajax page refresh in liferay - javascript

We are a having search page(jsp) in our Liferay portlet which contains approximately 30 fields. When a person selects some parameter and press submit button then the action method is called and result are shown on the different jsp page. Which is the default behavior.
What we want to implement is that when a person submits the search form then the page must be ajax refreshed on the basis of those parameters.
What our understanding is that we can append the parameters in the URL and make the ajax call.Like in gmail if you do advanced search then the parameters are appended on the URL.
we can appended parameters into url so that when a user pastes url on the browser directly then a action method is called, jsp is loaded and then a java-script will read the parameters from the URL and fetch the proper data.
According to us the problem that we would be facing will be saving of the history in the browser so that whenever the page is changed due to ajax call and user clicks on the browser back button then the previous HTML state should be saved.
Is the above approach correct?
What could be the further issues that we can face while implementing the same?
How can we save the history so as to preserve the previous state?

This can be done by using the BBQ plugin. The BBQ plugin works on the hash tag change of the URL.
http://benalman.com/projects/jquery-bbq-plugin/

Related

Custom URI using javascript

I encountered a e-commerce website which does the following whenever a filter is applied on the product list page:
For example when you click a "subcategory = 2" (link with href="/productcategory/category1/subcategory2") on the product list page "www.example.com/productcategory/category1"
URI that is displayed in the address bar is changed to mimic the filter request without reloading the entire page. i.e. "www.example.com/productcategory/category1/subcategory2"
An ajax call reloads only a part of the page according to the filter applied i.e. product with subcategory = 2 are displayed.
But also when you enter "www.example.com/productcategory/category1/subcategory2" in the address bar a new page is reloaded as usual.
I am not able to achieve this particular behavior using rewrite rule because whenever I click on a link with href="www.example.com/productcategory/category1/subcategory2" it is redirected according to the rewrite rule and a entire new page is reloaded.
My question:
1. how is it possible to change the URL in address bar but not reload the page?
2. Is it possible to have a rewrite rule which only redirects a page only when you explicitly enter the url in the address bar and hit enter?
To update the url displayed by the browser, without reloading the page, you can use the JavaScript History API - examples here.
I'm not clear what you mean by the second part of your question, rewrite rules get applied when a request is received by the web server - the server doesn't know/care about how the request was triggered, but if you are using the History API to update the url in the browser then no requests get sent to the server, this is purely an in-browser operation.

HTML using jQuery to send a postback?

I am creating a website for a clothing brand but am still getting started with my web dev work. I have an index page with several clothing items on it. When a user hovers over the picture of the item then a hover over effect comes into play and a small "View Item" appears over the item. When the user clicks this "View Item" text it opens a new page with that particular page's info.
The part I am struggling with is how I send the parameter to this item page as I will need some way of knowing what item was clicked. Can I write a jQuery function that will fire when the text is clicked and perform a .post() method to the item.php page passing along the item ID ?
So it would be something like
$.(document).ready( function() {
$("#itemText").click( function() {
$.post("item.php", parameters);
});
})
POST isn't the proper protocol for that. Use GET instead.
GET is vary easy to use with HTML links; it is what happens every time you click a link on a website. Say the page is "products." If the user clicked on product 1, than the URL for that page could potentially be "products/?id=1" (or products/1 if you are using mod_rewrite). The "id" variable with a value of "1" will be available to the PHP via $_GET['id']. With that variable, you can retrieve the proper information based on the id.
POST is for forms where users are submitting fields of data or images. http://html.net/tutorials/php/lesson10.php
If you are attempting to build a pure Javascript solution, then that is an entirely different matter. In that situation you would use Hash tags or HTML5 History API to change the URL. When the URL changes, Javascript is notified, and then whatever actions can occur. However, based on the fact that you specifically said "POST" I am assuming you are using a server-side language like PHP.
If you are opening a new page, you should not POST. If you must POST, you should POST then Redirect, although since you are not actually performing an action I recommend just sticking with a GET request. This way the newly opened page can easily be refreshed and shared by the viewer.
The most elegant way is to use rewrite rules or a router on your server so you can communicate which item to display, for example: http://example.com/item/1/
However you can also just use a GET parameter: http://example.com/item/?id=1
If you need to communicate to Javascript that will be executed on a page you can also use a hash: http://example.com/item/#1
There are several options using GET depending on how you display the item information, and what server-side technology you use.

Set value in textbox in external website when user clicks link on my website

I have my own website. There is a link on my website which redirect me to the externel website. I want to know how to set value in textbox in that externel website when user click link on my website
Have you tried to save opened window handler?
var openedWindow = window.open(....
Instead of using direct links.
Or maybe pass parameters through url?
you can add parameters on the URL.
just modify the link accordingly, and read the URL parameter on the other site.
(this assumes you don't care the possibility that someone fills the parameters with fake info)
Unless that site has implemented something to let you set that (e.g. if they populate the text field using data from the query string), you can't.
There is no standard mechanism for pre-populating forms via a link to the page containing the form.

Dynamically change the URL of a Facebook Send Button

I am trying to dynamically change the URL of a Facebook Send button with Javascript, but I have had no success so far.
I have a page set up with a few inputs, and I would like the URL of the send button to take the fields value as parameters before it sends it. The problem is when I add the send button to the page, it generates the iframe code inside and even if I modify the href parameter later on, the iframe still keeps the original link in. I guess the solution would be to refresh the content of the send button somehow or add it after page load, once the fields have been completed, but I couldn't figure it out.
Thanks for your help.
You can try using the iFrame version of the like button instead the XFBML version. The like button can be post-loaded into the page after the form submission, via an AJAX call, in which you have passed the data filled up in the form.
You can't do this. Javascript can't be used to control an iFrame on a different domain than yours. This is due to the Same Origin Policy.
What you can do is change the parameters on you send button xfbml tag and then call FB.XFBML.parse(); so the button uses the new parameters.

Sharepoint: Submit form data from Edit form and then redirect to display form

This is for a custom Editform.aspx being used to submit data to a custom list. Once the user completes the form, he should be able to hit a button or even the OK button, and have sharepoint submit the form data to the list, then redirect to the items Display form (dispform.aspx?ID='itemid').
I was able to get the ID of the current item by manipulating document.location.href. I tried to do a postback in javascript using __doPostBack with __commit and __redirect (redirecting to the URL displayform?ID='itemid'), but when the redirect happens, I see that the changes were not updated!
Anyone able to do something like this?
You can get the form to redirect to any location after it's been posted by modifying the URL in the Source querystring parameter. Using javascript, you could look for a specific URL (/location/dispform.asp?ID=) in that querystring parameter and if it doesn't exist, redirect the page to itself, but with the Source parameter filled out to the location w/ ID that you want to send them to.
The hardest part will be parsing the current URL + parameters in javascript. There's some snippets of JS code I've found that make it a lot easier.
One of the bonuses of rewriting the EditForm URL this way is that the Cancel button will send the user to the DispForm page instead of where they originally came from, although most people probably use the back button.
This lead me to solve my problem of a Form Action on my DispForm that would not take the list item ID to the custom EditForm. The following ended up working for me:
onclick="javascript: {ddwrt:GenFireServerEvent(concat('__redirect={ProgEditForm.aspx?ID=+',$ListItemId,'}'))}"
Where I have a DispForm parameter for ListItemID with
Parameter Source: Query String
Query String Variable: ID
Default Value: 0
Hope that helps someone else as this was near driving me crazy!

Categories

Resources