We Keep Coding

Making button action on click on select2 js

i'm really looking for any kind of direction or help, in my code below, what kind of way i can do to make an action when the button "Add new item" is clicked.
$('#my_select').select2({
placeholder: 'Name',
tags : true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");
$result.text(data.text);
if (data.newOption) {
$result.append("<button class='add btn btn-secondary btn-sm ml-10'> + Add New Item</button>")
}
return $result;
},
});
thank's.

I see two approaches here:
You can assign pass onclick attribute to the button directly
Pass an id to the button, and attach a click event to the id using jQUery

Add jQuery Confirm before Logout

I'm new to jQuery and I'm using the confirm box from here. But I'm facing a problem where my current page redirects back to Login page before even confirming my logout in the dialog box.
Below is my script:
$('a#logout').on('click', function () {
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
// $.alert('Confirmed!');
return true;
},
cancel: function () {
// $.alert('Canceled!');
return false;
},
}
});
if(isConfirmed == true){
window.location.href="extra-login.html";
}
});
And this is my HTML
<a href="extra-login.html" id="logout">
Log Out <i class="entypo-logout right"></i>
</a>
Any help would be appreciated. Thanks in advance!

The problem is your anchor elements default action is to take the user to login page which is not prevented.
You can call the event.preventDefault() to do this.
Also the confirm plugin looks like a non blocking plugin, so you need to move the redirect code to the success handler.
$('a#logout').on('click', function(e) {
e.preventDefault();
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function() {
window.location.href = "extra-login.html";
},
cancel: function() {},
}
});
});

I'm guessing the dialogue isn't blocking (I don't know of any that are in JS). You should just put your success code in the callback for the confirm button, like so:
$('a#logout').on('click', function () {
$.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
// $.alert('Confirmed!');
//I'm guessing this function is called when the button is clicked.
window.location.href="extra-login.html";
return true;
},
cancel: function () {
// $.alert('Canceled!');
return false;
},
}
});
});
But the main reason your code is redirecting immediately is the href tag in your link. You basically have a link to another page, that also tries to run some JS, but because it's a link it redirects before the JS can even run. Do this instead:
<a href="#" id="logout">
Log Out <i class="entypo-logout right"></i>
</a>

i am new,too
i hope my suggestion is right but why don't you put href in confirm function.
$('a#logout').on('click', function (event) {
var isConfirmed = $.confirm({
title: 'Logout Confirmation',
content: 'Are you sure you want to logout?',
buttons: {
confirm: function () {
window.location.href="extra-login.html";
},
cancel: function () {
event.preventDefault();
},
}
});
});

Why don't you use like this -
$('a#logout').on('click', function(){
if($(this).confirm({title: 'Logout Confirmation', content: 'Are you sure you want to logout?'})){
window.location.href="extra-login.html";
}else{
return false;
}
});

Object doesn't support property or method 'confirm'

I have a WebForm which inherits from a MasterPage and in the WebForm I made use of jQuery and JavaScript which I am new to since I want to create a dialog box with customised buttons, and the default confirm() method does not allow any changes, so I have made use of resources and codes from this website. I'm not sure where to put the JS sources, so I have placed them in between (do tell me if I'm doing it wrong):
<asp:Content ID="Content2" ContentPlaceHolderID="CSS" runat="server">
</asp:Content>
The sources I have from the reference are:
<script src="~/jquery.confirm.js"></script>
<script src="~/jquery.confirm.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
And as copied from the reference as well, this is my jQuery dialog box:
$("#Button1").confirm({
title: "Confirmation Message",
text: "Are you sure that the information you have entered is accurate?",
confirm: function (button) {
return true;
},
cancel: function (button) {
return false;
},
confirmButton: "Yes",
cancelButton: "No"
});
This error always pops out whenever I try to run my code:
Object doesn't support property or method 'confirm'.
I have tried using various JS sources and jQueries since I'm new to these but all of them didn't work. How do I resolve this problem?

Try this:
$('#Button1').on('click', function () {
$.confirm({
title: "Confirmation Message",
text: "Are you sure that the information you have entered is accurate?"
confirm: function (button) {
return true;
},
cancel: function (button) {
return false;
},
confirmButton: "Yes",
cancelButton: "No"
});
});

