Kraishan Kraishan - 4 days ago 4
jQuery Question

Ng-Click not being fired

I have made a code snippet which I use in multiple partial views. In all views it seems to work except one. There is nothing special about this particular partial view, and the code snippet is the same on every view.

However, am I not seeing something?

The real problem:

Ng-click on the form submit is not fired. The form is submitted however.

$scope.submitNewNoteForm = function () {
alert("HI");
$("#new_noteform").on("submit", function (e) {
alert("yo");

var formObj = $("#new_noteform");
var formURL = formObj.attr("action");
var formData = new FormData(this);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function (data, textStatus, jqXHR)
{
$('#new_noteform')[0].reset();
$('#new_note').modal('toggle');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(textStatus);
}
});
//Prevent Default action.
e.preventDefault();
e.unbind();
}
);
};


Ng-Click method:

Snippet:

<div class="card-body card-padding " ng-controller="NoteListCtrl" id="noteslist">
<div class="row">
<div class="col-sm-12 actionBar">
<div class="fg-line form-group">
<input class="form-control ng-pristine ng-untouched ng-valid ng-empty" ng-model="notesearch" type="text" placeholder="Zoek in notities">
</div>
</div>
</div>
<div >
<div class="contactperson" ng-repeat="note in allnotes| filter : notesearch" ng-click="getNoteByID(note.id)" data-toggle="modal" data-target="#view_note">
{{note.title}}
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="view_note" tabindex="-1" role="dialog" aria-labelledby="view_note">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">{{selnote.title}}</h4>
</div>
<form role="form" action="index.php" method="POST">
<div class="container">
<p ng-bind-html="SkipValidation(selnote.content)"></p>
</div>
<center>
<button type="button" class="btn btn-default btn-sm m-10" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success btn-sm hec-save waves-effect m-10" name="save_alert">Save</button>
</center>
</form>

</div>
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="new_note" tabindex="-1" role="dialog" aria-labelledby="new_note" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Nieuwe notitie</h4>
</div>
<form role="form" action="adresboek.php" method="POST" id="new_noteform" >

<input type="hidden" name="ref_id" value="{{letter.id}}"/>
<input type="hidden" name="level" value="3"/>
<div class="container">
<div class="fg-line form-group">
<input type="text" name="title" placeholder="Titel"/>
</div>
<div class="form-inline">
<div class="form-group">
<label class="radio-inline"><strong>Urgentie</strong></label>
<label class="radio-inline">
<input name="sampleinlineradio" value="1" type="radio" name="urgency">
!</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="2" type="radio" name="urgency">
!!</label>
<label class="radio-inline">
<input name="sampleinlineradio" value="3" type="radio" name="urgency">
!!!</label>
</div>
</div>
</div>
<textarea class="form-control html-editor" name="content" style="resize:none;"></textarea>
<center>
<button type="button" class="btn btn-default btn-sm m-10" data-dismiss="modal">Cancel</button>
<input type="hidden" name="save_note" value=""/>
<button type="submit" ng-click="submitNewNoteForm()" class="btn btn-success btn-sm hec-save waves-effect m-10" >Opslaan</button>
</center>
</form>
</div>
</div>
</div>
</div>

Answer

You should use ng-submit on your form instead of ng-click on the submit button (doc here) :

<form role="form" action="adresboek.php" method="POST" id="new_noteform" ng-submit="submitNewNoteForm($event)">

In your controller, you don't need to listen to submit event, it's handled by angular and your function in ng-submit :

$scope.submitNewNoteForm = function (e) {
    // To put at the top level
    e.preventDefault();

    alert("yo");

    var formObj = $("#new_noteform");
    var formURL = formObj.attr("action");
    var formData = new FormData(this);
    $.ajax({
        url: formURL,
        type: 'POST',
        data: formData,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success: function (data, textStatus, jqXHR)
        {
            $('#new_noteform')[0].reset();
            $('#new_note').modal('toggle');
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert(textStatus);
        }
    });
}
Comments