Delphi.Boy Delphi.Boy - 5 months ago 148
Javascript Question

Bootstrap Select Not Working With Asp.Net Validators

I'm using bootstrap 3 select plugin to make my dropdownlists more fancy. It works perfectly until I add a simple

RequiredFieldValidator
to the page for ANOTHER control such as a textbox. All beautiful dropdowns are then changed to typical dropdowns.

Here is my HTML:

<asp:DropDownList ID="ddlCategories" runat="server" CssClass="show-menu-arrow selectpicker" DataSourceID="dsCategories" DataTextField="CategoryName" DataValueField="CategoryID">
</asp:DropDownList>


And the JS:

$(window).on('load', function () {
$('.selectpicker').selectpicker({
});
});


I know Asp.Net validators add some Javascript code to the page, and I guess they are causing some conflict. I also used
$.noConflict()
with no success.

I need to know how to solve this problem.

Edit:

The rendered markup is like this:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/bootstrap-select.js"></script>
<link href="/assets/css/bootstrap.css" rel="stylesheet" />

<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
});
});
</script>
</head>
<body>
<form method="post" action="Test2.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Lu54Lc5gUoMcES3FS5vAFbfEDc2WKzPnEz29Y/3ecH2fPQjmLCl030G8zXJfv035qxsI7TaEKDLL7vpb2xD61vH7RnpFzze8sAOGlMFp+Vw=" />
</div>


<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakDs9KKDZZn2GO2GOnzQ8bhnAg5hg1uDK_xxs2F4qGzZL4suzNGfgwk1f_Kqd7w6GL2Mz9JWbGv_Uo50eVnuTPU81&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="vRZe0MAmYSmodYTkQXHZO1ZKY9EsMANgK1GXMQfTQ/Lke9yD8gU8jV56OwuAerfGHV5FTQnt+m2zQwARykzPYNpaD2HUK+lPDeGfKZazORSavMSQXAZHoeLR8Yzltk+3oS5ytg9B7n2ikrVh+v5DI1Ags0aEZzExyTTjsOFgBxOaBU8PcHXOyE/7XMK3TTOx" />
</div>
<div>
<select name="DropDownList1" id="DropDownList1" class="show-menu-arrow selectpicker">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>

</select>
<input name="TextBox1" type="text" id="TextBox1" />
<span data-val-controltovalidate="TextBox1" data-val-errormessage="RequiredFieldValidator" id="RequiredFieldValidator1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">RequiredFieldValidator</span>
</div>
</form>
</body>
</html>

Answer

I finally found the answer! When I first used a validator on a page in this project, I got an error : "WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'."

I googled and on this SO page, I found 2 solutions. One suggested disabling a new feature of ASP.Net 4.5, and another one suggested adding some code to properly configure it.

I took the latter (adding ScriptResourceMapping to Application_Start). And I faced this problem somewhere else in my project.

After a few days of struggling and not getting an answer here, I suddenly realized that it might be the cause of the problem.

So I changed my codes, and added some key to Web.config and it works perfectly now!

Comments