dialog get html span value on click jquery - javascript

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
}

Related

jQuery - wait until confirmation popup returns value

So I have a table of records, where everyone of them has a remove button. I want to add a confirmation popup, which will shows up when button clicked.
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
My remove button event:
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
var name = $(this).siblings(".someClassForNameHolder").text();
var urlPath = $("#hiddenForUrl").val();
Application.postRecord(name, "Remove", urlPath);
}
});
Btw, i have few following points:
1) I can't provide every record in the table with unique ids, so I have to keep my data collections (name variable) inside my removeButton event (to be able to use this.sibling...).
2) I want my script to wait until $confirmDialog returns value and only then continue code execution.
Just assign your urlPath to a global variable, and execute the POST inside the OK handler:
var nameToRemove, urlPathToRemove;
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
Application.postRecord(nameToRemove, "Remove", urlPathToRemove);
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
nameToRemove = $(this).siblings(".someClassForNameHolder").text();
urlPathToRemove= $("#hiddenForUrl").val();
}
});

Why is html call to js function getting html can't find variable error?

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>

Clicking on element from jQuery dialog generated by function

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!

Closing .aspx as a fancybox popup with a button

I have a javascript function that makes a popup and loads an .aspx page inside the popup.
Here is my code:
function moveEvent(doTheMove) {
var selectedNotesList = getSelectedNoteIDs();
if (doTheMove) {
$.fancybox({
'autoScale': false,
'type': 'iframe',
'height': 225,
'width': 800,
'href': 'Utilities/MoveFileTemplate.aspx?eventID=' + selectedNotesList +
'&oldEventCaseFile=' + $('#hidCaseFile').val(),
onComplete: function () {
$('#fancybox-overlay').unbind();
},
onClosed: function () {
$("#viewNotesGrid").flexReload();
}
});
}
else
showMessage("No expenses are selected.");
}
In my .aspx page I have 3 radio buttons, a DropDownList and 2 buttons. What I am trying to do is close the popup when the user clicks on the "cancel" button instead of having to press the "X" button in the top corner. (When the cancel button is pressed it has to mimic the "X" button so that the "onClosed:" can fire and reload my flexigrid)
Any suggestions?
you can try
var theBox;
...
function moveEvent(doTheMove) {
...
theBox = $.fancybox({
'autoScale': false,
'type': 'iframe',
'height': 225,
'width': 800,
'href': 'Utilities/MoveFileTemplate.aspx?eventID=' + selectedNotesList +
'&oldEventCaseFile=' + $('#hidCaseFile').val(),
onComplete: function () {
$('#fancybox-overlay').unbind();
},
onClosed: function () {
$("#viewNotesGrid").flexReload();
}
});
...
} //close the moveEvent function
then on the onclick of your cancel button call
window.parent.theBox.close();
EDIT(OP): it is actually: parent.$.fancybox.close();
client side
window.close(); as javascript code in
EDIT:
Server side
Page.RegisterStartupScript("anykey","window.close();");

jQuery UI dialog - text not selected second time shown

I am trying to simulate the internal javascript function prompt with the jQuery UI dialogs.
Almost work perfectly - just one minor error :-)
When the dialog is shown a second time (without a page reload) the text in the input field is not selected - why.
I use this code:
function modalprompt(text, title, prompt, callback) {
var newDiv = $("<div title='" + title + "'/>");
function okreply() {
newDiv.dialog("close");
if (callback) callback($("#promptid").val());
}
function cancelreply() {
newDiv.dialog("close");
if (callback) callback(false);
}
newDiv.keyup(function (e) {
if (e.keyCode == 13) {
okreply();
}
});
/*
newDiv.focus(function()
{
this.select();
});
*/
var htmltext = "<p>" + text + "</p>";
htmltext += "<input id='promptid' type='text' name='promptid' value='" + prompt + "' style='width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box;'>";
newDiv.html(htmltext).dialog({
modal: true,
width: 480,
show: "blind",
hide: "blind",
focus: function (event, ui) {
$("#promptid").select();
},
open: function (event, ui) {
$("#promptid").select();
},
create: function (event, ui) {
$("#promptid").select();
},
buttons: [{
text: $.alerts.okButton,
click: function () {
okreply();
}
}, {
text: $.alerts.cancelButton,
click: function () {
cancelreply();
}
}]
});
}
You can test it yourself here: http://pcrypt.dk/dev/login.php?logout
Just activate the link "ModalPrompt test" 2 times
Must be something relating to the fact that the second time shown the dialog is already created. All the $("#promptid").select(); calls do fire without any result so something must change this afterwards?
Thank you in advance!
Benny
OK I do not know why it dows not work, but adding this event handler:
close: function(event, ui) { newDiv.remove(); },
Does the trick. So somehow when there is more that one div created the selected call goes to the first div and does not affect the shown dialog.

Categories

Resources