Click Button to show another button and opposite - javascript

I am wanting to have the Resolve Ticket Button showing when the open item is an Incident. When I click Resolve Ticket, I want Cancel and Confirm buttons to show. However, when you click Cancel I need Resolve Ticket to show again. I can get Cancel/Confirm to show, but clicking Cancel does nothing. The HTML is below.
<div class="panel b" ng-if="c.data.isIncident == true">
<div class="panel-heading bg-primary">
<div class="panel-title">Is this no longer an issue?</div>
</div>
<div class="panel-body">
<div ng-if="!c.data.isDialogOpen">
<a class="btn btn-primary" ng click="c.openConfirmDialog()">Resolve Ticket</a>
</div>
<div ng-if="c.data.isDialogOpen">
<a class="btn btn-primary" ng-click="!c.openConfirmDialog()">Cancel</a>
<a class="btn btn-primary" ng-click="c.openConfirmDialog()">Confirm</a>
</div>
</div>
</div>
The AngularJS function is
function($location) {
/*widget conotroller */
var c = this;
c.data.isIncident = false
if ($location.search().table == 'incident'){
c.data.isIncident = true
}
c.openConfirmDialog = function(){
c.data.isDialogOpen = true;
}
}

Try this:
<a class="btn btn-primary" ng-click="c.data.isDialogOpen = false; c.data.isIncident = true">Cancel</a>
I'm not sure what you were trying to do with !c.openConfirmDialog() but this will definitely not undo what the function did when it was called before.

Related

Modal won't close and prevent default on no click, and won't execute func on yes click

