asp.net dropdownlist onmousehover event fire dropdown display data - javascript

I have asp:DropDownList control which i want to display data to user who don't want to click on it.
But user only want to make Mouse hover over asp:DropDownList Control.
Is there any possible way to make it without using datalist control or gridview ?
If so let me know it please.

<script>
function Open_ddl(ddl) {
document.getElementById(ddl).size = 5
}
function Close_ddl(ddl) {
document.getElementById(ddl).size = 1
}
</script>
...
<asp:DropDownList ID="ddlPostClaim" runat="server" onmouseover="Open_ddl('ddlPostClaim')" onmouseout="Close_ddl('ddlPostClaim')"></asp:DropDownList>
This does however create a new problem where the mouseover over the menu items will not highlight them, at least for me. Nonetheless, it's a start.

Related

How to change control visibility of Orbeon forms at runtime?

I am trying to find out how to change the control visibility of a text box at runtime for an Orbeon form. At the following sample, I have created an image button - when the user clicks on this button I wish to show / hide another button but unfortunately my code is not working properly:
<xf:trigger>
<xf:label>
<xf:output value="concat('<img src=''http://**********:8081/green-light.png', image, '''>')"
mediatype="text/html"/>
</xf:label>
<xxf:script event="DOMActivate">
var remarksControl = ORBEON.jQuery('*[id $= "remarks-control"]')[0];
remarksControl.hidden= true;
</xxf:script>
</xf:trigger>
</fr:c>
<fr:c y="1" x="7" w="6">
</fr:c>
<fr:c x="1" y="2" w="6">
<xf:input id="remarks-control" bind="remarks-bind">
<xf:label ref="$form-resources/remarks/label"/>
<xf:hint ref="$form-resources/remarks/hint"/>
<xf:alert ref="$fr-resources/detail/labels/alert"/>
</xf:input>
</fr:c>
What is the best approach to implement this kind of functionality? What I am actually trying to achieve is to have a form with several images and the user when clicks on an image she will be able to activate / deactivate several text fields on the form.
Thanks in advance
I would try to avoid using JavaScript to handle a case like this. The button is bound to an element, just like any other control. So you write some XForms that stores a value, say show-textfield, when the button is clicked. Assuming your button is named button, you can do so with the following custom model:
<xf:model xmlns:xf="http://www.w3.org/2002/xforms">
<xf:action
observer="button-control"
event="DOMActivate">
<xf:setvalue ref="event('xxf:binding')">show-textfield</xf:setvalue>
</xf:action>
</xf:model>
Then the control you want to show upon the button being clicked can have the Visibility formula $button = 'show-textfield'. As a result, you'll get a result like:

Using JavaScript or JQuery to automatically check asp:checkbox when a button is pressed

I have a feature that allows the user to search the database for an item that matches the string they type in. For example, if they type in "Superman" it'll return whatever is in the database that is associated with Superman. Next to each item in the resulting list is a checkbox. If the user selects a checkbox, they can then press the "delete" button to remove that item from their list. I want to be able to select all of the checkboxes by pressing a "select all" button. Sometimes the lists are really long and if the user wants to delete all of the items, it would be time consuming to select and delete each one individually.
The checkbox is an asp:checkbox inside of an asp:TemplateField. The asp:TemplateField is inside an asp:GridView. Here is the checkbox code:
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="uxSelectAdd" runat="server" />
</ItemTemplate>
For the "select all" button, I'm using a regular input type:
<input type="submit" value="Select All" id="uxSelectAll" />
Here are the contents of the js file I'm using in my resources folder(I'm using the alert function for debugging. For some reason, the alert pops up when the page loads, rather than when I click on the button. Clicking the button doesn't do anything):
$(document).ready(function () {
$('#uxSelectAll').click(function (e) {
$(searchCheckBoxSelector).prop('checked', true);
alert("helloooo");
});
});
This is the js that is included in the front-end code at the top inside of a script tag:
<script type="text/javascript">
var searchCheckBoxSelector = '#<%=uxSearchedComics.ClientID%> input[id*="uxSelectAdd"]:checkbox';
</script>
I know that .live is no good since it's been removed in the version of javascript that we're now using, so I tried changing .live to .click instead. That didn't work. I also tried adding this js to the front-end instead of what was already there, just to experiment and see if this works:
<script type="text/javascript">
$(document).ready(function () {
$('#uxSelectAll').click(function () {
alert('hello world');
});
});
</script>
For some reason, that didn't work either. Am I missing something obvious? I wanted to at least get an alert to work before I tried adding in code to check all of the checkboxes for me but not even the alert works. I'd appreciate any help or nudges in the right direction.
Here are the .js files I'm using in the front-end code:
<script src="../../../../resources/js/ItemSlotEdit.js" type="text/javascript"></script>
<script src="../../../../resources/js/plugins/jquery-1.11.0.js" type="text/javascript"></script>
I want to share the solution I'm using. I've kept the input element exactly the same and this solution is in a separate js file that I've included into the .aspx front-end file.
$(document).ready(function () {
$('#body').on('click', 'input[type=submit]#uxSelectAll', function () {
$(this).toggleClass("checked");
var isChecked = $(this).hasClass("checked");
$('input[type=submit]#uxSelectAll').val(isChecked ? "Unselect All" : "Select All");
$(this).prev().find(":checkbox").prop("checked", isChecked);
return false;
});
});
The reason the button wasn't working before is because the button was in a div that doesn't exist when the page loads. The div appears after the user clicks the search button and the search results come in. The search results are populated into a div that appears dynamically. So, in order to access the button you need to include a parent container in the selector. Otherwise the event delegation doesn't go through. I used the #body container because I have only a single Select All button and a single checkbox so it doesn't conflict with anything. The toggleClass function alternates between giving and removing the "checked" class on each click, and you can modify the text of an input element by using the .val property.
I hope this helps someone.

