We Keep Coding

Jquery- dialog is not running my function

I have a table where values are filled based on a sql query. The values populate in the dialog box but when I click on a record, its not running my function. I want my function to only select the record id I have clicked on.For now I have put an alert in the function just to see if my function works and its not showing anything. My onClick = "addlink();" is not working.
function addreferral()
{
$.getJSON('libs/getsoldreferrals.php', function(data) {
$('#soldlist tr').not(':first').not(':last').remove();
$.each(data, function(key, val)
{
$('#soldlist').append('<tr><td><span id="myreferral" style="cursor:pointer;" onClick = "addlink();" >'+val.id +'</span></td><td></td><td>' + val.office + '</td><td></td><td>'+val.clientdetails+'</td><td></td><td>'+val.buyerorseller+'</td><td></td><td></td><td>'+val.address+'</td><td> </td></tr>'+'<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'+'<tr><td></td></tr>');
});
$('#soldlist tr').first().after();
});
var dialog, form
window.addlink = function addlink() {
alert("Hello");
}
dialog = $( "#dialog-form-referral" ).dialog({
autoOpen: true,
height: 450,
width: 800,
modal: true,
buttons: {
Cancel: function() {
dialog.dialog( "close" );
}
},
});

You have a syntax error. You forgot the closing quotation mark in your style tag.
Change the Markup of your span to the below:
<span id="myreferral" style="cursor:pointer;" onClick = "addlink();">
Pretty sure that should do it.

Try with onclick (small C), and not onClick. Also, try not to mix JavaScript with HTML.
HTH's
Stanko.

Modal message as javascript alert?

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
}
}
});

JQuery Dialog - only load when button click

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/

Custom confirm dialog with JavaScript

I would like to create a JavaScript function similar to confirm() that shows a dialog (a div with a question and 2 buttons) and returns true if the user clicks "Ok" or false otherwise.
Is it possible to do that using JavaScript/jQuery but without plugins (e.g. jQuery UI or Dialog)? Because I'm trying to reduce size and round trip times...
I tried to write this code, but I don't know how to make the function "wait" for the user click.
I would like to use my function in this way:
answer=myConfirm("Are you sure?")
In this way I could use the same function in several contexts, simply changing the question passed as a parameter. This is the same behavior of confirm()

Rather than waiting for the user's input and then returning from the function, it is more common in JavaScript to provide a callback function that will be called when the action you're waiting for is complete. For example:
myCustomConfirm("Are you sure?", function (confirmed) {
if (confirmed) {
// Whatever you need to do if they clicked confirm
} else {
// Whatever you need to do if they clicked cancel
}
});
This could be implemented along the lines of:
function myCustomConfirm(message, callback) {
var confirmButton, cancelButton;
// Create user interface, display message, etc.
confirmButton.onclick = function() { callback(true); };
cancelButton.onclick = function() { callback(false); };
}

