I'm using jQuery UI 1.8.19 and Twitter Bootstrap 2.0.3 in a site I'm developing. I want to show a modal dialog when click in a Delete and for this I do that:
<div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p>
</div>
And the JS to fire the event is this one:
$(function() {
$("#delete").click(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
});
});
For some reason the modal dialog is always showed at the end of the page when it shouldn't be I think and when I click the element the dialog appears but the page is redirected instantaneously to my home page and didn't know the cause because I don't have redirects in any place and also there are no forms there. Any advice or help on this?
Best regards
You should add style='display: none' to your dialog div so it won't be displayed at startup.
Then if the page is sent to home when you click the button, you may want to check what type of button #delete is and finish it's function with return falseif it's a Submit for example to avoid normal click event handler to be launched :
$(function() {
$("#delete").click(function(e){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
e.preventDefault();
});
});
Edit : Modification done according to Scott suggestion
This happened to me as well. There is only one cause I know of. The dialog CSS file is not being loaded.
See my SO Question: position:fixed breaks in IE9
Related
I have a form in HTML:
<form id="notes" method="post" onsubmit="return notes_validate()">
In this form I've included a JQuery Dialog box (I've connect the scripts and it's working):
<div id="dialog-confirm" title="Alert" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Continue and submit?</p>
</div>
I have a JavaScript script called "notes_validate()" that validates elements on the form and returns true if all elements pass the checks.
In this script, as one of the final validation steps, I prompt the user with this JQuery Dialog box; I'm trying to get the Dialog box to submit the form if "Yes" is selected and return false (don't submit the form) if "Cancel" is selected.
In "notes_validate()" is:
if(validated){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width:300,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
});
}
The issue is that the form is automatically submitting before any option is selected. I also have a submit button in the form in HTML:
<input class="submit" style="float:left" type="submit" value="submit" />
What's the issue(s)?
The problem is you're expecting onsubmit="return notes_validate()" to keep the form from submitting, but your threading is messed up. You're not returning anything directly from notes_validate().
Once you hit $( "#dialog-confirm" ).dialog({...}), that's a different "thread". Your notes_validate method is continuing on as if nothing happened.
What you need is
function notes_validate(event) {
if(validated){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width:300,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
$( "#notes" ).submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
event.preventDefault();
}
Update:
As pointed out, it would be better to remove the onsubmit portion of this altogether. Changing your button to the following after removing the onsubmit from your form should do the trick:
<input class="submit" style="float:left" type="button" onclick="notes_validate()" />
I am a bit newbie in Jquery and java scripts and a bit confuse in this matter.
Here's my code of a simple modal message alert taken from JQuery UI.
The problem is that the function is being called in the div class in the HTML code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
But what i want to do is to create 2 parameters: 1 receives some text and the 2nd is when i press ok it goes to a link.
I am developing a website and i don't want to use the browsers alert, just want to use that JQuery script and do something like this:
<?php
function alerta($texto="",$redirect=""){
print("<Script language=javascript>");
if($texto!="")
print("alert(\"$texto\");");
if($redirect!="")
print("window.location=\"$redirect\";");
print("</script>");
}
?>
You can echo your text (Variable 1) inside the div modal, and then use the redirect function on 'OK' button click event:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
window.location = "$YOUR_VARIABLE_2";
}
}
});
});
the standard code to close the window with the X on the top right is this:
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span></button>
I need to add a "Close" button at the bottom of the modal popup window.
thanks
If you can visit the jQuery UI Dialog page, which also has other customizations along with the default functionality.
We also can customize how the display should be. The Dialog in jQuery has .button property for which we can create our own customized buttons.
Here is the js for buttons
buttons: {
submit: function(){
//write your code for submission
},
close: function(){
$(this).dialog('close');
}
This has to be embedded in the dialog method of jQuery.
Here is the fiddle that should answer your question
FIDDLE
Hope it helps.
Initialize the dialog with the buttons option specified:
$( ".selector" ).dialog({ buttons: [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] });
Or set the buttons after initialization:
$( ".selector" ).dialog( "option", "buttons", [ { text: "Close", click: function() { $( this ).dialog( "close" ); } } ] );
I've tried the following on JSFiddle
HTML:
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
Link
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"a",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
});
I cannot close the dialog when I hit the close button. Why is it?
You're reopening the dialog when the close click bubbles up to the document level. The dialog close [x] is an <a> too.
Add this line to that "click" handler, at the very beginning:
if ($(this).hasClass('ui-dialog-titlebar-close')) return;
Alternatively, you could make your "open dialog" link more specific, by giving it a class or something:
<a href=# class=open-dialog>Link</a>
Then:
$('body').on('click', '.open-dialog', function(event) {
event.preventDefault();
$('#dialog').dialog('open');
});
By making the link to open the dialog distinct from the close button, you get around the ambiguity.
You must define CLOSE function:
HTML
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
<a id="open" href="www.google.com">Link</a>
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"#open",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
$(document.body).on('click',".ui_icon_closethick",function(event){
event.preventDefault();
$("#dialog").dialog('close');
});
});
Working solution: http://jsfiddle.net/QTqUr/1/
I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo
You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});
alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');
you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});