Develop Reference

Disable Twitter Bootstrap collapse toggling

I'm using Twitter Boostraps component collapse to reveal some fields which is done by clicking in another field. However, if I click the same field again the other fields get hidden again (i.e toggling).
What I want is to disable the toggling so that the fields won't hide when clicking the field a second time. Could this be done easily with some built-in methods or do I need to dive deep into the js file to change it myself?

You should be able to do something as simple as..
$('#myDiv').on('hide.bs.collapse', function (e) {
preventDefault(e);
})
This handles the Bootstrap 3 hide.bs.collapse event, and prevents the DIV from being hidden again.
Demo: http://bootply.com/75650

The solution is actually pretty simple and the one marked as correct comes pretty close, here is how you can disable the toggle mechanism:
$('#myDiv').on('hide.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
}).on('show.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
});
Cheers
Chris

Resetting a form using jQuery validate from within a dialog

I'm using jQuery Validate in a form within a jQuery dialog. When the user closes the dialog I wish to clear all form fields and reset the fields which have error feedback displayed.
It is correctly resetting the fields to blank, but the error feedback is not being cleared properly.
Here's my dialog code.
// Attach dialog
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
$('#myDialog')[0].reset(); // This works in resetting the actual form values
$("#myDialog").validate().resetForm(); // Not working :(
}
});

Is the form id myDialog?
If so, I would change the structure to be:
<div id="myDialog>
<form id="myForm">
//inputs, etc...
</form>
</div>
So then your dialog call would look like:
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
//$('#myForm')[0].reset(); // This works in resetting the actual form values
$("#myForm").validate().resetForm(); // Not working :(
}
});
I think you are running into collisions with having jQuery UI act on the #myDialog in conjunction with it being the form you are trying to validate.
Another option is to destroy the dialog on close, and always recreate it on open.

If they are still not clearing, changing close to beforeClose works, so they are cleared before the dialog is closed and moved on the DOM.

How can I provide a hook in a jQuery ui dialog button click?

I don't know much about writing good javascript so perhaps I am thinking about this in the wrong way, but here is the situation.
I have a page which contains various plugins, each with an edit button.
So there is for example an HTML plugin, a Twitter plugin etc.
Once you click on the edit button a jQuery UI dialog box is displayed via a common function which all of the edit buttons call.
The content of the dialog is filled with that particular plugin's update form.
The dialog created by this common function also provides a "Save" and a "Cancel" button automatically.
Since both of these "Save" and "Cancel" buttons are created by the dialog they are both assigned closures to the "click" option.
What I want to do, if possible, is provide some sort of hook function which can be run when the "Save" button is clicked, which can be defined by the javascript in each of the plugin's update forms.
I think I have explained enough now so here is some sample code:
This would tell each of the edit buttons to create a dialog box and fill it with the appropriate content.
// This function is called by each edit button
// on a click event which passes the required ids
function update_form_dialog(plugin_id) {
$.post(
'/get_plugin_update_form',
{
'plugin_id': plugin_id
},
function(response) {
var dialog = $('<div class="update_form"></div>').appendTo('body');
dialog.dialog({
open: function() {
dialog.html(response);
},
show: 'fade',
modal: true,
title: 'Update plugin',
width: 'auto',
height: 'auto',
buttons: [
{
text: 'Save',
click: function() {
// Call a hook defined in the plugin update
// form then send update data
}
},
{
text: 'Cancel',
click: function() {
// Close the dialog here
}
}
]
});
}
);
}
As you can see in the above code what I have is pretty simple, but I don't know how I can add a hook to the start of the "Save" button's click function.
Each plugin's update form is stored in the response variable and that is where the plugin update form's javascript is written.
Is there a way that I can tell the save button what to do before it runs its normal code when the "Save" button is clicked?
If anyone needs more explanation please let me know.
Any help on how I could write this would be much appreciated.
Edit:
It seems I'm having trouble explaining my problem so hopefully this edit will help make things clearer.
What I want is to execute some code which would be optionally defined in the content of the dialog box when it has been opened. This code, if defined, should be executed once the save button is clicked but before the actual click function is executed. Is this possible?

You can use a plugin for subscribing and attaching to some events like:
http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events/
http://archive.plugins.jquery.com/project/jQuerySubscribe
http://www.novasoftware.com/download/jquery/publish-subscribe.aspx
This way, on the save you can publish that the save has been done and all subscribers code will be executed.
with the third link you can do something like the following:
$(document).ready(function(){ $('.save').subscribe('save',function(){//dosomething;}})
Later on the save code you can do this:
$.publish('save');
And the code will be executed
hope it helps.

You're close!
buttons: {
'Save': function() {
// Call a hook defined in the plugin update
var code = $('textarea#input').val();
eval(code);
// form then send update data
$('form').submit();
// $.ajax({....
},
'Cancel': function() {
// Close the dialog here
}
}

Repurposing Jeditable jQuery plugin to use buttons instead of on-text click?

I'm trying to slightly repurpose the functionality of the Jeditable plugin to be controlled with buttons instead of clicking on the text. I've got a stripped-down version of the section I'm working on here.
Right now I'm triggering the text click event with my Edit button, hiding my Edit button once it's clicked, then making it reappear after the submit button is clicked. Here's my jQuery for the button click:
$('.jeditable-activate').click(function() {
$(this).prev().click();
$(this).addClass('hidden');
});
And here are the parameters I'm passing to the Jeditible function:
onedit : function() {
$(this).siblings('.jeditable-activate').addClass('hidden');
},
onsubmit : function() {
$(".jeditable-activate.hidden").removeClass('hidden');
}
I'd like to disable the default functionality of clicking on the text to edit, but I can't figure out a way to do this without breaking the functionality of my Edit button.

You probably have found a way to do it since February but it might help someone else. I did the same using a custom jQuery event like that:
$('.edit').editable('http://www.example.com/save.php', {
id : 'elementid',
name : 'newvalue',
[...]
event : 'whateverEvent'
});
$('.jeditable-activate').click(function() {
$(this).prev().trigger('whateverEvent');
});

JQuery Dialog auto focuses input field

I created a dialog and when I open it by clicking a button the first input field in the dialog's container gets focused. How can I avoid it?

A great way to battle this issue is to disable all your form inputs:
by Id
$('#inputId').attr("disabled", true);
by Class
$('.className').attr("disabled",true);
by Form
$('#formId input').attr("disabled",true);
Then on the dialog open call you can re-enable all the elements in the form or individually if that was the path you took. It doesnt really matter if you disable all of them because you are about to re-enable them all.
$("#dialogId").dialog({
autoOpen: false,
width: X,
height: Y,
open: function(event, ui) {
**$('#formId input').attr("disabled",false);**
},
close: function(){
...
}
...
});

You can always manually remove the focus by calling blur() on this field.
Or do you need that the field never gets focused?
EDIT:
In order to prevent it's focus, you can add $("firstFieldSelector").focus(function(){return false;}. It will prevent the focus when opening the dialog. This seems to work at least on ff and chrome: see http://jsfiddle.net/g9GNn/1/ (it uses the jQueryUI example).