Getting jquery going: 'Object Expected' error

Question

I'm creating a basic ASP.NET MVC app. I want to use jquery to have two buttons submit the form in different ways. The error I get is "Object expected".

Here are the buttons:

<input type="button" id="StartTask" value="Start" onclick="StartTask()" />
<input type="button" id="StopTask"  value="Stop"  onclick="StopTask()"  />

Here are my script tags:

<script src="~/Scripts/jquery-1.3.2.js"       type="text/javascript" />
<script src="~/Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript" />
<script type="text/javascript">
    $("#StartTask").click(function() {
        $.post("/Home/StartTask");
    });
    function StopTask() {
        $.post("/Home/StopTask");
    }
</script>

The functions are different because I'm trying different things.
With the jquery includes, Both buttons give me "Object Expected". With no jquery includes, the start button bombs on $("#StartTask") and the second bombs on $.post().

EDIT: Added controller method

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult StartTask()
{
    return View();
}

What basic, noob step am I missing?

Bonus: Can someone point me to a tutorial that would have helped me with this misstep?

Answer 1

Probably when $("#StartTask") is called, your has not been added to the DOM tree.

One sure way is to:

<script type="text/javascript">
  $(window).ready(function(){
    $("#StartTask").click(function() {
        $.post("/Home/StartTask");
    });
    $("#StopTask").click(function() {
        $.post("/Home/StopTask");
    });
  });
</script>

<input type="button" id="StartTask" value="Start" />
<input type="button" id="StopTask"  value="Stop" />

Answer 2

You are doing the same thing 2 different ways with your button clicks. Make them uniform to start with. Your Start is boming because the function doesn't exist.. and the stop may be bombing for several reasons. To start.. get them both working the same, by either.

Change your script to this (straight JS functions):

<script src="~/Scripts/jquery-1.3.2.js"       type="text/javascript" />
<script src="~/Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript" />
<script type="text/javascript">
    function StartTask() {
        $.post("/Home/StartTask");
    }
    function StopTask() {
        $.post("/Home/StopTask");
    }
</script>

OR

(the jQuery registration way)

your buttons to this:

<input type="button" id="StartTask" value="Start" />
<input type="button" id="StopTask"  value="Stop"  />

and your code to this:

<script src="~/Scripts/jquery-1.3.2.js"       type="text/javascript" />
<script src="~/Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript" />
<script type="text/javascript">
    $.(document).ready(function() {
        $("#StartTask").click(function() {
            $.post("/Home/StartTask");
        });
        $("#StopTask").click(function() {
            $.post("/Home/StopTask");
        });
    });
</script>

PS tell me which one you go with and I can explain it further for you if you want.

UPDATE : Regarding StopTask bombing, Does your MVC controller method have this above it?

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult StopTask() {

It is needed if you are using the $.post() command.

Answer 3

Try to remove onclick="StartTask()"

Answer 4

I would remove both the

onclick="StartTask()"
onclick="StopTask()"

They do the same thing (handle event) as the .click of jQuery, you do not need two event handlers, and you already do not have the function StartTask declared.

Instead, do the event handling in your JavaScript.

<script src="~/Scripts/jquery-1.3.2.js"       type="text/javascript" />
<script src="~/Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript" />
<script type="text/javascript">
// this does not execute the query until the DOM is ready
// passes the "jQuery" to it in case you have other $ libraries
(function($) {
    // this adds the click event to the StartTask
    $("#StartTask").click(function() {
        $.post("/Home/StartTask");    
    });

    // this adds the click event to the StopTask
    $("#StopTask").click(function() {
        $.post("/Home/StopTask");    
    });

})(jQuery);
</script>

Answer 5

You have the src attribute in your jQuery include wrong. Either take out the ~ or use <%= Url.Content(). Also, I haven't had the best of luck with self-closing script tags, so I avoid them, but that might just be my superstition.

Try either of these

<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>

I typed the following before I caught your typo and it may still be relevant:

According to the jQuery docs, $.post(url) will send the request and ignore the result. You said you're submitting a form, but with the $.post() that you're using no data is being submitted. I can't tell if that's your intentions or not from your code snippet. Assuming that you only have one form on the page, you could change your post calls to $.post('YourUrlHere', $('form').serialize()); and that would include the form data along with the post.

Are your button ID's unique to the page? Have you tried the code manually in the FireBug JavaScript console? Do all of your braces and parentheses match up properly? Your asp.net mvc routing may be wrong here too, but if you still only have the default route, then this should work unless you've placed another route before the default route.