If using jQuery, why not implement jQueryUI? And use the Dialog function as follows:
as a 2 part:
HTML
<div id="dialog-confirm" title="ALERT">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p>
</div>
Script
$( "#dialog-confirm" ).dialog({
resizable: false,
modal: true,
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
All in Script:
$(function() {
$("<div />").attr("id", "dialog-confirm").append(
$("<p />").text('Are you sure?').css("text-align", "center").prepend(
$("<span />").addClass("ui-icon ui-icon-alert").css({
float: 'left',
margin: '0 7px 20px 0'
})
)
).dialog({
resizable: false,
modal: true,
title: "ALERT",
buttons: {
"OK": function() {
answer=1;
$(this).dialog("close");
},
"Cancel": function() {
answer=0;
$(this).dialog("close");
}
}
});
});
jsFiddle

This really should be done with a callback. The closest thing to what you're after would be to use a publish and subscribe model with some custom events.
To do so:
When a user clicks the yes button, trigger a custom event called clickedYes. Do the same for "no"
$('#yesbtn').click(function(){
$(document).trigger('clickedYes');
});
$('#nobtn').click(function(){
$(document).trigger('clickedNo');
});
Now we need to "listen" or subscribe for those events and execute the appropriate action in context.
Lets create a hypothetical situation: Your user clicks delete and you want to confirm that choice.
First setup what you want to happen if they click yes:
$(document).unbind('clickedYes'); //Unbind any old actions
$(document).bind('clickedYes',function(){
//Code to delete the item
//Hide the popup
});
then what you want to happen if they click no:
$(document).unbind('clickedNo'); //Unbind any old actions
$(document).bind('clickedNo',function(){
//Hide the popup and don't delete
});
So we've setup actions that are listening for clickedYes or clickedNo. Now we just need to show the user the popup so that they have to click yes or no. When they do, they'll trigger the events above.
so your myConfirm() function will just do the following:
function myConfirm(msg){
//change the message to 'msg'
//Show the popup
}
So the order would be:
Bind triggers for the custom events to the yes and no buttons
Before prompting - unbind any old actions and attach your new ones
Present the user with a popup that'll cause them to trigger on of your actions.
This will allow you to call the function like this myConfirm('Are you sure'); It's not quite what you're after...but I don't think it's possible to do exactly what you want.

javascript Confirm replacement with return true/false

Since jquery UI dialog does not support returning true/false, I need some other way to replace a javascript confirm.
It has to return true/false, so that my validation processes in javascript will run:
var where_to_coupon = confirm(pm_info_msg_013);
if (where_to_coupon== true) {
doSubmit=true;
return doSubmit;

The only way I know of doing that is passing a callback to the function.
The problem you face is that JQuery UI will not block the execution like confirm to wait for user input so you need to open the dialog and when the user clicks an answer act accordingly.
If you use Jquery UI dialog you can bind the callback functions to the buttons.
For instance:
myConfirm("Are you sure?", function(){ [YES CODE] }, function(){ [NO CODE] });
Your custom confirm will look like this:
var myConfirm = function(msg, yesAction, noAction){
$.dialog{
[CODE],
buttons: {
yes: yeasAction,
no: noAction
}
};
};

jQuery UI can do what you want, you simply have to adjust your code to work in an async way. Ariel Popovosky gave an answer which attempts to wrap a dialog call into a simple function call, and would work well but would require the same basic sync/async code modifications that any change from window.confirm would require.
Using window.confirm we use a synchronous way of doing things--program halts while user makes a decision. See example: http://jsfiddle.net/9jY7E/
Using UI's dialog, we simply move the behavior which should happen on confirm into the behavior assigned to one of the UI buttons. The dialog shows, and the program continues to run. But because you moved your "ok" code into the functionality bound to the button, that code doesn't run until the user clicks it. The following link is the same example I showed with window.confirm, but has been modified to use UI dialog: http://jsfiddle.net/9jY7E/1/
I don't know of any replacement for window.confirm which works just like window.confirm but allows for your own styling. All dialog systems I know of work somewhat similar to UI.
Additional: At the following link you will find a 3rd example of the same external link confirmation using the methodology Ariel gave in his answer: http://jsfiddle.net/9jY7E/2/

This is a little convoluted, but it works for me. It sets a "global" variable and tests that value to see if the dialog should be displayed.
I know it probably isn't the most efficient method.
The confirmIt funciton returns true or false.
The reason for the setTimeout("confirmItConfirmed=false;",500); near the end is to reset the variable so the next time the function is called it won't just return true.
Some browsers do better at handling the auto height and width than others.
The notice function is a replacement for alert and confirmIt replaces confirm.
<html>
<head>
<title>jQuery Confirm & Alert Replacements</title>
<link type=text/css href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css rel=stylesheet />
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
<script type=text/javascript>
var confirmItConfirmed = false;
var jq = $.noConflict();
function notice(message,title,height,width) {
if (!title)
var title = document.title+' says...';
jq('body').append('<span id=noticeDialogSpan style=display:none></span>');
jq('#noticeDialogSpan').html('<div id=noticeDialog title="'+title+'">'+message+'</div>');
if (!width)
var width = jq('#noticeDialogSpan').width()+40;
if (!height)
if (jq('#noticeDialogSpan').height() > jq(window).height()-100)
var height = jq(window).height()-100;
else
var height = 'auto';
jq('#navMenu').hide();
jq('#noticeDialog').dialog ({
height: height,
width: width,
modal: true,
close: function(event,ui) {
jq(this).dialog('destroy');
jq('#noticeDialog').remove();
jq('#noticeDialogSpan').remove();
jq('#navMenu').show();
},
buttons: {
'Close': function() { jq(this).dialog('close'); }
}
});
}
function confirmIt(e,message,title,height,width) {
if (!confirmItConfirmed) {
if (!title)
var title = document.title+' says...';
jq('body').append('<span id=confirmationDialogSpan style=display:none></span>');
jq('#confirmationDialogSpan').html('<div id=confirmationDialog title="'+title+'">'+message+'</div>');
if (!width)
var width = jq('#confirmationDialogSpan').width()+40;
if (!height)
if (jq('#confirmationDialogSpan').height() > jq(window).height()-100)
var height = jq(window).height()-100;
else
var height = 'auto';
jq('#navMenu').hide();
jq('#confirmationDialog').dialog ({
height: height,
width: width,
modal: true,
close: function(event,ui) {
jq('#confirmationDialog').remove();
jq('#confirmationDialogSpan').remove();
jq(this).dialog('destroy');
jq('#navMenu').show();
},
buttons: {
'Confirm': function() {
jq(this).dialog('close');
confirmItConfirmed = true;
e.click();
},
'Cancel': function() { jq(this).dialog('close'); }
}
});
}
setTimeout("confirmItConfirmed=false;",500);
return confirmItConfirmed;
}
function testIt(e) {
if (confirmIt(e,'Are you sure you want to continue?','My Title'))
notice('You clicked Confirm','My Title');
}
</script>
</head>
<body>
<br />
<br />
Click HERE to test a link.
<br />
<br />
Click this button to test it too <input value='Click Me' type=button onclick="testIt(this)" />
</body>
</html>

This could also be done using boopup + callbacks:
Boopup.confirm("This is a boopup confirm!", function(agree) {
console.log(agree);
})
https://github.com/petruisfan/boopup