I have a modal with two buttons. One is a yes button and one is a no button. If yes button is pressed, I would like the remainder of the function to execute. If no btn clicked, I would like the page to prevent default and not execute. However, it seems that regardless of which button is clicked, nothing happens besides the modal closing. I am using a modal example I found elsewhere, so this may be the issue. After glancing at it for some time I cannot seem to find where the issue is. Am I missing something small? Or perhaps my Jquery is wrong? Below is my code:
Modal:
<!-- Modal for delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content border-primary mb-3 box-shadow-none img-responsive">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body bg-light">
<div id="del" class="center">
<label>Are you sure you want to delete?</label>
</div>
</div>
<div class="modal-footer">
<div id="deleteYes">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteYes">Yes</button>
</div>
<div id="deleteNo">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deleteNo">No</button>
</div>
</div>
</div>
</div>
</div>
And here is my Jquery:
$(".btnDeleteTerminalCommand").click(function (e) {
$("#deleteModal").modal('toggle');
if ($("#deleteNo").click) {
return e.preventDefault();
}
var rowId = "#" + $(this).data("rowindex");
var row = $(rowId);
var termId = row.find(".tdTermId").html().trim();
var cmdId = row.find(".tdCmdId").html().trim();
var cmdVal = row.find(".tdCmdVal").html().trim();
var cmdID = row.find(".cmdID").html().trim();
var data = {
TerminalID: termId,
CommandID: cmdId,
CommandValue: cmdVal,
ID: cmdID
};
$.ajax({
url: '#Url.Action("DeleteTerminalCommand", "TerminalCommand")',
type: "POST",
data: data,
success: function (response) {
console.log("Success");
window.location.href = response.Url;
}
});
});
Any advice helps! Thank you!
Your click handler will toggle the modal and immediately continue to execute the rest of the function before the user can click anything. If your modal has two buttons, create a click handler for each button. Perhaps the No button just closes the modal. The Yes button handler can execute the actions required to accomplish the task.
$(".btnDeleteTerminalCommand").click(function(e){
$("#deleteModal").modal('toggle');
}
$("#deleteNo").click(function(e){
$("#deleteModal").modal('hide');
}
$("#deleteYes").click(function(e){
// build data object
// ajax post
}

How can I handle the alert (leave or cancel) on page close using Angular 5?

When the page close is triggered by the user, the JS alert pop-up is displayed.
Now how can I handle whether the user has clicked the leave or cancel button
On leave the unload event will be triggered. I am not sure if it possible to catch the cancel properly.
const confirmed = window.confirm('are you sure?');
if (confirmed) {
// user confimed
} else {
// user did not confirm
}
If you want to prevent users from leaving the page you must add canDeactivate guard to that component route definition.
More on it here
Here is my code main.html
<html>
<div class="row">
<div class="col-sm-3 columns">
<button type="" class="btn btn-info" ng-click=“submit()”> Submit </button>
</div>
</html>
this is the main html page once the submit is pressed the respective submit function will be called.
Here is my AlertpopupModal.html
<html>
<script type="text/ng-template" id="AlertpopupModal.html">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Do you want to leave this site</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<p> Changes that you made may not be saved </p>
<button type="button" class="btn btn-default pull-left"
ng-click ="leave()">Leave</button>
<button type="button" class="btn btn-default pull-left"
ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
Inject $modal into your controller.
angular.module('app')
.controller('AlertModalController', function($scope,$modal ) {
//code
});
Now add this code into your controller.
In this code I am simply calling the template through the id which I have used the modal template. And two functions are called for cancel and leave through which the modal will get closed as per the function.
$scope.submit= function ( ) {
alertModalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'AlertpopupModal.html',
scope: $scope
});
$scope.leave = function () {
console.log("leave");
alertModalInstance.close(true);
};
$scope.cancel = function () {
console.log("cancel");
alertModalInstance.dismiss('cancel');
};
Try this:
export class AppComponent {
title = 'leave-site';
#HostListener('window:beforeunload', [ '$event' ]) beforeunloadHandler(event) {
return false;
}
}

Why the values of a function are not reflecting their values during function call in angularjs?(new to angularjs)

I need to display a div of comment box section on ng-click of the button invoking the function from controller as defined in the below HTML...picking up the index values from the table and validating the ng-if condition as shown in the code
<button class="btn btn-outlined" ng-click="vm.showCommentBox1($parent.$index, $index)">Save All</button>
<div class="comment-box custom saveAll" ng-if="tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeCommented">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" aria-label="Close" ng-click="baseline.toBeSaved = false" title="Close comment box"><span aria-hidden="true">×</span>
</button>
<h3 class="panel-title blue-30">Comment</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<textarea class="form-control bg-white" ng-model="tableData.template.selectedTowers[$parent.$parent.$parent.$parent.$index].baselines[$index].comment"
placeholder="Add your description"></textarea>
</div>
<button ng-click="saveAllRows(tableData.dealName, tower.towerName, baseline, $parent.$parent.$parent.$parent.$index, $index, tower.towerGeo, tableData.template.selectedTowers[$parent.$parent.$parent.$parent.$index].baselines[$index].comment)"
class="btn btn-filled btn-xs pull-right">Submit</button>
</form>
</div>
</div>
</div>
The function with the arguments are going undefined while the same arguments in different function possess some values
vm.showCommentBox1 = function (towerIndex, baselineIndex) {
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeCommented = true;
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeSaved = true;
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].showPreviousComments = false;
}
in the above code towerIndex and baselineIndex are going undefined while the same has some values intended when different functions are invoked
Example:the below function possess the values for both the arguments
vm.enableSaveButton = function (towerIndex, baselineIndex) {
// console.log("Changed", baseline);
$scope.tableData.template.selectedTowers[towerIndex].baselines[baselineIndex].toBeCommented = true;
}
By,this situation im stuck and im not able pass the ng-if condition true in my HTML so that i can display the comment box.
please,help on this
Thank you
As it was a button outside the table i can't pass the parameters as ($parent.$index,$index) from controllers because only table possess the $index values...it was my bad i didn't notice that at beginning.

Pressing enter on child modal dialog fires enter on parent modal dialog (ie11 and edge)

