Is it possible to have a dropdown control with functionality that if there is no element in the dropdown im interested in I can just type it in myself ?
thanks for any help
Disclaimer: I know this question hasn't been tagged jQuery, but for future users searching i'll provide a start for a jquery solution.
Here's a relly simple start to a jQuery plugin to handle allowing dynamic options into a select box. An extra textbox and button is added to the DOM for each select element. Also an option is added to the bottom of the select list with text such as "add item...". Selected this option allows the user to type a new item in and add it to the select box.
Live example here: http://jsfiddle.net/8G6z3/1/
(function($) {
$.fn.freeEntry= function(options){
var settings = $.extend(
{},
{ //defaults
addItemText: 'add item...'
},
options
);
return this.each(function(){
var $this = $(this);
var $addItemOption = $('<option>' + settings.addItemText + '</option>');
$this.append($addItemOption);
var $addItemControl = $('<input type=text>').hide();
$addItemControl.insertAfter($this);
var $addItemButton = $('<input type=button value="add">').hide();
$addItemButton.insertAfter($addItemControl);
$addItemButton.click(function(){
if($addItemControl.val().length){
var $newOption = $('<option>' + $addItemControl.val() + '</option>');
$newOption.insertBefore('option:last',$this)
$this.val($addItemControl.val());
$addItemControl.val('');
}
$addItemControl.hide();
$addItemButton.hide();
});
$this.change(function(){
var $this = $(this);
if($this.val() == settings.addItemText){
$addItemControl.show().focus();
$addItemButton.show();
}
});
});
}
})(jQuery);
Usage: $('#mySelectBox').freeEntry( { addItemText: "Add a new item yo!"} );
This is not possible with the standard HTML select control, however you could use an HTML input textbox, which uses AJAX autocomplete to display a dropdown:
http://www.devbridge.com/projects/autocomplete/jquery/
Alternatively, you could have an "Other" option in the HTML select dropdown, which when selected, will display a TextBox control
You could have a text box near the drop down list with a submit button which appends html to the list section?
Related
There is a problem to find a dynamic control on a page. The dynamic control is created every time when a user press a button. The button calls the following JavaScript function and create a new components.
<script type="text/javascript">
var uploadCount = 1;
function addFileInput(fName) {
var only_file_name = fName.replace(/^.*[\\\/]/, '');
var $div = $('<div />', {runat: 'server'});
var $cbox = $('<input />', { type: 'checkbox', id: 'attachement' + uploadCount, value: fName, checked: "true", runat: 'server'}).addClass;
var $label = $('<label />', { 'for': 'attachement' + uploadCount, text: only_file_name });
$div.append($cbox);
$div.append($label);
$('#newAttachment').append($div);
$("#uploadCountValue").prop("value", uploadCount);
uploadCount++;
}
</script>
newAttachment is DIV section on the page.
<div id="newAttachement" runat="server" />
The DIV section is situated inside section. The problem is when a user presses the button on the form I can't find the dynamic created components. The following code shows how I try to find the components:
for (int i = 1; i <= Convert.ToInt32(uploadCountValue.Value); i++)
{
if (RecursiveFind(newAttachement, "attachement" + i) != null)
{
... to do something
}
}
public Control RecursiveFind(Control ParentCntl, string NameToSearch)
{
if (ParentCntl.ID == NameToSearch)
return ParentCntl;
foreach (Control ChildCntl in ParentCntl.Controls)
{
Control ResultCntl = RecursiveFind(ChildCntl, NameToSearch);
if (ResultCntl != null)
return ResultCntl;
}
return null;
}
I have detected that Controls count value is always zero in spite of there are dynamic components there.
I would be happy to get any help from us. Thanks.
to find the controls created in the client-end you can't search them in the Page.Controls collection instead try to look for them in the Request.Form[] array
you are creating the dynamic controls in javascript? i.e. you are creating html elements in javascript. It won't matter even if you put a runat="server" attribute in there, because it is still at the client-end. That would not be a part of the viewstate bag, so not populated in the controls collection.
you need to change your logic. create dynamic control in code-behind on button postback.
I have an ASP.NET web app that is using JQuery autocomplete to build a nice dynamic combobox. One of the boxes on the page fires a change event that reloads another box. Basically like a UserGroup / Members scenario. My change event fires and repopulates the underlying select box, I then do a remove on the input and button that build the combobox - which all work great up to this point. My last line is to call the combobox method on the newly repopulated select which doesn't seem to fire ? The standard select shows with the new data but no JQuery Goodness. Any help is appreciated. Thanks.
On Change Event:
function GetAnalysts() {
$.ajax({
type: "POST",
url: "GetAnalystByGroup.ashx",
data: 'group=' + $("#<%=supportGroup.ClientID%>" + " option:selected").text(),
success: function (response) {
var analysts = eval(response);
$("#<%=assignedAnalyst.ClientID%>").children().remove();
$("#<%=assignedAnalyst.ClientID%>").append($('<option></option>').val('').html(firstoption));
for (var i = 0; i < analysts.length; i++) {
var text = analysts[i]['label'];
var val = analysts[i]['upn'];
$("#<%=assignedAnalyst.ClientID%>").append($('<option></option>').val(val).html(text));
}
//remove the JQ Combo then rebuild it
$("#<%=assignedAnalyst.ClientID%>JQ").remove();
$("#<%=assignedAnalyst.ClientID%>JQBut").remove();
$("#<%=assignedAnalyst.ClientID%>").show();
$("#<%=assignedAnalyst.ClientID%>").combobox();
},
error: function () {
}
});
}
I ended up working around the problem by coding the remove/show lines into a javascript pageload event and moving the AJAX call inside an update panel.
I am using the jquery ui selectable plugin on my website. I have close to 7 different lists with multi select's on the same page, all using the above plugin.
Once the user selects a particular listitem... how do i pass those selected items back to the code-behind ?
This is how i have displayed my list's on the page...
<div>
<ol class="selectable" id="wlList" runat="server" clientidmode="static">
</ol>
</div>
And this is how I have generated the list items from the database in the code behind...
wl.ToList();
foreach (var w in wl)
{
HtmlGenericControl li = new HtmlGenericControl("li");
li.Attributes.Add("class", "ui-widget-content");
li.Attributes.Add("value", w.UserID.ToString());
li.InnerText = w.FirstName;
wlList.Controls.Add(li);
}
Grateful for the help
One possible approach is storing selected values in a hidden input and then simply reading and parsing its value on the server..
Check this fiddle which is based on jQuery UI Selectable Serialize Demo.
What you need is to add hidden input(s) to your form:
<input type="hidden" id="wlListValue" name="wlListValue" />
Then implement selectable change handler like this:
$('.selectable').selectable({
stop: function(event, ui) {
var result = '';
$(".ui-selected", this).each(function() {
result += $(this).val() + ';';
});
$('#wlListValue').val(result);
}
});
And then just read selected values after postback:
var selectedValues = Request["wlListValue"].Split(";".ToCharArray(),
StringSplitOptions.RemoveEmptyEntries);
So I have a text box, where I add an onchange event of markAsException.
My javascript is -
function markAsException(recordID) {
//alert("Exception");
//mark exception column
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).innerText = "Exception";
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).style.color = "#FF0000";
document.getElementById("ctl00_cpMain_tdScrollException_" + recordID).style.backgroundColor = "#99CCFF";
//enable comments ddl and remove blank (first item)
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).disabled = false;
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).focus();
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).options[0] = null;
}
What I want to do is, when a user changes the value in a textbox, to mark a column as "Exception", and then focus a drop down list where they have to chose the reason for the exception.
This is what happens.. If I am on that text box and change it, then tab, it tabs to the drop down list.
However, if I change the value and then simply click in another text box on the form, I don't focus the drop down list.
How would I accomplish that?
I would suggest using JQuery's change() function.
The advantage is that it will be more stable across different browsers.
Something like:
$('#<%= TextBox1.ClientID %>').change(function(){
// extract the recordID from the textbox - perhaps with an attribute?
markAsException(recordID);
});
My comment was getting longer so I'm expanding:
Take a look at the JQuery documentation for setting this up as the page finishes loading. If tb is the ID of your textbox your selector would be
$('#<%= tb.ClientID %>')
I would suggest you replace your code and use
tb.Attributes.Add("recordID", recordId.ToString());
This will add the ID you need onto the textbox tag. Once you're in the function I outlined above you can use the following selector to get the recordID in javascript
var recordID = $('#<%= TextBox1.ClientID %>').attr('recordID');
All together
$(document.ready(function(){
$('#<%= tb.ClientID %>').change(function(){
var recordID = $('#<%= tb.ClientID %>').attr('recordID');
if(recordID){
markAsException(recordID);
}
});
});
hi I have a radio button list inside a repeater , the repeater is inside a Datalist.i need to get the value of the selected radio button. Also I need to select only a single radio in entire datalist using javascript.
You can do it with pure client side JavaScript regardless of Repeater, DataList or anything.
Have this code in your page:
<script type="text/javascript">
function GetSelectedRadioButtonValue(strGroupName) {
var arrInputs = document.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oCurInput = arrInputs[i];
if (oCurInput.type == "radio" && oCurInput.name == strGroupName && oCurInput.checked)
return oCurInput.value;
}
return "";
}
</script>
Then to get the selected value call the function passing the name of the radio buttons group - all radio buttons with same name considered a group and the browser will let the user select only one of these.
Live test case: http://jsfiddle.net/yahavbr/BL9xJ/
I would use the normal HTML Radio Button control. Everything else is pretty complicated.
Then you can use the following code to figure out which one is selected:
http://remy.supertext.ch/2008/02/find-checked-radio-button-in-aspnet/