Why Doesn't My Dialog Close On The Button Click?
Hi guys,
I have jQuery code that's executed on a button click which brings up modals based on the validity of the user input. I have buttons on the modals that when clicked should close the modals, I have 4 different if statements and the modals close when the button is clicked on all the modals except the one in the last if block and I have no idea as the code is the same, what is wrong here? Here's my code below
- $(function(){
-
- $("input[name=addAnotherExpense]").on("click", function(e){
- e.preventDefault();
- var expenseDetail = $("input[name=expenseDetail]").val();
- var expenseAmountVal = $("input[name=expenseAmount]").val();
- if (expenseAmountVal.length > 10)
- {
- console.log("expenseAmountVal > 3");
- $('#myDialog1').dialog({
- title : "Error",
- hide: "fadeOut",
- show: "fadeIn",
- buttons: {
- "ok" : function(){ $(this).dialog('close'); },
- "member" : function() { console.log("member button clicked"); }
- }
- });
- }
- else if (expenseDetail.length < 1)
- {
- $('#myDialog2').dialog({
- modal: "true",
- title: "Error",
- show: "fadeIn",
- hide: "fadeOut",
- buttons: {
- "ok" : function(){ $(this).dialog('close'); }
- }
- });
- }
- else if (expenseAmountVal == 0)
- {
- $('#myDialog3').dialog({
- title: "Error",
- modal: "true",
- show: "fadeIn",
- hide: "fadeOut",
- buttons: {
- "ok" : function(){ $(this).dialog('close'); }
- }
- });
- }
- else if (expenseDetail.length > 0 && expenseAmountVal.length <= 10 && expenseAmountVal > 0)
- {
- (expenseAmountVal > 0) ? expenseAmount = expenseAmountVal : expenseAmount = 0.00;
- AddAnotherExpense(expenseDetail, expenseAmount);
- for(i=0, total=0; i<newArray.length; i++)
- {
- amount = 0.00;
- amount = newArray[i].amount;
- total = parseFloat(total) + parseFloat(amount);
- console.log("total in for loop = " + total.toFixed(2));
- details = newArray[i].detail;
- console.log(newArray[i]);
- $("#transactions").append(" " + details);
- }
- $('#myDialog4').dialog({
- title: "Item added",
- modal: "true",
- show: "fadeIn",
- hide: "fadeIn",
- buttons: {
- "ok" : function(){ $(this).dialog('close'); console.log(this); }
- }
- });
- $("#totalExpensesParagraph").append().text("Total expenses for this month R " + parseFloat(total).toFixed(2));
- //$("input[name=expenseAmount]").val("placeholder='0.00'");
- //$("input[name=expenseDetail]").val("");
-
- }
-
-
- });
-
- });