Using jQuery dialog to open a modal box to confirm e.g. to delete a specific user from friends. I would like to use the friends name in the modal box (currently I print it with php in the name-tag of the link and use jQuery to get it from there).
//create the html for the modal box
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore [put the name here], ...?</p></div>')
//set up the jQuery dialog
var dialog_ignore=$( dialog_html_ignore ).dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
alert(fName); /* this gives me the right username */
dialog_ignore.dialog('open');
return false;
});
How/what is the best way to use the username variable actually as a part of the text (in the html of the modal box)??
Any help is highly appreciated, thank you in advance!! :)
Try this:
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore <span class="name"></span>, ...?</p></div>')
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$(".name", dialog_html_ignore).text(fName);
dialog_ignore.dialog('open');
return false;
});
Example fiddle
Use the following code in your click event,
dialog_html_ignore.attr("name", fname);
In dialog box you can access like this
dialog_html_ignore.attr("name");
I would write the dialog HTML as actual HTML in the page, not as a string to be parsed by $. Then, I would select it by ID and dialog-ify it so it is hidden at once.
I'd also include an empty <span id='ignore-dialog-fname'></span> in the dialog HTML and then select by ID to set its textContent/innerText to fname.
<script>
$(function() {
//set up the jQuery dialog
var dialog_ignore=$("#dialog-confirm").dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$("#ignore-dialog-fname").text(fName);
dialog_ignore.dialog('open');
return false;
});
});
</script>
<div id="dialog-confirm" title="Ignore Friend Request?">
<p>Some text... ignore <span id='ignore-dialog-fname'></span>, ...?</p>
</div>
Related
I currently have a form inside a modal dialog, which has a link to add/edit options in one of the select drop downs. This link opens a new modal dialog on top of the old one as I want. However, I can't seem to get any jquery ui widgets to work inside this second modal dialog (specifically the accordian and datepicker widgets). I have followed How to execute jquery inside a Modal window? and have both the accordian and datepicker widgets working in the 1st modal dialog.
Code I've been trying for 2nd modal dialog (not working):
$(document).on("click", ".view_dialog_2", function(event) {
$dialog_2.load($(this).attr('href'), function()
{
$('#accordian').addClass('accordian2');
$('#meeting_date').addClass('date2');
$('#follow_up_date').addClass('date2');
$(function() {
$( ".accordian2" ).accordion();
collapsible: true;
});
$(function() {
$( ".date2" ).datepicker();
});
$dialog_2.dialog('open');
});
return false;
});
Code that is currently working for 1st modal dialog:
$(".view_dialog").click(function(){
$dialog.load($(this).attr('href'), function()
{
$(function() {
$("#addPartNum, .order-button")
.button();
});
$(function() {
$( "#meeting_date" ).datepicker();
});
$(function() {
$( "#follow_up_date" ).datepicker();
});
$dialog.dialog('open');
});
return false;
});
I have tried removing the $(document).on event binding for the 2nd dialog but it just takes me to the linked page w/o any modal dialog. I tried adding the classes because I thought maybe there was a conflict since the datepickers are present in the 1st dialog as well.
This is my first project using jquery, and I've been getting it for the most part, but this one has me stumped. Any help would be greatly appreciated :)
EDIT: here is the dialog code for 2nd not working dialog (not sure if necessary or not)
var $dialog_2 = $("#view_dialog_2").dialog(
{
autoOpen: false,
height: 800,
width: 800,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$dialog_2.dialog("close");
},
"Cancel": function() {
$dialog_2.dialog("close");
}
}
});
EDIT #2: here is a jsfiddle to kind of demonstrate my problem a bit more: https://jsfiddle.net/8pfjz3k5/
Might be more than one way to do this, but here is a simple example you can start from: https://jsfiddle.net/7xo1Lcy1/
HTML
<div id="start-box" title="First Form">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
<a id="add" href="#">Add/Edit</a>
<div id="add-box">
<label>Next</label>
<input type="text" />
</div>
<script>
$("#add-box").dialog({
autoOpen: false,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
</div>
<a id="start" href="#dialog-conf">Start Here</a>
JQuery
$(function() {
$("#start-box").dialog({
autoOpen: false,
resizable: false,
height: 340,
modal: true,
buttons: {
"Save": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#start").button();
$("#start").click(function() {
$("#start-box").dialog("open");
});
$("#start-box").on("click", "#add", function(e) {
console.log("Launching Add Box.");
$("#add-box").dialog("open");
});
});
So you can see I moved away from $(document) for the .on(). This should look for a Click event just when the dialog is open. It then opens the next dialog (the first still in the background).
I hope that helps.
EDIT
You didn't init the .accordion(). See update to your fiddle: https://jsfiddle.net/Twisty/8pfjz3k5/2/
$("#accordian").accordion();
Make sure your selector is correct and you call the right methods.
Is it possible to set a specific webpage to auto open a jQuery dialog box only when first visited/refreshed and not open every time other pages lead to the page?
/*HTML*/
<div id="dialog" title = "Welcome" class="white">
<p>Please Enter Your Name</p>
<label for="FirstName">Name: </label>
<input type = "text" id="input"/>
</div>
/*jQuery*/
$(function () {
$("#dialog").dialog({
modal: true,
dialogClass: 'defaultDialogClass',
buttons:{
Ok: function(){
$(this).dialog("close");
}
}
});
});
The absolute simplest way:
if (!localStorage.getItem('visitedOnce')) {
// Your code for showing the modal/whatever
localStorage.setItem('visitedOnce', '1');
}
You're setting a flag on the user's machine that says they have been there, then checking when the page loads if that flag has been set.
Check localStorage here
Interesting. Andrew answered your question. Just adding this since you also want to run the dialog when the page is reloaded.
$( document ).ready(function() {
//run the method
checkWhatsGoingOn();
});
var checkWhatsGoingOn = function(){
//if page is reloaded or localstorage value's pair is not set
if((location.reload()) || (!localStorage.getItem('visited')) ){
//set it to true
localStorage.setItem('visited', 'true');
//run the dialog
myDialog();
}
}
var myDialog = function(){
$("#dialog").dialog({
modal: true,
dialogClass: 'defaultDialogClass',
buttons:{
Ok: function(){
$(this).dialog("close");
}
}
});
}
Hope this helps as well.
I want to show the confirmation window for the user who want to delete the data from database.
And I use this confirm() function to achieve this:
var str = document.getElementById("myHiddenDiv").innerHTML;
if (confirm(str))
{
$.ajax(...
<div id="myHiddenDiv" style="display: none;"><strong>Dont delete this</strong>
<br />
...
</div>
However it prints the html attribute in the windows confirmation such as the tag of <strong> and <br/>. I don't want that. How to do that?
Get the text from selected div like
var str = document.getElementById("myHiddenDiv").innerText;
Or you can also getting text with
var str = document.getElementById("myHiddenDiv").textContent;
I recommend using a modal window to this, http://jqueryui.com/dialog/#modal-confirmation.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
//$.ajax(...
},
Cancel: function() {
$( this ).dialog( "close" );
//$.ajax(...
}
}
});
});
</script>
I'm new to jQuery, and now I want to use jQuery-UI Dialog to show a nice message with long text to the user. The problem is that I want that every row in my Html table will have a "More details" link that will cause the jQuery Dialog window to open with the text from this specific row.
What should I add to the code that came with the jQuery-UI Dialog example? :
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
Thanks.
You're going to want to bind an event handler to each row (or, better, use ".delegate()" on the table), probably for "click":
$('#yourTable').delegate("tr", "click", function() {
var $row = $(this);
// setup code here, and then:
$('#dialog').dialog('open');
});
In that handler, you'll want to pull stuff from the row and populate something in the dialog to reflect the table row contents.
edit — If you want only clicks in specific columns to bring up the dialog, you can just change the selector in the call to ".delegate()". For example, you might give the clickable <td> cells class "info", so that you could then do this:
$('#yourTable').delegate("td.info", "click", function() {
var $cell = $(this), $row = $cell.closest('td');
// setup code ...
$('#dialog').dialog('open');
});
An alternative is to use the tiny jTruncate plugin.
http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html
How can I achieve this?
A user clicks the delete link (with a class of "confirm").
Confirmation message appears asking "Are you sure?" with "Yes" and "Cancel" options.
If yes is selected, the link continues as clicked, but if cancel is selected, the action is canceled.
Update: Final working code with confirm() thanks to this guy:
$('.confirm').click(function() {
return confirm("Are you sure you want to delete this?");
});
Javascript provides a builtin confirmation dialog.
if (confirm("Are you sure?"))
{
// continue with delete
}
in my experience this is the best and easiest way to have a confirmation!
Confirm
<script>
function myconfirm()
{
if(confirm('Are You Sure ...'))
return true;
return false;
}
</script>
I have successfully implemented the confirmation box in Jquery. make sure that you have the Jquery library and css INCLUDED in your code before trying this( jquery-ui-1.8.16.custom.css, jquery-1.6.2.js,jquery-ui-1.8.16.custom.min.js).
The MAIN DIFFERENCE BETWEEN JAVASCRIPT CONFIRM BOX AND THIS BOX THAT WE CREATE USING DIV - IS THAT - JAVASCRIPT CONFIRM WILL WAIT FOR USER INPUT, AFTER USER ENTERS YES/NO THE NEXT LINE WILL EXECUTE, HERE YOU HAVE TO DO THAT IN YES, OR NO BLOCK --**THE NEXT LINE OF CODE AFTER THE showConfirm() will execute immediately* so be careful
/** add this div to your html
*/
var $confirm;
var callBack;
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>';
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">';
var messageStyleEnd = '</span>';
$(document).ready(function(){
$('#confirmDialog').dialog({
autoOpen: false,
modal: true
});
//jquery confirm box -- the general alert box
$confirm = $('<div style="vertical-align:middle;"></div>')
.html('This Message will be replaced!')
.dialog({
autoOpen: false,
modal: true,
position: 'top',
height:300,
width: 460,
modal: true,
buttons: {
Ok : function() {
$( this ).dialog( "close" );
if(null != callBack)
callBack.success();
},
Cancel: function() {
$( this ).dialog( "close" );
if(null != callBack)
callBack.fail();
}
}
});
});
function showConfirm(message,callBackMe,title){
callBack = null;
$confirm.html(""); // work around
$confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd);
if(title =='undefined'|| null ==title)
$confirm.dialog( "option", "title", "Please confirm" );
else
$confirm.dialog( "option", "title", title);
var val = $confirm.dialog('open');
callBack = callBackMe;
// prevent the default action
return true;
}
// Now for calling the function
// create a Javascript/jSOn callback object
var callMeBack = {
success: function()
{ // call your yes function here
clickedYes();
return;
},
fail: function (){
// call your 'no' function here
clickedNo();
return ;
}
};
showConfirm("Do you want to Exit ?<br/>"+
,callMeBack1,"Please Answer");