I have a situation where I need to have a user select a region from a dropdown box.
Depending on the region selected a search form will load with information relevant to the selected region.
I tried this:
stackoverflow.com/questions/3760920/jquery-dropdown-loading-content
Loading all the forms at once really slowed it down, and there seemed to be issues with the javascript used in the search forms when all were present at once.
I think the ideal solution would be to load/unload the search into a div. I've tried several tutorials with limited success.
My most recent attempt was this tutorial:
http://www.milaju.com/post/simple-ajax-content-changer-with-ezjax
The search itself works fine as seen here by itself:
http://test.medialayer.net/test/modules/one.html
But loaded inside a div the search fields don't populate.
http://test.medialayer.net/test/
Thanks for any and all assistance.
The problem is window.onload=checkDataLoad;. You use AJAX, window.onload won't work with that, simply use checkDataLoad(), and see window.onload equivalent for Ajax applications?
Related
I have been following this example here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform which shows how to have a field that implements the auto complete dropdown with Google maps, and then when the user selects an address to fill out the individual form elements (Like street name etc..).
The address field will already be filled out in my case though so I just need to fill out the form elements when the page loads using this address.
I have tried
$(document).ready(function(){
fillInAddress();
});
To force it on start but the form elements stay empty. Does any one have any ideas?
Thanks in advance!
I think doing only fillInAddress(); might not be enough, you have to do something with the autocomplete too. However, since it is not open source or mentioned anywhere in the docs, there seems to be no way to do that.
One work around would be to use the Places web service API to get the same info. For more information about that please refer to this.
I am trying to call a page in my customers webapplication (Exact Synergy Enterprise)
This is the link: http://someserveridontdisclose/Synergy/docs/CSCANEduCourseCard.aspx?ProjectNr=ACPGINTV
Within this page is an Ajax TabContainer with several TabPanels. One of them is called 'Doelgroepen'
I dont have the source for this application, as i am not the developer of it. We only develop custom extentions to it.
Here's the question: Is it possible to focus on one of the tabs USING ONLY AN URL? If so How?
Thank you very much for your thoughts about this.
try to set with javascript. you'll have to write your own js to get index number you want from url, then set like this
$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(2);
http://forums.asp.net/t/1127834.aspx
http://www.aspforums.net/Threads/420684/ASPNet-AJAX-TabContainer-Set-Active-Tab-Client-side-using-JavaScript/
If you do not have access to the code and if this is not part of the requirement / design specification for the application you are using (ie: what you asked the developer to do), then the answer is No.
The control does not have "native" support for URL tab selection. There needs to be specific code in the application in order to handle this.
It is however very easy to implement, if you absolutely need it, it shouldn't take much time (about 15-30 lines of code, depending on how many tabs/urls combination you need).
You can find a running sample of the AjaxControlToolkit Tabs control at the following link (the available functionnalities are described in there):
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx
If the TAB has an ID you could make it visible by adding '#tabid' to the URL.
I have a doubt which involves an auto in a DIV (in which contains the name of other users with their image and age) when a user type the letters in a field that is positioned above the DIV.
As the auto search of Facebook friends.
Searching, I found a jQuery plugin that is the 'Autocomplete' but I want to modify to have the same behavior as facebook friend finder.
Does anyone have any example to do this? Or another way?
Note: I have a function in PHP that returns me all the names by letter. ¿I can consistently with ajax call this function to update the DIV?
jQuery UI has some nice built in functionality for that
http://jqueryui.com/demos/autocomplete/
You can either go the javascript way when retrieving the suggestions or you could do the ajax calls - that depends mostly on how many entries you have that are possible matches.
If you have too many, storing all elements in js might not be the best way to go.
HTML form has some text boxes and a drop down box.
Drop down has huge values, and takes lot of time to fetch from database.
So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).
But without any event trigger, how do I make call to database again ?
I am using JSF with RichFaces, Servlet.
The following code is not working
<h:selectOneMenu value="#{obj.selectedValue}">
<f:selectItems value="#{obj.allValues}" />
<a4j:support selfRendered="true" action="#{bean.action}"/>
</h:selectOneMenu>
Thanks,
+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.
have a look at "google suggest" if you want to see this in action
-Ace
As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.
At the bottom of your page put the following:
<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}"
reRender="yourDropdown" />
window.onload = yourJsFunction();
You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values.
Be advised that your form will be useless to those without JavaScript.
I have an HTML table with rows (20 rows).
Every row has a listbox of countries (about 250 countries) that are filled using a single dataset from the database.
Loading time is quick enough, but rendering time is really a mess.
Is there any way I can speed the rendering of those listboxes?
You could load it only once, and then copy the DOM element everywhere you need it...
I'm not sure if this would improve a lot since it would rely more on the user's computer, but I guess it's worth trying if it's too slow the way it is right now.
edit: here's how I'd do it. Use with caution, I haven't tested it and there is most likely tons of errors with this code, it's just to give you an idea of what I was saying.
<mylistbox id="listboxtemplate"> ... </>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
on document ready, using jquery:
jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )
You could try to add next select box only after user has selected previous one (using JavaScript).
I'm quite sure that you can rethink the form or the process, but I can't suggest anything specific since you haven't given enough information. For example depending on situation you could use multi-select or some fancy JavaScript widget.
EDIT based on your comment:
Then how about serving the table without selects. And if user double clicks on a country field you change the text element to select element using javascript. And once user has selected the country you can change back to text element. You can submit results back to server using Ajax (after user has selected the country) or using hidden fields a submit button. This way DOM will never contain more then 1 select element.
You can pass countries to javascript using inline JSON object/array (in script tags). To make things even more faster after user has edited the first element, just hide (css: display: none;) the first build select element and clone/move it around each time user wants to edit a row.
As you can see there are a lot of paths you can take using this approach, it all depends how much you want to optimize/work on it.