Develop Reference

Click event of a button, located inside a select2 component, does not trigger

I don't know if I'm doing it wrong, but the "btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco" button click event isn't firing. I believe I'm wrong in building the event when select2 is loaded. Does anyone know how to help me?
Thanks :)
$("#MySelect").select2({
tags: "true",
createTag: function () {
// Dessabilita a inserção quando Enter for pressionada
return null;
},
placeholder: "Selecione uma opção",
allowClear: false,
width: '100%',
dropdownParent: genericModal,
language: {
noResults: function () {
return "Nenhum resultado encontrado";
}
},
templateResult: function (data) {
var $result = $("<span></span>");
//console.log('data', data.id);
$result.text(data.text);
//$result.append('<button data-id="' + data.id + '" class="btn">' + data.text + '</button>');
$result.append('<button data-id="' + data.id + '" class="btn btn-icon btn-default btn-outline btn-sm btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco"><i class="icon wb-edit"></i></button>');
return $result;
}
}).on('click', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (b) {
alert('Evento disparado!')
});
<div class="col-md-4">
<label asp-for="ParentescoTipoId" class="control-label">Tipo de Parentesco</label>
<select asp-for="ParentescoTipoId" asp-items="Model.ParentescosTipos" id="MySelect" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"><option value=""></option></select>
<span asp-validation-for="ParentescoTipoId" class="text-danger"></span>
</div>

For versions of Select2 before 4.0.0 (3.5.x and below), you should refer to this answer about binding to onSelect.
For newer versions of Select2, I have tried the newest version(4.1.0-rc.0), the following code could work for me:
$(document).on('mouseup', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (e) {
alert("Evento disparado!")
})
My whole working demo:
<select id="MySelect" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;">
</select>
#section Scripts{
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
$('#MySelect').select2({
minimumInputLength: -1,
placeholder: 'Search',
data: [{
id: 1,
text: "aaa"
}, {
id: 2,
text: "bbb"
}],
templateResult: function (data) {
var $result = $("<span></span>");
console.log('data', data.id);
$result.text(data.text);
$result.append('<button data-id="' + data.id + '" class="btn btn-icon btn-default btn-outline btn-sm btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco"><i class="icon wb-edit"></i></button>');
return $result;
}
});
});
//add this....
$(document).on('mouseup', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (e) {
alert("asdadad")
})
</script>
}

Instead of binding the click event to the dynamic element, you may try something like below within the Jquery ready function.
$("body").on('click', '.btn-select-pessoa-fisica-frm-pessoa-fisica-parentesco', function (b) {
alert('Evento disparado!');
});
Please confirm if it helps.

Distinguish between 2 jquery dialogs