Using telerik radgrid itemcommand with a radwindow to get initial data for InsertMode Dropdowns

I need some assistance with the telerik radgrid's itemcommand to get some information from a user adding a new record prior to opening the Grid in Insert mode. I have the itemcommand working to open a radwindow, present the user with a dropdown list of items to select from and a radbutton to select the value and close the radwindow, then this value is passed back to the parent page in javascript. All the values are passed down and I can use the alert function to validate this.
So at this point I need to continue the flow to open the radgrid in insert mode and filter a dropdown in the insertmode using the value from the radwindow noted above. In order to use this value I'm attempting to assign it to a hidden radtextbox for use in the ItemDatabound event when the form is loading in insert mode. Unfortunately, the value isn't being set via the javascript in this hidden control and is acting like it is erroring somewhere in the javascript. I feel like I'm overcomplicating this but was hoping for some guidance on what others have done to implement something like this.
<asp:LinkButton ID="addNewRecord" runat="server" Text="Add New Record" OnClientClick="openWin(); return false;" OnClick="InitInsert">Add New Record</asp:LinkButton>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
//<![CDATA[
function openWin(sender, args) {
var oWnd = radopen("ParserFileNewDialog.aspx", "RadWindow1");
}
function OnClientClose(oWnd, args) {
//get the transferred arguments
var arg = args.get_argument();
if (arg) {
var lenderid = arg.LenderID;
var tb = null;
tb = $find("<%=newLenderID2.ClientID %>");
alert(tb.get_text());
tb.set_text(lenderid);
$find("<%=hdnInsertBtn2.ClientID %>").click();
}
}
//]]>
</script>
</telerik:RadCodeBlock>
Any help is greatly appreciated!
What type of control is the newLenderID2 that you attempt to set a value to? With this syntax, it should be a RadTextBox. If it is an asp:HiddenFiel, you need
$get("<%=newLenderID2.ClientID %>").value = lenderid;
If you get an error - what is the error?
Also, you can fire a grid command and pass an argument to it (depending on the command) directly via the grid's masterTableView client-side API and the fireCommand() method: http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-firecommand.html. Thus, you may not need the hidden button at all. A hidden field will suffice for data transmission.

Disabling textbox on change of drop down list even after refresh

I have a dropdown and text box in my application.Based on the selection of items in dropdown I need to disable the textbox. I am using to achieve this using JavaScript.But on the pressing refresh the controls are going to the original modes because the page is reloading.
I need to keep the textbox disabled even after the refresh of the page.
Can I achieve that functionality.
My JavaScript
function disable(){
var zone = $("#txtzone").val();
var eqtype= $("#txtetype").val();
if(eqtype=='Virtual'){
document.getElementById('txtsno').value='Virtual';
document.getElementById('txthesx').disabled=false;
document.getElementById('txtwstdt').disabled=true;
document.getElementById('txtwendt').disabled=true;
document.getElementById('txtemnt').disabled=true;
} else {
document.getElementById('txtsno').value='';
document.getElementById('txthesx').disabled=true;
document.getElementById('txtwstdt').disabled=false;
document.getElementById('txtwendt').disabled=false;
document.getElementById('txtemnt').disabled=false;
}
}
Please help me with this.

ASP.NET Server Controls - Show Hide Textbox based on Dropdown selection

What is the best way to show/hide a textbox or an entire div section based on a users selection from a dropdown? I don't believe its possible with server controls, so I would have to use regular client side HTML controls, correct? Thanks for any input. Would jQuery be the best option for this?
Based on the drop down selection, I want to be able to display the following Div, and by default hide the Div. Thoughts?:
<div id="divLimitPrice">Limit Price<br />
<asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"> </asp:TextBox>
You can do it with server controls the same as simple html controls. You only need to correct set the rendered client IDs of the control. Here is an example: (see the notes on the code for what I do)
function TriggerChange(me)
{
// get the drop down control
var cTheDropDown = jQuery("#<%=ddlControl.ClientID%>");
// find the value of the selected one
var SelValue = jQuery('option:selected', cTheDropDown).attr('value');
// now do what you like with it
if(SelValue == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
a shorter version of
function TriggerChange(me)
{
// get the selected value from the drop down list
// and base on it, show or hide your div
if(jQuery("#<%=ddlControl.ClientID%>").val() == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
And on control you add the trigger as:
<asp:DropDownList ID="ddlControl" runat="server" onchange="TriggerChange(this);">

Categories