PDA

View Full Version : ExtJS 4.1.3 How to handle when a visitor is redirected to my site with query param



nabarun
5 Jun 2013, 4:26 AM
When a visitor visits the site at the root, index.html is served and browser downloads js/css.

How to handle when a visitor is redirected from another site with query param? The server replies back json data based on the query param. How browser will download the js/css and render data for such visitor which bypassed root and hence never received index.html?

Arg0n
5 Jun 2013, 5:32 AM
You mean something like:

http://www.yoursite.com/index.php?id=1

Am I right? o.O

It depends on your .htaccess what happens than ^^

nabarun
5 Jun 2013, 6:31 AM
Yes, that is what meant. Given ExtJS4 starts with index.html, I don't know how to handle if a visitor enter through a different path. The different path happen to reply just a json object.

Arg0n
5 Jun 2013, 6:35 AM
Thats not ExtJS buuut nvm xD



RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.com(.*?)$
RewriteRule ^$ http://example.com/index.html [L,R=301]


Add this to your .htaccess and everything will redirect to your index.html.

BUT!

Parameters will be ignored. If you want to handle parameters... it's another topic =)

nabarun
5 Jun 2013, 2:11 PM
I need to handle the parameters. Some data will be retrieved using the parameter and then display on the browser.

Any suggestion?

evant
5 Jun 2013, 5:35 PM
// From http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var id = getParameterByName('id');
if (id) {
new Ext.panel.Panel({
title: 'Member'
});
} else {
new Ext.panel.Panel({
title: 'Not'
});
}

Arg0n
5 Jun 2013, 11:13 PM
Why don't work with hashbangs and hashes? Else it would call the backend first and would display json again. o.O

You can do it like jsduck does: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext

T (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext)hey use the #!, a so called hashbang ^^

It simulates an html anchor and it can be read with:


window.location.hash

Another great benefit is, that ExtJs has a small implementation for it: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.History
(http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.History)http://docs.sencha.com/extjs/4.2.0/#!/example/history/history.html
(http://docs.sencha.com/extjs/4.2.0/#!/example/history/history.html)

You can easily listen to the change (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.History-event-change) event of the history. It will fire every time the hash changes. =)

nabarun
6 Jun 2013, 12:13 AM
Evant,
I got some idea of how to do it. What is the best place to put this code? init method in the Application for parsing the param and making rest call followed by panel creation in launch?

Thanks,