preventDefault is not working

Question

I am trying to send an ajax request to complete a task when a link is clicked. For some reason the e.preventDefault is not working and I still get sent to the page. Is there something I am missing?

It is simply supposed to go to the page set the check-box to checked (or unchecked) then redirect. But again it just goes to the page. Any help would be great!

here is the main.js

$(function() {

    $('.ajax-task-complete').on({
        click: function(e) {
            e.stopPropagation();
            e.preventDefault();

            var href = $(this).attr('href');

            $('<div></div>').load(href+' form', function() {

                // Set Form
                var form = $(this).children('form');

                // Set Checkbox
                var cb = form.find('input[type="checkbox"]');

                // Taggle Checkbox
                cb.prop('checked', !cb.prop('checked'));

                // Form Action URL
                var url = form.attr('action');

                // Set Data
                var data = form.serialize();

                $.ajax({
                    url: url,
                    data: data,
                    method: 'post',
                    dataType: 'json',
                    cache: false,
                    success: function(obj) {
                        var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
                    },
                    complete: function() {
                        console.log('complete');
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            });
        }
    });
});

here is the requested button

 <td id="task-complete-{{ entity.id }}">
 {% if entity.completed %}
     <a class="check ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">&#10004;</a>
 {% else %}
     <a class="uncheck ajax-task-complete" href="{{ path('task_edit_complete', { 'id': entity.id }) }}">&#10004;</a>
 {% endif %}
 </td>

Why dont' you just not attach the click event? If you have some criteria you are evaluating and therefore running preventDefault then perhaps consider returning from the function at this point? — Captain John, Jan 08 '14 at 20:56
Why are you using load when you have already used ajax in your function? It might be that this is happening because of load that your e.preventDefault() is not working properly ? — Akhilesh Sharma, Jan 08 '14 at 21:00
I think you don`t load jQuery the right way: http://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined — Black Sheep, Jan 08 '14 at 21:13
@aldanux that was it I had jQuery loaded after my files lol thanks. If you would like to put that as an answer you could — Zach Starnes, Jan 08 '14 at 21:17

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

This is your problem:

Uncaught ReferenceError: $ is not defined?

Read HERE from SO how you load your jQuery-plugin the right way.

edited May 23 '17 at 11:56

Community

1
1

answered Jan 08 '14 at 21:22

Black Sheep

6,604
7
30
51

score 0 · Answer 2 · answered Jan 08 '14 at 20:53

0

you might need to stop bubbling depending on where the click event is occurring. Try adding this and see what happens.

e.stopPropagation();

answered Jan 08 '14 at 20:53

NSjonas

10,693
9
66
92

unfortunately it is still taking me to the page. – Zach Starnes Jan 08 '14 at 20:57
did you try it with both e.preventDefault(); & e.stopPropagation(); – NSjonas Jan 08 '14 at 20:58
yes I did they are both there I will refresh the code above to show it. – Zach Starnes Jan 08 '14 at 20:58
hmm you could try e.stopImmediatePropagation() intstead – NSjonas Jan 08 '14 at 20:59
its really hard to tell exactly what is going on from your question. Could you create a plunkr or jsfiddle to reproduce the bug? – NSjonas Jan 08 '14 at 21:04
I dont think i could because its integrated with symfony. I will be happy to show any amount of code needed – Zach Starnes Jan 08 '14 at 21:06

Karl-André Gagnon · Answer 3 · 2014-01-08T21:14:38.973

Your scope is wrong, you are missing the () after (function)(). The function is never called :

(function() {

    $('.ajax-task-complete').on({
        click: function(e) {
            e.stopPropagation();
            e.preventDefault();

            var href = $(this).attr('href');

            $('<div></div>').load(href+' form', function() {

                // Set Form
                var form = $(this).children('form');

                // Set Checkbox
                var cb = form.find('input[type="checkbox"]');

                // Taggle Checkbox
                cb.prop('checked', !cb.prop('checked'));

                // Form Action URL
                var url = form.attr('action');

                // Set Data
                var data = form.serialize();

                $.ajax({
                    url: url,
                    data: data,
                    method: 'post',
                    dataType: 'json',
                    cache: false,
                    success: function(obj) {
                        var tic = $('#task-complete-' + obj.id + ' .ajax-task-complete');
                    },
                    complete: function() {
                        console.log('complete');
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            });
        }
    });
})(); //Add () here

But is the scope really needed here?

Maybe you meant a ready handler, then it should be like this :

$(function); //Missing '$'

Gagnon I tried what you said. It keeps telling me `Uncaught ReferenceError: $ is not defined` — Zach Starnes, Jan 08 '14 at 21:11
@zachstarnes Then you have a problem while loading jquery. Maybe it is not loaded or in conflict. Try `(function($){...})(jQuery)`. Give an error like jQuery is not defined, it mean it is not loaded. — Karl-André Gagnon, Jan 08 '14 at 21:13
Atleast having an error mean it run you code, that's a step forward! — Karl-André Gagnon, Jan 08 '14 at 21:13

score 0 · Answer 4 · answered Jan 08 '14 at 21:13

0

**"$"**

is missing before (function() {

javascript pageload event should be like

$(function(){
//code here
});

or function will be called by themself

 (function(){
        //code here
        )}();

or

(function($){
//code here
})(jQuery)

You can check the fiddle here

answered Jan 08 '14 at 21:13

Ranjit Singh

3,715
1
21
35

I get this `Uncaught ReferenceError: $ is not defined` – Zach Starnes Jan 08 '14 at 21:14
Please check the fiddle. – Ranjit Singh Jan 08 '14 at 21:15

score 0 · Answer 5 · answered Jan 08 '14 at 21:26

Try placing the preventDefault event at the end of the function as below

$('.ajax-task-complete').on({
    click: function(e) {
  //
  //your code here then,

 e.preventDefault();
 e.stopPropragation();
});

I can't test if it works or not, as I'm on mobile.

preventDefault is not working

5 Answers5