I've got a JQuery/ASP.NET project that isn't working as expected, but the virtually identical code in JSFiddle works as expected. I'm simply passing some text as a variable into an alert() which should pop up when you click "Click Me" on the form. Eventually I'll be using an AJAX call to pass it back to the code behind, but first things first, so ignore the AJAX calls & functions, I'm not using those yet.
Here's the JS (referenced in the ASP below as "OnlineRMA.js":
$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
});
function asyncServerCall(userid) {
$.ajax
(
{
url: 'WebForm1.aspx/GetData',
type: "POST",
data: "{'userid':" + userid + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert(data.d);
}
}
);
}
$(document).ready(function () {
$("#SBE_Services").dropdownchecklist();
});
Here's the ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryAjaxExample.WebForm1" %>
<!DOCTYPE html>
<script src="Scripts/jquery-1.9.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<label for="SBE_services">Requested Services</label>
<select id="SBE_Services" multiple="multiple">
<optgroup label="Calibration">
<option>Temperature</option>
<option>Conductivity</option>
<option>Pressure</option>
<option>Dissolved Oxygen</option>
<option>pH</option>
</optgroup>
<optgroup label="Repairs">
<option>O-Ring Replacement & Inspection</option>
<option>Hydrostatic Test</option>
<option>Diagnose & Repair Problems</option>
<option>Replace Anti-Foulant Devices</option>
<option>Download Data From Instrument</option>
</optgroup>
<optgroup label="Third Party Sensors">
<option>Fluorometer</option>
<option>Transmissometer</option>
<option>Turbidity</option>
<option>SUNA</option>
<option>PAR</option>
</optgroup>
</select>
<input type="button" id="button" value="Click me" />
</div>
</form>
</body>
</html>
And finally, here's the working fiddle
On the fiddle, click to the right of "Requested Services" and choose a few (doesn't matter how many as long as you've chosen at least one, there's no error handling yet if you don't). Then click "Click Me". You should get a JS Alert listing your choices. In the ASP project this doesn't work, and I don't understand why. The only difference is a slightly customized JQuery-UI, but I don't think this is the issue. The dropdownchecklist stuff is working so that tells me that it's seeing the JS in the external file, I just don't know why I'm not getting the JS Alert.
Just as a sanity check, I built an HTML-only page with all the same stuff in it (basically pulled out the first line and removed any "runat" statements), I also pointed to the CDN versions of JQuery & JQuery-UI instead of pointing to my local ones, and I'm getting the same behavior, no alert. That tells me it's not an ASP issue, probably not a JQuery issue, it's something else I'm missing. I even changed the alert to:
alert("test"); to no avail. What am I missing? Maybe I've got a path mis-configured? This is driving me nuts!