I have a jquery dialog that adds a name to a table as well as a delete button beside that name. I am trying to add the functionality that deletes that name if a user clicks the delete button. I can't seem to make it so that when a user clicks on the delete button, the deleteUser function is called... nothing happens when i click the delete button.
dialog = $("#add-dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Add Ownertest": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
addform[0].reset();
allFields.removeClass("ui-state-error");
}
});
deleteDialog = $("#delete-dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Delete Owner": deleteUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
deleteform[0].reset();
allFields.removeClass("ui-state-error");
}
});
These dialogs are called here:
addform = dialog.find("form#addUser").on("submit", function (event) {
event.preventDefault();
addUser();
});
deleteform = dialog.find("form#deleteUser").on("submit", function (event) {
event.preventDefault();
deleteUser();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
$("#delete-user").button().on("click", function () {
deleteDialog.dialog("open");
});
HTML is below:
<div id="add-dialog-form" title="Add Owner">
<form id="addUser">
<fieldset>
<label for="owners">NameOne</label>
<input type="text" name="owners" id="owners" value="" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="delete-dialog-form" title="Add Owner">
<form id="deleteUser">
<fieldset>
<label for="owners">NameTwo</label>
<input type="text" name="owners" id="owners" value="" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
And the part of the addUser() function that adds the delete button in the table:
var tblRow = $("<tr>" +
"<td>" + name.val() + "<button id='delete-user' style='float:right' title='Delete' class='btn btn-danger btn-xs actionbutton'><span class='glyphicon glyphicon-remove'></span></button>" + "</td>" +
"</tr>");
tblRow.find('button#create-user').button().on('click', function () {
dialog.dialog("open"); // where dialog is instance of jq dialog, dialog = $( "#dialog-form" ).dialog({...})
});

Contents of Div Dialog Content shows even when Jquery Dialog isn't open

I am using Grails 3.1.9 as the platform, my problem is that when the button Add Item has not been clicked, I can see the contents of the dialog box at the bottom of the page, and when the button is clicked, the contents disappear from the bottom. How do I prevent this from happening? Any help you can provide will be greatly appreciated.
Before Clicking Add Item Button
After Clicking Add Item Button
show.gsp Code is:
<div id="dialogEntry" title="Item Entry">
<fieldset class="form">
<form id="entryForm" action="" method="post" ><input type="hidden" name="_method" value="PUT" id="_method" />
<input type="hidden" name="invoice.id" value="${invoice.id}" />
<div class="fieldcontain required">
<label for="product">
<g:message code="orderItem.product.label" default="Product" />
<span class="required-indicator">*</span>
</label>
<input type="text" name="product" value="" required="" id="product" />
<input type="hidden" id="prodid" value="" />
<div class="fieldcontain">
<label for="quantityInStock">
Quantity in Stock
</label>
<input type="text" id="quantityInStock" value="" readonly="true" />
</div>
</div>
<div class='fieldcontain required'>
<label for='quantity'>Quantity
<span class='required-indicator'>*</span>
</label><input type="number" name="quantity" value="1" required="" min="1" id="quantity" />
</div>
<div class='fieldcontain required'>
<label for='price'>Price
<span class='required-indicator'>*</span>
</label><input type="number" name="price" value="" required="" step="0.01" min="1.00" id="price" />
</div>
<div class="fieldcontain">
<label for="totalAmount">
Total Amount
</label>
<input type="null" name="totalAmount" value="" id="totalAmount" />
</div>
</form>
</fieldset>
</div>
<script>
var editId;
document.getElementById("add").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).dialog({
autoOpen: true,
modal: true,
width: 500,
buttons: [
{
text: "Save",
click: function() {
var quantity = $('#quantity')[0].value;
var quantityInStock = $('#quantityInStock')[0].value;
if (quantity.length == 0) {
alert('Quantity is required');
$('#quantity')[0].focus();
return;
}
if (parseInt(quantity) > parseInt(quantityInStock)) {
alert('Quantity cannot be served as Quantity in Stock is just ' + quantityInStock);
$('#quantity')[0].focus();
return;
}
$( this ).dialog( "close" );
var price = $('#price')[0].value;
var prodid = $("#prodid")[0].value;
// submit to server
//var form = $('#entryForm')[0];
if (editId != 0) {
$.ajax({
type: "POST",
url: "${resource(dir:'orderItem/updatex')}/" + editId,
data: {'productid':prodid, 'quantity':quantity, 'price':price},
async: true,
cache: false,
success: function (result) {
//alert('OK ' + result.success.message)
update(editId)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
} else {
$.ajax({
type: "POST",
url: "${resource(dir:'orderItem/savex')}/" + editId,
data: {'productid':prodid, 'quantity':quantity, 'price':price, 'invoiceid':${invoice.id}},
async: true,
cache: false,
success: function (result) {
var id = result.success.id
//alert('OK ' + id)
update(id)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
}
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
}
</script>

<div id="dialogEntry" title="Item Entry">
Change this to:
<div id="dialogEntry" title="Item Entry" style="display:none;">
Change this:
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).dialog({
to
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).show().dialog({
Change this to:
text: "Cancel",
click: function() {
$( this ).dialog( "close" ).hide();
}

How can I correctly close this JQuery dialog?

I am absolutly new in JavaScript and JQuery and I have the following problem.
Into a page I have this dialog:
<div id="dialogReject" title="">
<table style="visibility: hidden;" id="rifiutaTable" border="0" class="standard-table-cls" style="width: 100%!important">
<tbody style="background-color: #ffffff;">
<tr>
<td style="font: 16px Verdana,Geneva,Arial,Helvetica,sans-serif !important">Inserire note di rifiuto</td>
</tr>
<tr>
<td>
<textarea style="visibility: hidden;" rows="5" cols="70" id="myRejectNote"></textarea>
</td>
</tr>
<tr>
<td>
<input class="bottone" readonly="readonly" type="text" value="Rifiuta" onclick="rifiuta()"/>
</td>
</tr>
</tbody>
</table>
</div>
that I think is created by this JQuery script:
$(document).ready(function() {
larghezza = '950px';
lunghezza = '470px';
lunghezza2 = '530px';
$("#dialogReject").dialog({
autoOpen: false,
//width:'335px',
width:'600px',
modal: true,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
});
As you can see this dialog contains 2 buttons implemented by 2 input tag, these:
<td style="text-align: right">
<input class="bottone" readonly="readonly" type="text" value="Annulla" onclick="javascript:window.close()"/>
<input class="bottone" readonly="readonly" type="text" value="Rifiuta" onclick="rifiuta()"/>
</td>
When the user click on the Annulla button I want that the dialog is closed.
Actually I tryied to use the window.close() function but it can't work.
I think that to cloe this dialog I have to use the same event that is performed when the user use the ESC keyboard button that close the dialog with a simple animation.
But I really have no idea about how do it. Can you help me to do it?
Tnx

Try $("#dialogReject").dialog( "close" );
For more info, read https://api.jqueryui.com/dialog/
To bind it, change
<input class="bottone" readonly="readonly" type="text" value="Annulla" onclick="javascript:window.close()"/>
to
<input id="closeDialog" class="bottone" readonly="readonly" type="text" value="Annulla"/>
and add this after: $("#dialogReject").dialog({ [..your code..] });
$("#closeDialog").click(function(){
$("#dialogReject").dialog( "close" );
})

You have to listen for an event in your javascript file.
First set an id to your close button, i'm using #closeButton here :
$(document).ready(function() {
larghezza = '950px';
lunghezza = '470px';
lunghezza2 = '530px';
$("#dialogReject").dialog({
autoOpen: false,
//width:'335px',
width:'600px',
modal: true,
show: { effect: "blind", duration: 500 },
hide: { effect: "blind", duration: 500 }
});
$("#closeButton").click(function(){
$("#dialogReject").close();
});
});

As the answer was given by Alex and kaz
$("#dialogReject").close();
Or you can use button which can be created through jquery also
buttons: {Rifiuta: funstion()
{
rifiuta()
},
Annulla: function() {
$( this ).dialog( "close" );
}
For reference:
https://jqueryui.com/dialog/#modal-confirmation
$( "#dialogReject" ).dialog({
autoOpen: open,
//width:'335px',
width:'600px',
modal: true,
show: { effect: "blind", duration: 500 },
hide: { effect: "blind", duration: 500 },
buttons: {Rifiuta: funstion()
{
rifiuta()
},
Annulla: function() {
$( this ).dialog( "close" );
}
}
});

button into tooltip using qtip plugin doesn't work

I wrote this code below used qtip plugin for html link :
$(document).ready(function() {
$('#login').qtip({
content: '<table><tr><td>Username</td><td><INPUT type="text" value="" name="username" title="Enter Username" class="txtbx"/></td>' +
'<td>Password</td><td><INPUT type="password" value="" name="password" title="Enter password" class="txtbx"/></td>' +
'<td><button id="loginbtn" type="submit" >login</button></td></tr></table>',
show: { when: { event: 'click' },
effect: { type: 'fade', length: 200 }
},
hide: { when: { event: 'unfocus' },
effect: { type: 'fade', length: 430 }
},
position: {
adjust: { resize: true
},
corner: {
target: 'bottomLeft',
tooltip: 'topLeft'
}
},
style: {
name: 'dark',
width: { max: 700 }
}
});
});
but the submit button doesn't work !!!!??? any help here !!

Does replacing <button id="loginbtn" type="submit" >login</button> with
<input name="loginbtn" id="loginbtn" type="submit" value="login" />
work?
Also, I don't see a form element anywhere with an action or method attribute wrapping all of your form inputs. Hence, I don't think the browser knows what to do when you submit the form.