I'm building a search using ext-js. I have an event that fires on keyup. I want to be able to change either the URL I'm searching, or the params. I've had luck with neither.
Here's my snippit of code:
Ext.get("search").on('keyup', function() {
proxy.url = '/customer/list?key=' + $('search').value;
store.load();
});
But, no love for me. The store loads, but the proxy.url is the old value. Is what I'm trying to do possible?
Thanks in advance!
You'd probably want to use the proxy.setUrl() method instead which internally updates the connection. If changing the params is sufficient, you could also try passing the params config into the load call, e.g., store.load({params: {...}});
Related
I have a page with multiple parameters in my URL. I am trying to write a function to use on the click of an element. I want it to check if parameter pthree exists. If it does, update it to a new value (not duplicate it). If it does not exist, append it to my current URL and reload the page.
I am running into an issue when I try to update the current URL.
My current URL structure:
mypage?pone=99.9999999&ptwo=-44.4444444&pthree=1&pfour=1&pfive=1
Controller snippet:
$scope.test = function (){
$location.search('pthree', 0);
}
This partially works. It updates my URL, but it adds #?pthree=0 to the end of my current URL.
The result I would like instead is:
mypage?pone=99.9999999&ptwo=-44.4444444&pthree=0&pfour=1&pfive=1
Any thoughts on what I could do to get my desired result? Thanks in advance!
Here is what worked for me. I found that I needed to set the HTML5 mode of my app. Read more about HTML5 mode here: https://docs.angularjs.org/guide/$location.
After this, I ran into another issue when calling $location.search({ pThree: '0' }. It started writing over all of my other parameters. For example, the URL structure was changing to ?pThree=0. To solve this I had to read all parameters, update pThree, and then write all back.
I hope this helps someone else.
You can do this pretty easily by just doing:
// existing url with params
// http://myurl.com/path/view/etc?param1=abc¶m2=def
// add your new param to the search() object
$location.search().param3 = 'ghi';
// set your search again with the updated search object
$location.search( $location.search() );
This will update your url like so:
// http://myurl.com/path/view/etc?param1=abc¶m2=def¶m3=ghi
I'm trying to build a custom URL and update the URL as the user selects items in my dashboard.
For example, after clicking a few items the URL could/should look like:
#/dashboard?&portfolio=GOOG&ticker1=GOOG
Currently the URL only ends in /dashboard (console.log($location.path());)
How would I update the $location.path() to add params like so? There's plenty of questions/answers and guides on getting params from the URL, but how would you update the URL in the first place?
Say if you want to add the following:
?&portfolio=GOOG&ticker1=GOOG
just organize your params in an object, like
var params = {
portfolio: GOOG,
ticker1:GOOG
}
and use,
$location.url('/dashboard ').search(params);
Hope it helps !!!
I think I'm understanding what you're saying. I believe you could use a PHP GET function to do that. A GET function in PHP will add the information you're trying to communicate to the backend to the URL, while the POST function does not.
I'm new to ExtJS. I'm working with ExtJS 5. I thought it would be an easy thing to find on google, but after a long search I didn't get a clear, understandable answer. I want to pass a parameter when navigating from one page to another, so I'm able to use the value of the parameter on the second page. I use the following method to navigate to that second page:
Ext.History.add('page2')
I have the parameter I want to send assigned to a var, so if it was possible to do it like below, I could do something like:
Ext.History.add('page2?parameter=' + variable);
Update:
I solved this problem by passing a cookie and retrieving it on the next page with
Ext.util.Cookies.set(cookieName, cookieValue);
and
Ext.util.Cookies.get(cookieName);
Do you mean something like this:
var itemId = record.getData()["id"];
Ext.History.add('item&id=' + itemId); // adding items
Ext.getCmp('page2').getLayout().setActiveItem(1); // go to page
You can set parameters by adding it inside a history.add(). Take a look on
Senscha Ext.History.
In ExtJS 5 the router is the right way to do this if you need back button compatibility.
Please read
http://docs.sencha.com/extjs/5.0/application_architecture/router.html
ExtJS apps are typically single page apps so when you go from "page" to "page" (actually just panel to panel), typically URL does not change.
As far as passing params when you open a new panel, you would just let your controller handle that OR set the param in the constructor of the new Panel.
Please paste some sample code and maybe I can provide a more precise answer.
-DB
I'm using select2 and fetching available options from the server with this query function
var recipientsTimeout;
this.loadRecipients = function (query) {
clearTimeout(recipientsTimeout);
recipientsTimeout = setTimeout(function(){
data.transmitRequest('lookupcontacts', { search: query.term }, function(resp){
query.callback({ results: resp.items });
});
}, 500);
};
It uses our own ajax layer, and delays searching until the user stops typing, and it works fine. The only small issue is that if the user types some text, then immediately backspaces over it, my last timeout will still fire, and an ajax request will be fired, and ignored. This doesn't cause any problems, but it's less than optimal.
Is there any (preferably non-brittle) way to fetch whatever the current text is? It seems as though the query object sent in has an element property, which is a jQuery wrapper of the original hidden input I set select2 up with, but there's no direct way I can see to get the actual textbox that the user is typing in. Obviously I could inspect it and easily figure out the dom pattern and build up a selector from the hidden element back to what the user is typing in, but I really hate doing that, since the specific layout could easily change in a future version.
So what is the best way to get the currently entered text, so I could do a quick check on it when the setTimeout expires, and I'm about to run my ajax request.
I'm using 4.0.3 and the way I did it is this:
$("#mySelect2").data("select2").dropdown.$search.val()
The hidden input element (where you initialize select2 on) gets a data property select2, which contains references to all elements, that are used by select2. So you could do something like this:
var hiddenInputSelector = '#e1',
select2 = $(hiddenInputSelector).data('select2'),
searchInput = select2.search;
if($(searchInput).val() === '')
clearTimeout(recipientsTimeout);
This is not in the docs though, so it might change in the future.
In select2 version 4.0.3 this works for me, whereas the others did not:
$('.select2-search__field')[0].value;
I do something like this to get the current search term:
list.data("select2").search[0].value;
I'm a little confused about how History.js works at page-load. I've done a few experiments but the results seem indeterministic.
My website is a search engine and the query is stored in the URL parameters: ?Query=cats. The site is written purely in javascript. History.js works great when I do a new search, the new query is updated, and the state is pushed.
My problem is how to create an initial state if the user manually enters in a URL including a Query parameter. Every way I try to do this ends up resulting in running the search query twice in some case. The two use-cases that seem to conflict are:
User manually enters URL (mydomain.com?Query=cats) into address bar and hits enter.
User navigates to an external page, and then clicks the back button
In both cases, the javascript loads, and therefore looks to the URL parameters to generate an initial state.
However, in the second case, History.js will trigger the statechange event as well.
Necessary code:
History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
var s = History.getState();
if(s.data["Query"]){
executeQuery(s.data);
}
});
and in $(document).ready I have
// Get history from URL
s = getQueryObjectFromUrl(location.href);
if(s["Query"]){
History.pushState(s,'',$.param(s))
}
Is there a better way to handle creating an initial state from URL parameters?
As I had a similar problem to to yours, what i did was to define the function bound to a statechange as a named function, and then all I had it running when the page load as well.
It worked better than trying to parse the URI or anything else, hope it helps.
This is the way I chose to do it (based on Fabiano's response) to store the initial state parameters
var renderHistory = function () {
var State = History.getState(), data = State.data;
if (data.rendered) {
//Your render page methods using data.renderData
} else {
History.replaceState({ rendered: true, renderData: yourInitData}, "Title You Want", null);
}
};
History.Adapter.bind(window, 'statechange', renderHistory);
History.Adapter.onDomLoad(renderHistory);
Of course if you are using a different on DOM load like jquery's you can just place renderHistory(); inside of it, but this way doesn't require any additional libraries. It causes a state change only once and it replaces the empty initial state with one containing data. In this way if you use ajax to get the initData inside the else, and it will not need to get it the next time the person returns to the page, and you can always set rendered to false to go back to initial page state / refresh content.