JavaScript runtime error: Object doesn't support property or method 'on'
I am getting error message "Object doesn't support property or method 'on'". I think it is to do with this in my script.
$('#<%=filBrowse.ClientID%>').on('change', function () {
$('#<%=btnSaveImage.ClientID%>').click();
});
Page script
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<link href="scripts/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<table>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanelCanvass" runat="server" UpdateMode="conditional">
<ContentTemplate>
<asp:Panel ID="panelCanvass" Visible="false" runat="server">
<div class="helpbox-overlay"></div>
<div class="helpbox">
<div class="helpbox-popup-canvass">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h2>Crop Image</h2>
</td>
<td align="right">
<asp:ImageButton ID="btnClose" CausesValidation="false" ImageUrl="~/images/icons/red-cross.png" runat="server" />
</td>
</tr>
<tr>
<td align="center">
<asp:Image ID="imgCanvass" runat="server" Width="300" Height="300" />
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnCrop" runat="server" Text="Done Cropping" CausesValidation="false" />
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
<table>
<tr>
<td colspan="2">
<img id="imgPreview" runat="server" alt="Photo" class="photo" width="120" height="120" /><br />
</td>
</tr>
<tr>
<td>
<div class="fileUpload">
<asp:Button ID="btnSaveImage" runat="server" Text="Browse" CausesValidation="false" />
<asp:FileUpload ID="filBrowse" runat="server" Width="80" class="upload" />
</div>
</td>
<td align="right">
<asp:Button ID="btnRemove" runat="server" Text="Remove" ToolTip="Remove image" CausesValidation="false"
OnClientClick="javascript: return confirm('Are you sure you want to remove this image?');" />
</td>
</tr>
</table>
<asp:HiddenField ID="hfX" runat="server" />
<asp:HiddenField ID="hfY" runat="server" />
<asp:HiddenField ID="hfHeight" runat="server" />
<asp:HiddenField ID="hfWidth" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSaveImage" />
<asp:PostBackTrigger ControlID="btnCrop" />
<asp:PostBackTrigger ControlID="btnClose" />
<asp:PostBackTrigger ControlID="btnRemove" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
<style>
.fileUpload {
position: relative;
overflow: hidden;
/*margin: 10px;*/
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 18px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.imageCanvass {
border: 1px solid #808080;
max-height: 300px;
max-width: 300px;
}
</style>
<script type="text/javascript">
$(function () {
$('#imgCanvass').Jcrop({
onSelect: updateCoords,
onChange: updateCoords
});
});
function updateCoords(c) {
$('#hfX').val(c.x);
$('#hfY').val(c.y);
$('#hfHeight').val(c.h);
$('#hfWidth').val(c.w);
}
$(document).ready(function () {
$('#<%=filBrowse.ClientID%>').on('change', function () {
$('#<%=btnSaveImage.ClientID%>').click();
});
});
</script>
Script Sent to Browser
$('#photoUploadCoor_filBrowse').on('change', function () {
$('#photoUploadCoor_btnSaveImage').click();
});
Answer
You're using a really old version of jQuery (Feb 2011):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
This version pre-dates the .on method (Added v1.7). Use a more modern version of jQuery, or a method for binding change events available in version 1.5.
This could be as simple as:
$('#<%=filBrowse.ClientID%>').change(function () {
$('#<%=btnSaveImage.ClientID%>').click();
});
But, I would really consider a newer version of jQuery.