Jquery Ajax Function Problems

Question

I need some help with my jquery which should complete a task in our Rails3 application. Thanks to others on here, I have a checkbox which when clicked, is supposed to mark a task's status as completed.

In my rails code, I have this;

<%= check_box_tag 'complete_task_1', '', false, { 'href' => completed_task_path(task.id) } %>

In my application.js, I started with this:

 $('#complete_task_1').click(function() {
  $.ajax({
    url: $(this).data('href'),
    type: 'post',
    dataType: 'html',
    success: function(data, textStatus, jqXHR) {
        $('#thing').css("color","red");
        alert ('yabadabadoo');
    }
  });
});

This gives me an error though - no route matches for /tasks

To test, I replaced the url with:

tasks/4/complete

Which toggled the status in the db but did not refresh on the page. I therefore have two questions:

What's wrong with the url / function above?
What can I include so that the task disappears from page without reload?

-- UPDATE --

Tried using code as per @darin-dimitrov suggestion below and I get logged out of my application... The error shown in development log is:

Started POST "/tasks" for 127.0.0.1 at 2011-07-16 13:27:32 +0100
  Processing by TasksController#create as HTML
  SQL (143.6ms)  describe `roles_users`
  User Load (0.5ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  SQL (0.2ms)  BEGIN
  SQL (0.6ms)  COMMIT
Completed   in 454ms

Looks like it's not getting the right url still. Should I be using POST as well?

Darin Dimitrov · Accepted Answer · 2011-07-16 12:15:06Z

1

Try this:

{ 'data-href' => completed_task_path(task.id) }

and then:

url: $(this).data('href')

should give the correct url (tasks/4/complete).

Or if you dont use the data- prefix you could use this:

url: $(this).attr('href')

but as href is not valid attribute on a checkbox the firstr solution seems better.

answered Jul 16, 2011 at 12:15

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jenny Blunt Over a year ago

Thanks, tried that and strangely it logs me out of my app?! Have updated my question with the development log output

Darin Dimitrov Over a year ago

@Jenny Blunt, could you put an alert inside the .click handler and see what the value of $(this).data('href') actually is?

Jenny Blunt Over a year ago

Can do but I don't know how! :) Am a bit new to all this! Jx

Jenny Blunt Over a year ago

not sure if I've done this right, but I put a failure message in the handler which shows an alert which says "I must be logged in to continue". Am not sure about showing the url.

treecoder · Accepted Answer · 2011-07-16 13:00:50Z

1

First note very carefully that $().data() is different from $().attr().

Read this article for more.

On the ruby side you are probably adding an href attribute to the checkbox -- right? (i am not into ruby)

Don't try to access an attribute with $().data() -- that is NOT correct.

First try to hard code the URL in the url property and see if it works. If yes -- then it is simply the problem that you are not able to access the href on the checkbox. Try $().attr().

You could also use a rel attribute instead of href -- that's a standard attribute on checkboxes. But href should do also.

answered Jul 16, 2011 at 13:00

treecoder

45.5k23 gold badges71 silver badges96 bronze badges

3 Comments

Jenny Blunt Over a year ago

thanks. I have actually hardcoded the url to check - this worked once and now it logs me out. Don't know why...

treecoder Over a year ago

if it worked once -- then the JS side is probably working alright -- it must then be your ruby code that needs checking. Run the code through debugger and see if it reveals some glitch. Then you can ask any ruby expert about it.

Jenny Blunt Over a year ago

@greegit, see my answer below. Mixture of a few things. Thanks again, have a good weekend :)

Collectives™ on Stack Overflow

Jquery Ajax Function Problems

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related