I am running a project and need to allow the users change their own passwords. But I include the popup for my change password form at the very beginning of my php file. And include the other (.js) files at the bottom of my PHP file.
So, when i insert the js code for my change password AJAX just after the FORM i get "undefined $" error (which means i didnt include jquery). I include my .js file at the bottom but it doesnt detect my "click" on the specified button. What did i do wrong?
change_password.js file:
$('#change_password_submit').on('click',function() {
alert('OK!');
$('#change_password_form').removeClass("has-error");
$('#change_password_confirm_form').removeClass("has-error");
if($("#change_password").val()=="" || $("#change_password").val()==" ")
{
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Define a password.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
$('#change_password_form').addClass("has-error");
return false;
}
if($("#change_password_confirm").val()=="" || $("#change_password_confirm").val()==" ")
{
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Confirm your password.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
$('#change_password_confirm_form').addClass("has-error");
return false;
}
if($("#change_password_confirm").val() != $("#change_password").val())
{
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Passwords does not match.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
$('#change_password_confirm_form').addClass("has-error");
return false;
}
$.SmartMessageBox({
title : "<i class='fa fa fa-spinner fa-spin txt-color-green'></i> Confirmation!",
content : "Do you want to edit the user?",
buttons : '[No][Yes]'
},
function(ButtonPressed)
{
if (ButtonPressed === "Yes")
{
$.ajax({
type: 'POST',
url: 'user_func.php',
data :
{
'password' : $('#change_password').val(),
'password_confirm' : $('#change_password_confirm').val(),
'ajax_action' : 'change_password'
},
success: function(msg)
{
if (msg == "no_match") {
$.smallBox({
title : "Failed",
content : "<i class='fa fa-clock-o'></i> <i>Passwords does not match.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
} else {
$.smallBox({
title : "Success",
content : "<i class='fa fa-clock-o'></i> <i>Password changed successfully.</i>",
color : "#659265",
iconSmall : "fa fa-check fa-2x fadeInRight animated",
timeout : 4000
});
}
}
});
}
if (ButtonPressed === "No")
{
$.smallBox({
title : "Cancelled",
content : "<i class='fa fa-clock-o'></i> <i>Change cancelled.</i>",
color : "#C46A69",
iconSmall : "fa fa-times fa-2x fadeInRight animated",
timeout : 4000
});
}
});
});
my change password for at the top:
<div class='col-xs-12 col-sm-12'>
<form action='noaction();' class='form-horizontal'>
<div class='form-group' id='change_password_form'>
<div>
<div class='icon-addon addon-md'>
<input type='password' id='change_password' name='change_password' placeholder='New Password' class='form-control'>
<label class='glyphicon glyphicon-lock' title='Password'></label>
</div>
</div>
</div>
<div class='form-group' id='change_password_confirm_form'>
<div>
<div class='icon-addon addon-md'>
<input type='password' id='change_password_confirm' name='change_password_confirm' placeholder='Confirm Password' class='form-control'>
<label class='glyphicon glyphicon-lock' title='Confirm Password'></label>
</div>
</div>
</div>
</form>
<div class='form-group'>
<button id='change_password_submit' class='btn btn-block btn-primary change_password_submit'>Submit</button>
</div>
</div>
and this is how i include my js file at the very bottom of the page:
<!--================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
}
</script>
<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->
<!-- BOOTSTRAP JS -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- CUSTOM NOTIFICATION -->
<script src="js/notification/SmartNotification.min.js"></script>
<!-- JARVIS WIDGETS -->
<script src="js/smartwidgets/jarvis.widget.min.js"></script>
<!-- SPARKLINES -->
<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>
<!-- JQUERY SELECT2 INPUT -->
<script src="js/plugin/select2/select2.min.js"></script>
<!-- JQUERY UI + Bootstrap Slider -->
<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- browser msie issue fix -->
<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>
<!-- FastClick: For mobile devices -->
<script src="js/plugin/fastclick/fastclick.js"></script>
<!-- MAIN APP JS FILE -->
<script src="js/app.js"></script>
<!-- PAGE RELATED PLUGIN(S) -->
<!-- <script src="js/plugin/datatables/jquery.dataTables-cust.min.js"></script>
<script src="js/plugin/datatables/ZeroClipboard.js"></script>
<script src="js/plugin/datatables/media/js/TableTools.min.js"></script>
<script src="js/plugin/datatables/DT_bootstrap.js"></script>
<script src="js/plugin/bootbox/bootbox.min.js"></script> -->
<script type="text/javascript" src="js/change_password.js"></script>
