Im pretty new in Modal Alerts World and im trying to make modal messages as alerts inside a javascript function, first change the div innerHtml and then show the message i don't know if is posible.
<script type="text/javascript">
function myalert() {
alert("My alert");
}
</script>
Im working with that example: http://jsfiddle.net/Hu55H/
As i said i need it like a onclick function, because i need to call it by javascript (like alerts).
Im just asking if is possible to do it.
Hope you all can help me!
You need this, I think:
$('selector').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
//Code
},
Cancel: function () {
//Code
}
}
});
Related
I am trying to display the Jquery dialog when the JSP loads. I check for a flag from the bean (showPopupFlag), so this is different from user clicking a button on a already loaded page.
I am trying to push some data into the pop when it displays using the dialogContent.
Is this possible to send/push data to the dialog (I know it is) but some how I am missing something. Any help is appreciated. - Thanks
My html code is
<div id="dialogId" title="JqueryDialogTest">
<div id="dialogContent"></div>
</div>
My included Js is
$(document).ready(function () {
$(function(){
$("#dialogId")
.dialog({autoOpen: false, modal : true} );
} );
});
$(function(){
if($("#showPopupFlag").val() === "true") {
$("#dialogContent").html($("#displaySubjectNotFoundPopup").val());
$("#dialogId").dialog("open");
}
});
You are messing up the auto execute function and the document ready block. So you can do achieve it by :
//document ready block
$(document).ready(function () {
//initialize the dialog ui box
$("#dialogId").dialog({
autoOpen: false,
modal: true
});
//auto executing function
//or you could simply remove the function and let the code block be executed on document ready
(function(){
if($("#showPopupFlag").val() == "true") {
$("#dialogContent").html("someValue");
$("#dialogId").dialog("open");
}
}());
});
And here is the demo JSFIDDLE
What I want is that I have few links like
sample Link 1 sample Link 2
and I want to call the static html when user clicks the link. For that I have written a code
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.popup-link').on('click',
function() {
var dialog = new A.Dialog({
bodyContent: 'Loading...',
centered: true,
title: 'Sample Popup Content',
width: 400,
height:600
}
).render();
dialog.plug(
A.Plugin.IO,
{
autoLoad: false,
uri: '/html/sample.html'
}
);
dialog.io.start();
});
});
but this does not work, it simply does not call the function when I click the link, I also tried this, but same thing
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(A){
.....
......
Any idea what is wrong here?
Finally I got why it was not working. I was using the same object "A" in the click function as well.
it should be like this: (have a look at the variable name event)
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(event){
.....
......
I don't know much about AUI but if you want to achieve same task using jQuery you can achieve like this
i.e
<script>
$(document).ready(function() {
$('.popup-link').click(function(){
alert($(this).text());
});
});
</script>
Or
Using Javascript
i.e
Link
<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
}
</script>
HTH
Using JQuery Dialog http://jqueryui.com/dialog/#modal-confirmation
The dialog box appears whenever the page loads I only want it to appear when 'Remove Invoice' is clicked.
i've tried:<input id="RemoveInvoice" type="button" value="Remove Invoice" onclick="ConfirmDeleteInvoice()" />
then putting the actual JS inside a ConfirmDeleteInvoice function:
function ConfirmDeleteInvoice() {
// $(function () { //removed this line and added the above line
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Are you sure you want to delete this invoice": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
}
ERROR: JavaScript runtime error: 'ConfirmDeleteInvoice' is undefined
Sorry still a beginner at JS so please bear with.
Thanks
You've got an extra trailing }); right before your last closing brace, take that out and it'll work.
Also, in my fiddle you'll see I've added the click event in jQuery, as onclick inside HTML is considered bad practice. I did this by adding:
$("#RemoveInvoice").click(ConfirmDeleteInvoice);
See here: http://jsfiddle.net/P4VHw/
I'm working on fixing up a legacy web application with jQuery.
I have a form that has 40 buttons that each have some type of confirmation that use javascript confirm. I want to switch these over to use the jquery modal dialog.
I have programmed several of them like below and they work fine. Problem is that there is 40 of them on the form - so don't want to have to program 40 separate modal boxes. The only thing that is really changing is the javascript that is called when the Yes button is clicked
Any suggestions?
Code called on button:
$("#confirm1dialogTitle").html("Approve?");
$("#confirm1dialogText").html("Do you want to approve this request?");
$('#confirm1dialog').dialog('open');
Embedded javascript:
<script type="text/javascript">
$(function() {
$("#confirm1dialog").dialog({
bgiframe: true,
autoOpen: false,
width: 350,
height: 350,
modal: true,
buttons: {
'Yes': function() {
window.document.forms[0].FDDStatus.value = "Approved";
window.document.forms[0].DivisionApproval.value = "Yes";
window.document.forms[0].setApprovalFields();
},
'No': function() {
$(this).dialog('close');
}
}
});
});
</script>
Embedded HTML:
<div id="confirm1dialog" title="<span id='Title'>Title</span>">
<div id="users-contain" class="ui-widget">
<form>
<span id="confirm1Text"></span>
</form>
</div>
</div>
you can put the javascript that is changing in a function object, then reuse it..
lets assume that you you from looks like this:
<form><input id='btn1' /><input id='btn2' /></form>
then you make a helper function:
var confirmHelper = function(id, yesCallback) {
$(id).click(function() {
$(function() {
// the code from you example
$("#confirm1dialog").dialog({
bgiframe: true,
autoOpen: false,
width: 350,
height: 350,
modal: true,
buttons: { 'Yes': yesCallback, 'No': function() { } }
}
}
}
}
then you apply it to your buttons:
confirmHelper('btn1' function() {
// your callback from before
window.document.forms[0].FDDStatus.value = "Approved";
window.document.forms[0].DivisionApproval.value="Yes";
window.document.forms[0].setApprovalFields();
});
confirmHelper('btn2' function() {
// your other javascript code
});
like so for the 40 buttons :)
You can write 40 functions in javascript (the ones that have to be executed when the yes button is pressed) and use only one modal box.
I don´t know what your click() function looks like, but it is easy to add a variable there using for example a rel attribute on the link you're clicking, a class, etc. Depending on the variable, you could execute the required function.
I'm trying to impliment a confirmation box, but I need to edit the text with html. So I found the jquery "confirm override" here:
http://www.ericmmartin.com/projects/simplemodal-demos/
He mentions here about styling the string with html:
http://www.ericmmartin.com/projects/simplemodal/
But I don't inderstand where in my function I am supposed to do that? Here is the function:
$(document).ready(function () {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow: function (dialog) {
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
Thank you for any help!
Basically instead of confirm("Continue to the SimpleModal Project page?", function () I need to have an unordered list in ther (terms of service)
Have you tried passing HTML as the first argument?
Your code should work fine like this
confirm('<ul><li>somedata</li><li>moredata</li></ul>', function(){});
because your confirm function appends the message variable.