We are developing an ASPX (.NET 2.0) page that includes a select list with far too many elements in it (200+).
We need some form of autocomplete to make this into something that behaves like a text box, but with autocompelte suggestions.
We would like to use JQuery. So far our searching has only turned up autocompletes that require some kind of back end service, additional requests (in AJAX) etc.. We would prefer to deliver all the data at once with the page request. Ideally it would be as select list entries.
Are there autocomplete boxes that convert a select list? or is there a way to wire an autocomplete to data already on the page (in ASPX with .NET 2.0) such that it will not have to access external resources?
Edit: Postbacks was not the phrasing I was looking for. I mean delivered with the original page request.
Edit 2: The page should degrade gracefully. Many of the solutions out there 'inject' the content, so without javascript you don't get any content. It may be 200+ choices, but at least they would exist there. That is why the conversion of a select list is our ideal.
Use the jQuery autocomplete plugin as suggested by Steve Willcock. Output a regular select-box, then in your script replace it with a textbox and initialize the plugin with an array that you build out if the option-elements. So your data comes in as a select:
<select size="1" id="options" name="options">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
<option>Option #4</option>
<option>Option #5</option>
<option>Option #6</option>
<option>Option #7</option>
</select>
...and you transform it like so:
$(function(){
// execute once the DOM is ready...
// build array of option texts
var options = [];
$("#options option").each(function(){
options.push($(this).text());
});
// build an input field, replace the select with it,
// and wire up autocomplete.
$("<input id='options' name='options' type='text'>")
.replaceAll("#options")
.autocomplete(options, {autoFill: true});
});
...no JS? No problem - you still have your select.
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
The jquery autcomplete plugin can take data as an array. If you build the array in a .js include file that should suit your requirements.
For an example, take a look at the demo page - check the "Multiple Cities (local)" section, and the localdata.js file that is used there.
There are a number of third party controls (we use one from ComponentArt's WebUI toolkit) that will give you the auto-complete combobox functionality.
You can also achieve the same idea using AJAX techniques so that you avoid a full postback.
The answers here were very helpful, but we found this plugin after further searching that works automatically directly on the select list:
Sexy Combo: http://code.google.com/p/sexy-combo/
Demo page: http://phone.witamean.net/sexy-combo/examples/index.html
This will require a bit less work.
I wanted to document this for the reference of others. Thank you all for the help.
Related
I am trying to get Razor (C#) and javascript to play nicely together but I can't seem to do it. I have searched the other articles on StackOverflow, but none of them seem
to work for me.
Some noticeable differences from other posts and mine include the following:
I am using an external JavaScript file (not mandatory, but it is there).
I am using a cshtml file for the header layout for all pages (which puts the head tag in a different file than the one actually attempting to call the function.
I also use jQuery, if it would be easier that way.
What I am trying to accomplish:
All I need to do is get the contents of a tag (innerHTML, or .html in jQuery) (by id, class, whatever) and assign that value to "AppState["gEntryID"] for use with the next page.
Some things I have tried:
function entryClickHandler()
{
#AppState["gEntryID"] = document.getElementById("tester").innerHTML;
}
AND
function entryClickHandler()
{
<text>
#AppState["gEntryID"] = document.getElementById("tester").innerHTML;
</text>
}
I have tried these (and a few other variations on these) in both the external file and the head section within the HeaderLayout File.
I understand that C# runs before the page and the JavaScript mostly runs after the page (at least with events such as this).
Any help would be greatly appreciated.
It doesn't work that way. You cannot set variables in the C#/Razor side with JavaScript without using a form post or ajax submit.
Javascript doesn't get access to the page until after Razor has done it's part and rendered and sent the page.
I am designing a webapp using ASP.NET and jQuery and I could use some advice.
Currently, the ASP.NET page renders an unknown number of elements that perform an action when clicked. Javascript on the front-end handles the click event based on which specific element was selected.
Each element is embedded with information that the javascript function requires. This informaion is added as extra attributes. So for example, a given element might look like
Link 123
jQuery then attaches a click event and uses the extrainformation attribute as a parameter for an internal function. Each element has 3-5 parameters.
This works great, but I have heard recently that it might not be best practice since it is not WC3 compliant. One possible solution would be for each element to directly call the internal javascript function with the necessary parameters. However this makes me uncomfortable because I lose the separation of concerns between rendering the page and executing the client-side logic.
Is there a better way to do this? Or maybe I'm just overthinking it?
Yes there is a better way, its called HTML5 Data Attributes you can access them from jQuery using the $.data() interface.
For Example:
//instead of
Link 123
//use
Link 123
//then access it like
var info = $('#123').data('info');
alert(info); //alerts: 'something important'
Basically anything starting with data- is stored as data about that element in the DOM, jQuery can access this data via the $.data() function.
http://booking.travel24.com/index.php?KID=610000&&id=lmpergebnis&showresult=1&detail=zielgebiet®ion=-1&ziel=-1&termin=20.02.2011&ruecktermin=17.03.2011&dauer=-1&abflughafen=46&personen=25;25&kategorie=-1&verpflegung=-1&zimmer=-1
I am trying to parse some HTML parts of this page, but when I check the source code I can not find this: "Tunesien, Marokko".
If I check with xdeveloper I can see this as html:
<a class="reglreg" href="javascript:s_hliste(20009);">Tunesien, Marokko</a>
but if i check source code of the page I can't find this. Why?
If you view the source and search for "Marokko" you will see there are several places where it occurs (loaded as data in several JavaScript arrays).
It appears as if some of the content is produced dynamically through the JavaScript loaded onto the page. That JavaScript builds HTML and changes the page to include the content you are looking for.
To answer your first real question
Why?
Because when you check the source code inside a browser, you'll get the original html code. Then javascript comes along and modify the DOM which you can follow in any modern browser's console.
can i get somehow whole source code
then? if i can not see it in browser
how can i see it?
To make it simple, it depends how you're trying to parse it. With what language?
maybe the data is coming via AJAX call, so it's not there on the html at the start, but dynamically added to it.
if you need to parse this, you can try to "emulate" the ajax call yourself.
Imagine a web site, where there are 2 drop down controls like min age and max age. After I choose min age and max age, I would like to hit the search button. How do I get the search results into an output stream and then I could navigate the DOM HTML. I already know how to naviate through dom html via htmlagilitypack. I just do not know how to invoke the drop down make selections and invoke search button. I want to do all this from console application. Is it even possible? I am using C# visual studio 2010.
Thanks..
If the html looks like this:
<form action="someurl">
<select name="SomeOption">
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</form>
And you want to submit the form with "val1", then you need to execute an HTTP POST operation to "someurl" including the argument SomeOption=val1. That is essentially what the browser is doing. Of course the form you are trying to simulate will be a bit more complicated.
Is that what you were asking?
BTW, if you want to see exactly what is going on when the browser submits the form, check out Fiddler, an excellent tool made by a colleague at Microsoft.
I am trying to change a label's text by using server-side JavaScript (onclick) and C# within the page_load event. For example, I would like to write something like the following:
Label1.Attributes.Add("onclick", "Label2.text='new caption'")
Does anyone know the correct code for this? Also, what is this type of code referred to; is it just JavaScript or JavaScript in C# or is there a specific name? Lastly, does a book or online resource exist that lists the choices of control.attributes.add("event", "syntax") code to use with C#?
There is no server-side Javascript (unless you change to a platform other than ASP.NET where you actually use Javascript as server language). What you are doing is adding an attribute to the html tag, and the code will be executed entirely on the client side.
First, let's look at how it's done in HTML without the server side code and server side controls:
<span onclick="document.getElementById('Label2').innerHTML='Thank you';">Click me</span>
<span id="Label2"></span>
To use Label controls instead, setting the onclick attribute from server side code, you would do like this:
Label1.Attributes.Add("onclick", "document.getElementById('Label2').innerHTML='Thank you';");
This will work as long as the controls are not inside a naming container. If they are, the id of the controls are prepended with the name of the container to keep them unique, so you need to use the ClientID property to find out what their final id is:
Label1.Attributes.Add("onclick", "document.getElementById('" + Label2.ClientID + "').innerHTML='Thank you';");
The ClientID always contains the id that you can use to access the element from Javascript, so the last code always works regardless if the control is in a naming container or not.
To find out what attributes you can use, you should look at the HTML documentation, for example the Internet Explorer documentation for the span element. When looking at the documetation for a specific feature, notice the Standards Information, as that will tell you if it works in any browser or just in Internet Explorer.
The code above adds JavaScript to a server control rendered on the client. Take a look at this MSDN article - Using JavaScript Along with ASP.NET for more information.
IIRC, you will need to reference Label2 by its ClientID and will need to write some JavaScript to change the label's text value (I think ASP.NET labels get rendered as <span> tags).