I'm trying to do an implementation with SweetAlert2 where create some buttons inside the property "html". This is within a click function which in turn is within a Controller.
I tried to add in a setTimeOut () and within the $ apply () as code below:
setTimeout(function () {
$scope.$apply(function () {
swal({
title: "Lançamento por Código",
width: 400,
html: "" +
" <div>" +
" <input type='button' id='btn0' name='btn0' value='0' />" +
" </div>" +
showCancelButton: true,
confirmButtonColor: "#FFB200",
cancelButtonColor: "#FFB200",
colorHoverButton: "#5B2E90",
confirmButtonText: "Confirmar",
cancelButtonText: "Cancelar",
closeOnConfirm: true,
reverseButtons: true,
input: "text"
}).then(function () {
});
})
},0);
For this button I created, I try to create a click event as the code below:
setTimeout(function () {
$scope.$apply(function () {
$("input[name='btn0']").on("click", function () {
$scope.valorLancProduto += "0";
$('.swal2-input').val($scope.valorLancProduto);
});
})
},0);
I tried to put the same into the init () function and a click function. My problem arises now, click this event is not working, it is not called. How can I solve this?
Can change the call from my onclick event, was as follows:
$(document).on('click', "#btn0", function () {
Thanks.
Related
I have attempted to create a custom confirm UI dialog box, which works perfectly on the 1st attempt, and then on a second attempt of running it, I no longer get alerted of my choice as well as the window does not close. Why is that? What else am I doing wrong here that I perhaps overlooked?
Here is the HTML and Javascript in question:
<input type="button" id="Button" value="Click Me" />
$('#Button').click(function () {
confirmUI('is OK?', 'confirm', function () {
alert('click OK');
}, function () {
alert('click Cancel');
});
});
var confirmUI = function (text, title, callbackOkClose, callbackCancelClose) {
var $dialog = $('<div id="confirm_' + new Date().getTime().toString() + '"></div>');
$dialog.html('<div>' + title + '</div><div>' + text + '<div style="width:100%;"><input type="button" id="confirmCancel" value="Cancel" style="float:right;" /><input type="button" id="confirmOk" value="OK" style="float:right;margin-right: 10px" /></div></div>');
$('body').append($dialog);
var buttonString = '';
$dialog.jqxWindow({
minWidth: 300,
minHeight: 80,
draggable: true,
initContent: function () {
$('#confirmOk').jqxButton({
template: 'primary'
});
$('#confirmCancel').jqxButton({
template: 'default'
});
},
resizable: false,
closeButtonAction: 'close',
isModal: true,
okButton: $('#confirmOk'),
cancelButton: $('#confirmCancel')
});
$dialog.on('close', function (e) {
console.log('1');
if (e.args.dialogResult.OK) { //ok
if (callbackOkClose) {
callbackOkClose();
}
} else { //cancel or close
if (callbackCancelClose) {
callbackCancelClose();
}
}
});
return $dialog;
};
Here is a jsfiddle: http://jsfiddle.net/v0re8jeu/
Because you are creating that dialog for every button click, so things like $('#confirmOk') are no longer unique and return the selector for the button you clicked on first time. You should remove it from dom on close for the next one to work:
$dialog.on('close', function (e) {
console.log('1');
$dialog.remove();
I have js/jquery dialog that has an some html input buttons that allow the user to select a color. The button when clicked should call the javascript function changeColor. I have reduced the code to a minimal set, yet when clicking the one of the color buttons I get an html "Reference Error: can't find variable: changeColor" error. Not sure what I am missing.
function changeColor(themeColor) {
var a = 1;
}
$('#change-theme').on('click', function() {
$('#theme').dialog({
width: 500,
resizable: false,
show: 'slide',
autoOpen: false,
modal: true,
buttons: [{
text: "Save",
tabIndex:-1,
'class':'dialog3_buttons',
click: function(event) {
$(this).dialog("close");
return true;
}
}, {
text: "Cancel",
tabIndex:-1,
'class':'dialog3_buttons',
click: function(event) {
$(this).dialog("close");
return false;
}
}]
})
.height("auto");
$("#theme").dialog( "option", "title", "Theme Picker - click a color to preview" );
$("#theme").html(
"<input type='button' class='color-button white-btn' id='color-button' name='white' onclick='javascript:changeColor()' >" +
"<input type='button' class='color-button black-btn' id='color-button' name='black' onclick='javascript:changeColor()' >"
);
$('#theme').dialog('open');
});
You have to assign the function to a globally available scope if you want to call it from html like you do in your example
Add this line to your code
window.changeColor = changeColor;
See this working example https://jsfiddle.net/09ghrhap/1/
I guess you need to place the function into the <head></head>
This is how i open the dialog box i found a tutorial long ago and i forgot the link to that tutorial
$("#dialog1").html("Mr. " + "<span id='name'>" + data[i].name + "</span>" + "has a building property in <span id='address'>" + data[i].address + "</span>");
$("#dialog1").dialog({title: pml});
$("#dialog1").dialog("open");
and this is how i create the dialog box
var div = $("<div id='dialog1'>");
$("body").prepend(div);
$("#dialog1").dialog({
autoOpen: false,
resizable: false,
modal: true,
//title: "Modal",
height: 250,
width: 400,
buttons: {
"Add": function() {
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
},
"close": function () {
$(this).dialog('close');
}
}
});
Currently the button add and no has function of closing the dialog box but i want to add a function in a way that when add button(which is inside the dialog box) is clicked i will get the value of the span in the html of the dialog so that i can use it as parameter for ajax request
You can simply execute function in "Add" function:
...
"Add": function() {
$(this).dialog('close');
somefunction($('#span_id').text()); // #span_id = id of span whitch you want to get text from
},
...
and
function somefunction(text) {
// ajax call
}
I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!
I'm new to jQuery and having difficulty in passing a variable to a jQuery UI Dialog box. When clicking "Yes" the browser should redirect to localAuthorityDelete and remove the appropriate record.
<script type="text/javascript">
$(document).ready(function(){
$('#deleteButton').click(function(){
$('#deleteText').dialog({
modal:true,
resizable: false,
buttons: {
'Yes': function() {
window.location = "../php/localAuthorityDelete.php?laID="
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
});
});
});
</script>
I have many delete buttons:
<input type="button" id="deleteButton" name="deleteButton" value="Delete">
Each delete button is in a table next to the record which should be removed. I was doing this with:
Delete
But need to take advantage of jQuerys Dialog box. If someone could help me I would be very greatful. I have tried wrapping the above JS in a function which takes one variable but it does not run.
Thanks for your help.
Mike
Looks like you have multiple deleteButtons, however id for a html element should be unique.
So change the way you render the delete button to as follows:
<input type="button"
id="delete-<?php echo $row_laID['laID'];?>"
class="deleteButton"
name="deleteButton"
value="Delete"
/>
Now you can get the id of the element to be deleted from the id of the delete button.
And the click handler should be now bound to .deleteButton instead of #deleteButton.
<script type="text/javascript">
$(document).ready(function(){
$('.deleteButton').click(function(){
var id = this.id.replace(/[^0-9]/g, "");
$('#deleteText').dialog({
modal:true,
resizable: false,
buttons: {
'Yes': function() {
window.location = "../php/localAuthorityDelete.php?laID=" + id;
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
});
</script>