record being deleted without confirmation?

I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.

You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation

Performing action a button click event, button being placed inside dojox.grid.DataGrid.

I have a dojox.grid.DataGrid. In this a set of values are being displayed along with last 2 columns being filled up with buttons which are created dynamically according to data being retrieved from database using formatter property in gridStruture. Now i am getting the my grid fine. Buttons are also coming up fine. What i need to do now is when i click on a particular button on that button click event i redirect it to a new URL with a particular value(A) being passes as a query string parameter in that URL. And i don't want my page to be refreshed. Its like when a button is clicked it performs action on some other JSP page and displays message alert("Action is being performed").
My java script code where i have coded for my data grid ::
<script type="text/javascript">
function getInfoFromServer(){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) {
success:postToPage(result),
alert('Load was performed.');
},"json");
}
function postToPage(data){
alert(data);
var storedata = {
identifier:"ActID",
items: data
};
alert(storedata);
var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
var gridStructure =[[
{ field: "ActID",
name: "Activity ID",
classes:"firstName"
},
{
field: "Assigned To",
name: "Assigned To",
classes: "firstName"
},
{ field: "Activity Type",
name: "Activity Type",
classes:"firstName"
},
{
field: "Status",
name: "Status",
classes: "firstName"
},
{
field: "Assigned Date",
name: "Assigned Date",
classes: "firstName"
},
{
field: "Assigned Time",
name: "Assigned Time",
classes: "firstName"
},
{
field: "Email",
name: "Send Mail",
formatter: sendmail,
classes: "firstName"
},
{
field: "ActID",
name: "Delete",
formatter: deleteact,
classes: "firstName"
}
]
];
//var grid = dijit.byId("gridDiv");
//grid.setStore(store1);
var grid = new dojox.grid.DataGrid({
store: store1,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true
},'gridDiv');
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(){
var items = grid.selection.getSelected();
dojo.forEach(items, function(item){
var v = grid.store.getValue(item, "ActID");
getdetailsfordialog(v);
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
showDialog();
}, grid);
});
}
function sendmail(item) {
alert(item);
return "<button onclick=http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'\">Send Mail</button>";
}
function deleteact(item) {
alert(item);
return "<button onclick=http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\">Delete</button>";
}
</script>
I am getting grid data using $.get call. In the above code field Email and ActID are actually buttons being created when each time function sendmail and deleteact are being called up in formatter. Grid is displayed. Also the value of alert(item) in both functions are coming up right that is there respective values. Like for alert(item) in Delete i am getting ActID and alert(item) in sendmail getting "shan#gmail.com" Now i want that on a particular button click(button in Sendmail column) my page
http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'
and button click in Delete column this page
http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\"
opens up with value of items being retrieved from database. I have applied a rowClick event also which is also causing problem as when i click u button my Rowclick event fires instead of button click event. How to do this. I thought of applying click event to each button on grid. But there ID i don't know. Please help me on this one. Thanks..

I think, what you need is adjusting your server-side code to handle ajax post requests for sending mail and use dojo.xhrPost method when user clicks button. Your JS code may look like this:
function sendMailHandler(evt, item) {
dojo.xhrPost({
url: "/2_8_2012/jsp/SendMailReminder.jsp",
content: {
'SendMail': item
},
error: function() {
alert("Sent failure");
},
load: function(result) {
alert("Email sent with result: " + result);
}
});
dojo.stopEvent(evt);
}
function sendmail(item) {
return "<button onclick='sendMailHandler(arguments[0], \"" + item + "\")'>Send Mail</button>";
}
Note that dojo.stopEvent(evt); in sendMailHandler is used to stop event bubbling and prevents RowClick raising.
There is also dojo.xhrGet with similar syntax to perform ajax GET requests, which you can use instead of jQuery's $.get. You can also use dojo.xhrGet instead of dojo.xhrPost in my example, because there is chance that it will work with your back-end without tweaking, but POST (or ajax form submission) would be more semantically correct.
And about "Tried to register an id="something", you should adjust your code to avoid IDs duplication. Or show your code causing errors.