I have two bootstrap modal dialog windows, one creates the other. When enter is pressed on the child's text input it fires an event on the parent as well. The last button to have focus on the parent was the one to create the child, this causes the child to be recreated immediately.
I have found some similar problems which state to make sure the ok buttons on the dialog are of type=button since they default to submit. I have made sure that the buttons have the type of button but the issue persists, though it works fine in chrome.
Here an example of what is happening in plunker.
This is the first modal window.
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="shownewwindow()">New Modal</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
And here is the second.
<script type="text/ng-template" id="modal2.html">
<div class="modal-body">
<input type=textarea value="test" ng-keypress="keydown($event)" autofocus></input>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="ok()">ok</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Here are the functions for ok, cancel, and keydown.
$scope.ok = function () {
console.log("ok");
$uibModalInstance.dismiss({completed: true});
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.keydown = function(event) {
var enterKeyCode = 13;
$uibModalInstance.dismiss({completed: true});
}
Any ideas on how to prevent the child from being created repeatedly when enter is pressed would be appreciated, thanks.
Try to disable the button when you click on it.
<button ng-disabled="aScopeVar" ng-click="setAScopeVarToTrue()">My button</button>
Don't forget to set aScopeVar to true after the child is created.

jquery modal: closing a modal and then having it available as a clickable option

I been scratching my head on this one for a while.
Writing a plugin in grails that calls on bootstrap-mini.js and most of its css. Everything works fine. The issue I am having is I have a remote form which onComplete runs java script:
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListModal/_modalcreate.gsp
<g:javascript>
function ${controller}CloseModal() {
var myClone=$('#BuildModal${id}').clone();
$('#BuildModal${id}').dialog().dialog('close');
$(".modal-backdrop").hide();
$('body').removeClass('modal-open');
//var myCloner = myClone.clone();
$('#${divId}1').hide().append(myClone);
//$('body').append(myClone);
<g:if test="${!disablecheck.equals('true') }">
var controller="${controller }";
var divId="${divId }";
$.get('${createLink(controller:"MailingListEmail", action: "getAjaxCall")}?ccontroller='+controller+'&divId='+divId,function(data){
$('#${divId}').hide().html(data).fadeIn('slow');
});
</g:if>
}
</g:javascript>
The bits at the top of the function is all the things I have tried so far.
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListEmail/contactclients.gsp
<div class="tbutton">
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender">
New Sender?</button>
<div id="mailerSenders1">
<g:render template="/mailingListModal/modalcreate" model="[title:'Add Senders Email', controller: 'mailingListSenders', callPage: 'form' , divId: 'mailerSenders', id: 'SENDERS' ]" />
</div>
And finally modelForm which is included on the top of the modalcreate.gsp (now shown)
<div class="modal fade" id="BuildModal${id}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<g:formRemote id="${controller}" name="urlParams" class="form-horizontal" url="[controller:controller, action:'save']"
update="BuildModal${id}" onComplete="${controller}CloseModal()"
>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>${title }</h3>
</div>
<div class="modal-body">
<div class="form-group">
<g:render template="/${controller }/${callPage }"/>
<g:submitToRemote class="myformsubmit" url="[controller:controller, action:'save']" update="BuildModal${id}" onComplete="${controller}CloseModal()" value="Create" />
</div>
</div>
</g:formRemote>
</div>
</div>
</div>
</div>
So it is a remote Form that submits can calls the above CloseModal
The question is when I Close this how do I make it available again when the user clicks the button to create new email ?
After adding all the cloning at the top of java script the only difference I was able to make was to make it display the backdrop on 2nd click so it went black on 2nd click but did not show up the modal content.
ok got it working by doing this:
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender"
Now adding
onClick="runCheck()"> .....
<g:javascript>
function runCheck() {
$('#mailerSenders1').show();
}
</g:javascript>
That seems to work fine, it now loads up the page, just to add when I did body it just loaded it up again from the commented out attempts, modal.hide etc did not work and the hide attempts just showed it up under some other layers of the same page.. anyways this works fine now. sorry

Categories