MVC2 JQuery Syntax not working

Question

Hi, newby here in MVC2, so please excuse my stupidity, But I really need help. I am trying to do the following :

<script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min-vsdoc.js" type="text/javascript"></script>

<%=Html.DropDownList("ddlPostage", new SelectList(Model.PostageOptions as IEnumerable, "id", "text", Model.SelectedPostageId)) %>

 <script language="javascript">
     $('#ddlPostage').change(function() {
         alert('okay to go');
     });

</script>

But getting runtime error at the JQuery systax. "Microsoft JScript runtime error: Object expected".

As far as I am concerned my path-to-jquery is okay because form validation using <% Html.EnableClientValidation(); %> worked fine in one of my previous pages and the jquery file sits beside the other js files as default by VS2008.

What am I doing/what is going wrong in here? Thanks in advance.

Answer 1

First, you're missing a reference to jQuery itself. The reference you have now with vsdoc in it is just a helper for Visual Studio to provide IntelliSense. Add this script block to reference jQuery proper:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Second, you should wire up your event handlers in the document.ready event. Your code will probably work without this, but might act in ways you aren't expecting.

 $(document).ready(function() {
     $('#ddlPostage').change(function() {
         alert('okay to go');
     });
 });

Answer 2

Hi Jhon, Thanks for your ans. I have tried both ways. Unfortunately did not work. This is what my codes look like now ..

inside the main content place holder :

<script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script language="javascript">
     $(document).ready(function() {
         $('#ddlPostage').change(function() {
             alert('ok to go');
         });
     });
</script> 

Just out of curiousity : Am I only one who's facing this issue ??

Thanks

Answer 3

OH!! Very stupid of me. Solved it. the whole "javascript" thing had to be added in the head. I was stupid enough to add it in the center content place holder rather that head-content-place holder.

Now it's working alright. I can now proceed with the actual purpose which is getting reply via Json.

@Jhon, thanks mate !