Set selected value on html select without using runat=server - javascript

I'm using this iconpicker plugin to let the user choose an icon and save it on a database. After that, when user go back on the page, I want to load the saved icon as selected value of the dropdown.
I can't use runat=server on the select because if I do the plugin stop working.
Select code:
<select id="ddlIcona" name="ddlIcona" class="myselect">
<option value="">No icon</option>
<option>icon-user</option>
<option>icon-search</option>
<option>icon-heart</option>
<option>icon-star</option>
<option>icon-users</option>
<option>icon-camera</option>
</select>
I don't bother using hidden field to pass value to the server.
How can I do this? Thank you

Aspnet renames the ID of a Control, usually when using Master Pages or Controls like Repeater, Gridview etc.
So a control that looks like this:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
Can have an ID of PlaceHolder1_Label1 in HTML.
For that reason ClientID is usually used to make sure the correct ID is referenced in javascript.
<script>
alert('<%= Label1.ClientID %>');
</script>

Related

Linking Value from Javascript to .cs file

I have an asp list item with a text box. I need to pass the text box value to my .aspx.cs file.This is the code. I created the hidden field control, but this control is not taking the javascript variable value in server side code. Please help.
<asp:ListItem Value=">1000"> <input type="text" id="tbGreater" onkeypress="return isNumberKey(event)"><br/> </asp:ListItem>`
Use ClientID to access server control in javascript. Javascript function should be
function SetHdnField() {
document.getElementById('<%= HiddenField1.ClientID %>').value = document.getElementById("tbGreater").value;
}
Reaon is HiddenField1 is a server side control and it's id is changed during rendering.

Hidden control is still challenging for validation?

again experts,
On page loade, this dropdownList box, by deffault is invisible.
<td>
<asp:DropDownList ID="LongDistance" runat="server" style="display:none;" >
<asp:ListItem value="2">$2 per mile</asp:ListItem>
<asp:ListItem value="4">$4 per mile</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator4"
ControlToValidate="tripType" ErrorMessage = "please select long distance type!"
display="Dynamic" style="color: #FF0000; font-size: small" />
</td>
It becomes visible if certain condition is met.
My question is why is the user still being challenged to make a selection?
I would like for any invisible controls to NOT challenge user to make a selection unless the control is visible.
Any ideas how to fix this?
You should look for validation Groups. If you have to validate differently on two different button.
Validation work as the data is post to the server even if it is not visible. And validation controls work on submit button and validate each input if there is any validation controls is being used.
When you set the visibility of your control, you should also set the Enabled property of the RequiredFieldValidator4 validator to match the visibility of the control it is validating. The Enabled property of the validator controls whether the validation fires.

HTML button causing unwanted page load

I feel with this particular problem I have to explain how my webpage works, otherwise it might not make sense to anyone. The page will load, you will be given some text and the option to click on a asp.net combobox filled with options, when you select one of them, the page will reload and get all the information in relation to that user and display it in a dynamically created HTML table.
After this there are two divs that runat server and dependent on if the user has uploaded a file will display an option of changing the file, or adding a new one.
I have a standard html button that when is clicked is meant to run my JavaScript function, but when you click on the button it fires my aspxcombobox code again. I will attach all my code that I feel might be useful.
HTML for DIVS
<div id ="upload" runat = "server" visible = "false" class="default">
<asp:Label ID="uploadlbl" runat="server" Text="Upload driving licence" style="color:Red"></asp:Label>
<dx:ASPxUploadControl ID="LicenceUpload" runat="server">
</dx:ASPxUploadControl>
<dx:ASPxButton ID="UploadButton" runat="server" Text="Upload" style="margin-left: 2px">
</dx:ASPxButton>
</div>
<div id="ChangeUpload" runat="server" visible="false" class="default">
<span>Licence already uploaded</span>
<br />
<button id="changeLicence" onclick="changeLicence()">Change Licence?</button>
</div>
JAVASCRIPT
function changeLicence() {
alert('test');
}
It's a submit button. It submits the form it is in. Since you are using ASP.NET, the entire page is probably in a form.
Add type="button" to make it a non-submit button.
default behavior of button is submit, Add type="button" attribute so that it doesn't submits form.
<button
type="button"
id="changeLicence"
onclick="changeLicence()">Change Licence?</button>

runat="server" breaks my jQuery - datapicker

The runat="server" is breaking my jquery. I have two input, but for testing purpose added runat="server" in only one of those. Actually , I need to add on both.
Below you can find JS script to trigger the datetimepicker:
note: dateTo has runat="server" set and tried to change the way JS trying to get its ID, but still not working.
<script>
$(function(){
$("#dateFrom").datetimepicker();
$("#<%=dateTo%>").datetimepicker();
});
</script>
Here you can find the HTML input using runat="server" or not into asp.net code.
<tr>
<td>
<input type="text" id="dateFrom" name="dateFrom" value="" class="dateFrom" />
</td>
<td >
<input type="text" id="dateTo" name="dateTo" runat="server" value="" class="dateTo" />
</td>
</tr>
Does anybody has any idea,hint.....?
thank you
Use ClientID to get the generated Id of a server side control:
$("#<%=dateTo.ClientID%>").datetimepicker();
ASP.NET will generate a specific id attribute that is different from the id attribute of the server side control, so you need to use the generated value in order to access it from jQuery.
Since you're supplying class names, I suggest simply using those.
$(function(){
$(".dateTo, .dateFrom").datetimepicker();
});
Alternatively, you could give any "date" field on your form a class of "date" and use that:
$(function(){
$(".date").datetimepicker();
});
This is a common pattern for client-side validation, and also allows you to provide context clues through styling with CSS.
If you're using .NET 4 you can set the ClientIDMode attribute to Static. This will prevent the framework from changing the element's ID:
<input type="text" id="dateTo" name="dateTo" runat="server"
ClientIDMode="Static" class="dateTo" value="" />
ASP.NET will treat the inputs as server-side controls when runat=server is added, and this will result in transformed identifiers of those inputs so that they start with a container prefix (something like ctl00_), hence 'breaking' your jQuery selectors.
If you're using .NET 4 then you can disable these transformations by altering the ClientIDMode. Otherwise you will need to include the prefix in your selectors, or refactor your selectors to be independent of ID and somewhat distinct for selection by other means.
Use this to get correct client id for server controls
$('[id$=dateTo]').datetimepicker();

How can i check a radio button by clicking on asp text field using javascript

Hi
While working on asp, i want if i click on my asp text field, a radio button should be checked, but i dont find any onClick event available for asp text field, and if i use onchange, it is from the server end, i want this situation without page refresh, just like we do in html fields using javascript, please help!!!
Try this one:
HTML:
<asp:TextBox ID="txtSelect" runat="server" Width="200px" Text="Click here"> </asp:TextBox>
<br />
<asp:RadioButton ID="radCheck" runat="server" />
JQUERY:
$("#txtSelect").click(function(){
$("#radCheck").attr("checked",true);
});
OnFocus is probably the event I would use.
You can use Ajax if you don't wanna refresh the page

Categories