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.
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.
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>
Using this post I've been able to implement a dialog box that appears once the form is loaded. I would however like to change this so that the user clicks a button for the dialog to appear.
I've followed the guidance provided, and removed this line $("#divdeps").dialog('open'); from the Javascript function as instructed, and added it to the 'onclick' event of my button i.e.
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>
so my code is now:
<div id="divdeps" style="display: none">This is my div</div>
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>
<script>
$(document).ready(function(){
$("#divdeps").dialog({
autoOpen: false,
show: 'slide',
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
// $("#divdeps").dialog('open');
});
</script>
However, I can't get this to work on the 'onclick' event of the button. I've been through the instructions quite a few times now and I'm not sure where I'm going wrong.
I just wondered whether someone could perhaps take a look at this please and let me know what I'm doing wrong.
Many thanks and regards
I would do it with the click function of jQuery instead of that dom level 0 handler:
$("#divdeps + button").click(function() { $("#divdeps").dialog('open'); });
Or of course you can give this button an id and do
$("#buttonID").click(function() { $("#divdeps").dialog('open'); });
Either of those sections of code would go in your document.ready handler.
Per Virendra's comment, your original button tag was wrong—you were missing a closing tag, and have mismatched quotes:
<button value="Upload" onclick="$("#divdeps").dialog('open');"</button>
should have been
<button value="Upload" onclick="$('#divdeps').dialog('open');"> </button>
Instead of $("#divdeps").dialog('open'); that you commented out, try:
$("button#give_it_some_id").click(function(e) {
e.preventDefault();
$("#divdeps").dialog('open');
})
Use this code its working in my application.
PopUpWindow = function (titles, message, redirectURL) {
document.getElementById('window').innerHTML = message;
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
div tag
<div id="window" style="display: none;width:190px">
Let me know if you have any problem here.
I have
Click to proceed
and following javascript. When I click on above link it displays the dialog box with 2 buttons. "return false;" stops the default event of link tag. But I need the functionality in which when I click "Yes, delete" to take me to other page by choosing href value of a onclicked anchor. I tried alert($(this).attr('id')); (as I thought I could pick up HREF value using "this.attr('href')") but it displays "dialog".
How do I make it work so that when I click on a link having class name "confirm_delete" it displays me dialog, and if I click cancel it stays on the page otherwise takes me to page according to href value.
$(".confirm_delete").click(function(){
$('<div id="dialog">Are you sure you want to delete?</div>').appendTo('body');
$("#dialog").dialog({
bgiframe: true, resizable: false, height:140, modal: true,
overlay: {
backgroundColor: '#000', opacity: 0.5
},
buttons: {
'Yes, Delete all items in recycle bin': function() {
$(this).dialog('close');
$(this).remove();
alert($(this).attr('id'));
},
Cancel: function() {
$(this).dialog('close');
$(this).remove();
}
}
});
return false;
});
Thank you.
First off: try not to use underscores in class names. I've read somewhere they may cause problemsn...
Well, here:
$('a.confirm-delete').click( function(event) {
if( !confirm('are you sure you want to go?') ) return false;
});
here I've usedd the javascript confirm dialog. You can easily replace that with a jquery modal dialog.
jrh
OK, I can retrieve value of HREF
by var url = $(this).attr('href'); just after the $(".confirm_delete").click(function(){
line. It gives me "test.php?id=123" Only thing left is create/retrieve full url and redirecting to that url.
Thanks
This should do the trick:
$(".confirm_delete").click(function(){
var $delete = $(this);
...
$("#dialog").dialog({
...
buttons: {
'Yes, Delete all items in recycle bin': function() {
$(this).dialog('close');
$(this).remove();
alert($delete.attr('id'));
}
}
});
return false;
});
I'm developing an ASP.Net MVC site and on it I list some bookings from a database query in a table with an ActionLink to cancel the booking on a specific row with a certain BookingId like this:
My bookings
<table cellspacing="3">
<thead>
<tr style="font-weight: bold;">
<td>Date</td>
<td>Time</td>
<td>Seats</td>
<td></td>
<td></td>
</tr>
</thead>
<tr>
<td style="width: 120px;">2008-12-27</td>
<td style="width: 120px;">13:00 - 14:00</td>
<td style="width: 100px;">2</td>
<td style="width: 60px;">cancel</td>
<td style="width: 80px;">change</td>
</tr>
<tr>
<td style="width: 120px;">2008-12-27</td>
<td style="width: 120px;">15:00 - 16:00</td>
<td style="width: 100px;">3</td>
<td style="width: 60px;">cancel</td>
<td style="width: 80px;">change</td>
</tr>
</table>
What would be nice is if I could use the jQuery Dialog to popup a message asking if the user is sure he wants to cancel the booking. I have been trying get this to work but I keep getting stuck on how to create a jQuery function that accepts parameters so that I can replace the
cancel
with
cancel.
The ShowDialog function would then open the dialog and also pass the paramter 10 to the dialog so that if the user clicks yes then It will post the href: /Booking.aspx/Change/10
I have created the jQuery Dialog in a script like this:
$(function() {
$("#dialog").dialog({
autoOpen: false,
buttons: {
"Yes": function() {
alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
"No": function() {$(this).dialog("close");}
},
modal: true,
overlay: {
opacity: 0.5,
background: "black"
}
});
});
and the dialog itself:
<div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>
So finally to my question: How can I accomplish this? or is there a better way of doing it?
jQuery provides a method which store data for you, no need to use a dummy attribute or to find workaround to your problem.
Bind the click event:
$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
e.preventDefault();
$("#dialog-confirm")
.data('link', this) // The important part .data() method
.dialog('open');
});
And your dialog:
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Delete': function() {
$(this).dialog('close');
var path = $(this).data('link').href; // Get the stored result
$(location).attr('href', path);
}
}
});
You could do it like this:
mark the <a> with a class, say "cancel"
set up the dialog by acting on all elements with class="cancel":
$('a.cancel').click(function() {
var a = this;
$('#myDialog').dialog({
buttons: {
"Yes": function() {
window.location = a.href;
}
}
});
return false;
});
(plus your other options)
The key points here are:
make it as unobtrusive as possible
if all you need is the URL, you already have it in the href.
However, I recommend that you make this a POST instead of a GET, since a cancel action has side effects and thus doesn't comply with GET semantics...
In terms of what you are doing with jQuery, my understanding is that you can chain functions like you have and the inner ones have access to variables from the outer ones. So is your ShowDialog(x) function contains these other functions, you can re-use the x variable within them and it will be taken as a reference to the parameter from the outer function.
I agree with mausch, you should really look at using POST for these actions, which will add a <form> tag around each element, but make the chances of an automated script or tool triggering the Cancel event much less likely. The Change action can remain as is because it (presumably just opens an edit form).
I have now tried your suggestions and found that it kinda works,
The dialog div is alsways written out in plaintext
With the $.post version it actually works in terms that the controller gets called and actually cancels the booking, but the dialog stays open and page doesn't refresh.
With the get version window.location = h.ref works great.
Se my "new" script below:
$('a.cancel').click(function() {
var a = this;
$("#dialog").dialog({
autoOpen: false,
buttons: {
"Ja": function() {
$.post(a.href);
},
"Nej": function() { $(this).dialog("close"); }
},
modal: true,
overlay: {
opacity: 0.5,
background: "black"
}
});
$("#dialog").dialog('open');
return false;
});
});
Any clues?
oh and my Action link now looks like this:
<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new { #class = "cancel" })%>
Looking at your code what you need to do is add the functionality to close the window and update the page. In your "Yes" function you should write:
buttons: {
"Ja": function() {
$.post(a.href);
$(a). // code to remove the table row
$("#dialog").dialog("close");
},
"Nej": function() { $(this).dialog("close"); }
},
The code to remove the table row isn't fun to write so I'll let you deal with the nitty gritty details, but basically, you need to tell the dialog what to do after you post it. It may be a smart dialog but it needs some kind of direction.
After SEVERAL HOURS of try/catch I finally came with this working example, its working on AJAX POST with new rows appends to the TABLE on the fly (that was my real problem):
Tha magic came with link this:
remove
remove
remove
This is the final working with AJAX POST and Jquery Dialog:
<script type= "text/javascript">/*<![CDATA[*/
var $k = jQuery.noConflict(); //this is for NO-CONFLICT with scriptaculous
function removecompany(link){
companyid = link.id.replace('remove_', '');
$k("#removedialog").dialog({
bgiframe: true,
resizable: false,
height:140,
autoOpen:false,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Are you sure ?': function() {
$k(this).dialog('close');
alert(companyid);
$k.ajax({
type: "post",
url: "../ra/removecompany.php",
dataType: "json",
data: {
'companyid' : companyid
},
success: function(data) {
//alert(data);
if(data.success)
{
//alert('success');
$k('#companynew'+companyid).remove();
}
}
}); // End ajax method
},
Cancel: function() {
$k(this).dialog('close');
}
}
});
$k("#removedialog").dialog('open');
//return false;
}
/*]]>*/</script>
<div id="removedialog" title="Remove a Company?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
This company will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
This work for me:
SPOSTA
function sposta(id) {
$("#sposta").data("id",id).dialog({
autoOpen: true,
modal: true,
buttons: { "Sposta": function () { alert($(this).data('id')); } }
});
}
When you click on "Sposta" in dialog alert display 100
Ok the first issue with the div tag was easy enough:
I just added a style="display:none;" to it and then before showing the dialog I added this in my dialog script:
$("#dialog").css("display", "inherit");
But for the post version I'm still out of luck.
Just give you some idea may help you, if you want fully control dialog, you can try to avoid use of default button options, and add buttons by yourself in your #dialog div. You also can put data into some dummy attribute of link, like Click. call attr("data") when you need it.
A solution inspired by Boris Guery that I employed looks like this:
The link:
<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>
bind an action to it:
$('.remove').live({
click:function(){
var data = $('#'+this.id).metadata();
var id = data.id;
var name = data.name;
$('#dialog-delete')
.data('id', id)
.dialog('open');
return false;
}
});
And then to access the id field (in this case with value of 15:
$('#dialog-delete').dialog({
autoOpen: false,
position:'top',
width: 345,
resizable: false,
draggable: false,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Confirm delete': function() {
var id = $(this).data('id');
$.ajax({
url:"http://example.com/system_admin/admin/delete/"+id,
type:'POST',
dataType: "json",
data:{is_ajax:1},
success:function(msg){
}
})
}
}
});
i hope this helps
$("#dialog-yesno").dialog({
autoOpen: false,
resizable: false,
closeOnEscape: false,
height:180,
width:350,
modal: true,
show: "blind",
open: function() {
$(document).unbind('keydown.dialog-overlay');
},
buttons: {
"Delete": function() {
$(this).dialog("close");
var dir = $(this).data('link').href;
var arr=dir.split("-");
delete(arr[1]);
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
Delete