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?

The key was having the right path in my – Rap Oct 14 '09 at 10:41 — Rap, Oct 14 '09 at 10:41

mauris · Answer 1 · 2009-10-13T16:32:25.660

2

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" />

edited Oct 13 '09 at 16:32

answered Oct 13 '09 at 15:20

mauris

42,982
15
99
131

This isn't going to fix StopTask bombing however – dano Oct 13 '09 at 16:00
@Mauris, thank you. Tried it. Didn't work. What else have you got? – Rap Oct 13 '09 at 16:24
yep. saw the issue. =D no problem at all. – mauris Oct 15 '09 at 15:26

dano · Answer 2 · 2009-10-13T16:05:53.723

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.

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, Oct 13 '09 at 16:21
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, Oct 13 '09 at 16:47
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, Oct 13 '09 at 19:20
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, Oct 13 '09 at 21:11

score 1 · Accepted Answer · answered Oct 13 '09 at 20:49

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.

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, Oct 14 '09 at 10:38
I wasn't exactly superstitious, I just didn't know exactly why it didn't work. See here: http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work The short story is that self-closing script tags aren't valid html4. — Ben Robbins, Oct 14 '09 at 20:26

score 0 · Answer 4 · answered Oct 13 '09 at 16:36

0

Try to remove onclick="StartTask()"

answered Oct 13 '09 at 16:36

powtac

40,542
28
115
170

When I remove onclick="StartTask()", nothing happens on the button click. I put a breakpoint and an alert() in the handler. Never hits. – Rap Oct 13 '09 at 18:01

score 0 · Answer 5 · answered Oct 13 '09 at 16:52

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>

Did you just -1 me to be spiteful? If so, man up and at least admit it. — dano, Oct 13 '09 at 18:12

Getting jquery going: 'Object Expected' error

5 Answers5