I have a form in jQuery UI Accordion.
With this code, a visitor must validate the first panel and only then the next accordion panel opens. However, if the visitor wants to go back to first panel it doesn't let it go.
$(document).ready(function () {
$("#accordion").accordion({ event: false });
$('#openfirst').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 1 });
// cancel submit
return false;
} else {
alert('Please acknowledge the following before proceeding.');
}
});
$('#opensecond').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 2 });
} else {
alert('Please acknowledge the following before proceeding.');
}
});
$('#openthird').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 3 });
// cancel submit
return false;
} else {
alert('Please acknowledge the following before proceeding.');
}
});
});
</script>
Instead of using
$("#accordion").accordion({ event: false });
try using
$( ".selector" ).accordion( "disable" );
and upon user verification, use
$( ".selector" ).accordion( "enable" ); //for manual operation of tabs
or
$( ".selector" ).accordion({ active: # }); //for code generated operation of tabs
Related
While I'm on PAGE 1, I click on PAGE2 link, it will slide to the right with duration 2seconds, While it is sliding, I CANNOT click PAGE1 link. How do I click on page1 or stop the slide while it's sliding?
Help me please
$(document).ready(function(){
$('.link2page1').click(function(e){
e.preventDefault();
$('#page2').hide(
function(){
$('#page1').show();
}
);
});
$('.link2page2').click(function(e){
e.preventDefault();
$('#page1').hide('slide',{direction:'right'},2000,
function(){
$('#page2').show();
}
);
});
});
Please check out my code on jsfiddle
I think below code will help you.
$(document).ready(function () {
$('.link2page1').click(function (e) {
e.preventDefault();
$('#page2').hide(
function () {
$('#page1').stop();
$('#page1').css("left","0px");
$('#page1').show();
}
);
});
$('.link2page2').click(function (e) {
e.preventDefault();
$('#page1').hide('slide', { direction: 'right' }, 10000,
function () {
$('#page2').show();
}
);
});
});
I would like this to log out the value of the input:
HTML:
<input id="spinner" />
JS:
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(ui.value)
}
});
});
Fiddle: http://jsfiddle.net/u9T5s/
jsFiddle Demo
I am not sure what the appropriate hook is as far as the jquery ui API goes, but here is a simple way to do this as well:
$(function() {
$("#spinner").spinner();
$('.ui-spinner-up').click(function(){
console.log("Increased to "+$('#spinner').val());
});
$('.ui-spinner-down').click(function(){
console.log("Decreased to "+$('#spinner').val());
});
});
This this:
http://jsfiddle.net/u9T5s/1/
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(this.value)
}
});
});
Use this.value instead of ui.value. This will take the current object to which the change function is attached.
Answer to comment: you implement different function one is change and one is spin.
Also change will execute one on blur after a real change happened an spin executes once up/down click is fired.
spin: function( event, ui ) {
if ( ui.value > 10 ) {
$( this ).spinner( "value", -10 );
return false;
} else if ( ui.value < -10 ) {
$( this ).spinner( "value", 10 );
return false;
}
}
I am deleting a record using PHP. I want to use a JQuery UI dialog to confirm the action, but I dont know how to pass a variable (my RecordID) to the redirect URL function, or allow the URL to access window.location.href.
$("#confirm" ).dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
'OK': function() {
window.location.href = 'url and myvar??';
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#confirm").dialog( "open" ).html ( "Are U Sure?" );
return false;
});
HTML
<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a>
Is there a good way to do this?
You can try using the .data() method to store data for you. Take a look at this answer
Passing data to a jQuery UI Dialog
For example to pass a variable, you can store it using the data function, before opening the dialog
$("#dialog_div")
.data('param_1', 'whateverdata')
.dialog("open");
Then you can get this back by:
var my_data = $("#dialog_div").data('param_1')
You want to change the configuration of the dialog on click (in this case, the behaviour of the Ok button). For that your have many solutions all of them ugly (imo). I would advice generating a dialog on the fly, and destroying it once it has been used, something like this:
$("#delete").click(function(ev) {
ev.preventDefault(); // preventDefault should suffice, no return false
var href = $(this).attr("href");
var dialog = $("<div>Are you sure?</div>");
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
window.location = href;
$( this ).dialog( "close" );
},
'Cancel': function() {
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
});
Or even better, encapsulate the confirm dialog into a function so that you can reuse it, like so:
function confirmDialog(msg) {
var dialog = $("<div>"+msg+"</div>");
var def = $.Deferred();
$(dialog).dialog({
resizable: false,
autoOpen: true,
modal: true,
buttons: {
'OK': function() {
def.resolve();
$( this ).dialog( "close" );
},
'Cancel': function() {
def.reject();
$( this ).dialog( "close" );
}
},
close: {
$( this ).remove();
}
});
return def.promise();
}
And then use it like so
confirmDialog("are your sure?").done(function() {
window.location = $(this).attr("href");
}).fail(function() {
// cry a little
});
You may have to check if the deferred object has been rejected or resolved before you close the dialog, to ensure the confirm rejects on close (and not just on pressing the 'Cancel' button). This can be done with a def.state() === "pending" conditional.
For more information on jquery deferred: http://api.jquery.com/category/deferred-object/
Deleting actions probably shouldn't be done using a GET, but if you wanted to do it that way I would recommend using the $.data in jQuery so each link had a data-record-id attribute. Then on click of one of the links, it pops up the dialog and when confirmed it adds that to the URL, and redirects.
Example:
$(function(){
$(".deleteLink").click(function(){
var id = $(this).data("record-id");
var myHref = $(this).attr('href');
$("#confirmDialog").dialog({
buttons:{
"Yes": function()
{
window.location.href = myHref + id;
}
}
});
});
});
<a class="deleteLink" data-record-id="1">Delete</a>
...
<div id="confirmDialog">
<p>Are you sure?</p>
</div>
HTML
<a data-title="Title" data-content="content" data-mydata="1" class="confirmation-dialog" href="#">Link</a>
JS
$('.confirmation-dialog').confirm({
buttons: {
Yes: function(){
console.log(this.$target.attr('data-mydata'));
No: function(){
}
}
});
In docs I didn't see such information.
There are options to close dialog in such cases:
1) push Esc;
2) click on "OK" or "Close" buttons in the dialog.
But how to close dialog if click outside?
Thanks!
Here are 2 other solutions for non-modal dialogs:
If dialog is non-modal Method 1:
method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
Non-Modal dialog Method 2:
http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
I found solution on ryanjeffords.com:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$('.ui-widget-overlay').live("click",function(){
$("#dialog").dialog("close");
});
});
</script>
If dialog is modal, then paste these 3 lines of code in the open function when you create your dialog options:
open: function(event,ui) {
$('.ui-widget-overlay').bind('click', function(event,ui) {
$('#myModal').dialog('close');
});
}
Facing the same problem, I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information on my website here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
The plugin is also on github: https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside
Laurent
This is my solution.
I have, for example
<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>
Each div gets opened as a dialog depending on what the user interacts with. So being able to close the currently active one, I do this.
// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
if( $("div.ui-dialog").is(":visible") )
{
var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
if ($("#"+openDialogId).dialog("isOpen"))
{
$("#"+openDialogId).dialog('close');
}
}
});
I wang to use jQuery UI to implement a delete confirmation. I want to use a link to trigger the dialog. Here's my code:
delete
<script type="text/javascript">
$(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
autoOpen: false,
buttons: {
"Okay": function() {
$( this ).dialog( "close" );
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
$( ".delete" ).click(function() {
$( "#dialog-confirm" ).dialog( "open" );
return false;
});
});
</script>
What I want to do is, when the user click on cancel, it does nothing. But when the user click on okay, then it will continue to go to www.google.com.
However, no matter okay or cancel I click, it remains nothing happens. Any idea?
Even if you do this:
$("a.delete").trigger("click");
You still won't get to google, because after it calls handlers, jQuery triggers an event on the object. It only calls native handlers for click events if the element is not a link.
You could do something like this:
window.location.href = $("a.delete").attr("href");
Or, you could have a hidden link on the page, like this:
delete
Then, on the click of the "Open" button, you could do this:
$("a.hiddenDelete").trigger("click");