Getting jquery going: 'Object Expected' error

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?

13.10.2009 15:14:57
The key was having the right path in my <script> tag and (believe it or not) making it explicitly closed rather than self-closing. I upvoted everyone who gave me a suggestion that helped me toward a working solution. Thanks, all.
Rap 14.10.2009 10:41:16
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.

1
13.10.2009 20:49:40
That did it. I started the src= attribute with a slash instead of the ~ or relative path. It did not work until I changed the self-closing script tag to an explicitly closed one. I'm floored. Thanks, @Ben.
Rap 14.10.2009 10:38:47
I wasn't exactly superstitious, I just didn't know exactly why it didn't work. See here: stackoverflow.com/questions/69913/… The short story is that self-closing script tags aren't valid html4.
Ben Robbins 14.10.2009 20:26:47

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" />
2
13.10.2009 16:32:25
This isn't going to fix StopTask bombing however
dano 13.10.2009 16:00:10
@Mauris, thank you. Tried it. Didn't work. What else have you got?
Rap 13.10.2009 16:24:15
yep. saw the issue. =D no problem at all.
mauris 15.10.2009 15:26:04

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.

1
13.10.2009 16:05:53
Yes, we do have the AcceptVerbs decorator. Thanks for the reminder. The reason I have two different ways was to test both ways and show the SO folks that both are failing. I can go with either method as long as it works.
Rap 13.10.2009 16:21:06
The remaining issue seems to be that your $.post() is failing. Can you be more specific? If you put a breakpoint on the first line of your StopTask MVC method, do it get hit (ie Does the Route resolve?)
dano 13.10.2009 16:47:33
No. It is not being hit. It never gets there.
Rap 13.10.2009 19:00:59
Where is your routing performed? If it's being done in the Global.asax.cs file, try putting a breakpoint there to see how the request is being handled.. Actually can you please post the StopTask MVC method?
dano 13.10.2009 19:20:06
The routing is out-of-the-box MVC. I haven't added anything to Global.axas.cs. The StartTask() method is now posted. TIA for the help. Really appreciate it.
Rap 13.10.2009 21:11:45

Try to remove onclick="StartTask()"

0
13.10.2009 16:36:27
When I remove onclick="StartTask()", nothing happens on the button click. I put a breakpoint and an alert() in the handler. Never hits.
Rap 13.10.2009 18:01:30

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>
0
13.10.2009 16:52:19
Did you just -1 me to be spiteful? If so, man up and at least admit it.
dano 13.10.2009 18:12:02