We Keep Coding

Calling Javascript function from an asp dropdownlist

I have an asp dropdownlist with a few selections and when I select a certain item from the list I want a javascript modal to open up. I have successfully been able to open the modal by using an html button after selecting the specific item from the drop down, but I want one less step.
Here is my code for the index changed event on the Drop down:
protected void ShipTo_Changed(object sender, EventArgs e)
{
foreach (DataListItem dli in cart.Items)
{
DropDownList drpShipto = (DropDownList)dli.FindControl("drpShipto");
if (drpShipto.SelectedItem.Text == "-Add New ShipTo-")
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "function", "showDialog('newShipTo')", true);
}
}
}
and here is what I have for the js :
<script>
$(document).ready(function () {
$('#newShipTo').dialog({
autoOpen: false,
draggable: true,
title: "Add New ShipTo",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
$('#editShipTo').dialog({
autoOpen: false,
draggable: true,
title: "Edit ShipTo",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
}
</script>
I know the function works, as I can swap out the call to the function to making a button visible that with the onclick set to showDialog('newShipTo')
Am I just not calling it correctly using the RegistarStartupScript

I am going to take a stab at answering.
In your drop down....add an onchange event calling showDialog('newShipTo')

Please refer the below URL
http://dotnetgallery.com/forum/thread127-Calling-Javascript-function-from-an-asp-dropdownlist.aspx
Regards.

Loading dynamic content into Bootstrap Popover after form submit

I'm trying to load content dynamically into a Bootstrap popover. When the form is submitted I can alert the value; that's working correctly. What I can't do is get the content of #popover-thanks to load in the popover, replacing the form with a thank you message.
// show the popover
$('#btn').popover({
html : true,
placement: 'top',
content: function() {
return $('#popover-form').html();
}
});
// form has been submitted
$(document).on('click', '#submit', function() {
var value = $('#value').val();
alert(value);
$('#btn').popover({
html : true,
content: function() {
return $('#popover-thanks').html();
}
});
});

i think you must Destroy the first popover to be able to make new one on same element:
$( '#btn' ).popover('destroy');
http://getbootstrap.com/javascript/#popovers-usage
Another solution, you can get the popover id (after show) like that:
var popoverID = $( '#btn' ).attr("aria-describedby"); // = 'popover123456' (random number)
replace the content (http://getbootstrap.com/javascript/#popovers), and then show it:
$( '#btn' ).popover('show');

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.

Avoid Multiple (40) jquery confirmation dialog boxes - reuse?

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.