I have an accordion that on load gets data using ajax to fill it starts getting autoupdates. Then on close I unload the data and removes it from autoupdate list.
But the user can open an Edit page in the accordion, and if this page is open the user should get a warning if he tries to close the accordion e.g. (Closing this will cause you to loose all none saved data) or similar.
So I want to "intercept" the accordion toggle close event and if certain data (The edit page) is loaded inside the accordion a "are you sure" warning should popup.
$( ".selector" ).accordion({
changestart: function(event, ui) {
...
if (dataInvalid) {
return false;
}
}
});
Related
I have a modal which is opened by clicking this hyperlink:
<a class="link-efekt" data-hover="izrazi zanimanje" href="#izrazi-zanimanje-univerzalno">izrazi zanimanje</a>
And closed by clicking this one:
zapri
I am trying to reprogram the ESC key to always go back to the main screen back to the main screen or to close modal window.
So my attempt at this was to reprogram ESC key to go to a previous hyperlink using window.history.back(); but then it can go back multiple times and I only want it to be able to go back once - just enough to close modal window. This is why i implemented the if statement which should check if #izrazi-zanimanje-univerzalno is opened. Otherwise ESC key shouldn't do anything.
I also tried using $('#izrazi-zanimanje-univerzalno').hide(); instead of window.history.back() (without if sentence) but it totally ignores my CSS transition effects and once modal is hidden it can't be respawned by clicking on a hyperlink that usually opens it.
<script type="text/javascript">
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if ( $("#izrazi-zanimanje-univerzalno").data('modal').isShown ) {
window.history.back();
}
}
});
</script>
After implementing the first suggested solution by #crazymatt I get this console output on keypress:
Since you are using JQuery couldn't you run a fade animation then close the window? Something like this:
$( "#clickme" ).click(function() {
$( "#book" ).fadeTo( "slow" , 0, function() {
// Animation complete now close overlay
});
});
I made a JS.Fiddle with my example but I didn't take the time to apply this to an overlay.
i have a ui tabs of jquery inside a dialog box that pops out whenever i click somewhere in the main page.
so when it pops out. the first tab is active. now my question is, how to get the first tab's properties?. because in the succeeding tabs, I was able to get the properties by using the activate event of this jquery ui
like this
$('#tabs').tabs({
activate : function(event,ui){
alert(ui.newPanel.find(".row #button").attr("id"));}
});
that one works when I click the other tabs. it will also work if I go back to the first tab after clicking the other tabs. but by default.. how to get the first tab? if i haven't clicked yet the other tabs?
I have solved this issue by getting that active tab on first load
var active = $("#dialog-content #tabs").tabs("option","active");
then check if it's really the first tab
if(active == 0)
{
var widget = $("#dialog-content #tabs").tabs("widget");//get the tab
//do you thing
//widget.find(".row #element").val()
}
When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)
Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});
I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.
the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.
The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});
I'm trying to figure out how to configure multiple twitter bootstrap's popovers with a manual click.
But first, some code:
# bootstrap.js.coffee
# this opens a popover with new server data
$('*[data-poload]').bind 'click', ->
$this = $(this)
$.get $this.data('poload'), (d) ->
$this.popover
content: d
html: true
title: $this.parents("tr").data("title")
.popover 'show'
# this handles clicks everywhere on the page and decides what to do if it finds opened popovers
$("html").click (e) ->
$('*[data-poload]').each ->
$(this).popover "hide" if not ($(this).is(e.target) or $(this).has(e.target).length > 0) and $(this).siblings(".popover").length isnt 0 and $(this).siblings(".popover").has(e.target).length is 0
This is the popoverable link. I have hundreds of these on the same page with different data-poload attribute:
Text
My server will respond with some html to this request /resources/some-id/popover that goes in the popover body.
What I want to happen if I click a popover:
Open the popover (after the server responds)
Don't scroll to top of the page
Don't close if I click on the popover's body (there are some links there)
Close the previous popover (if opened)
If I click anywhere else:
Close the previous popover (if opened)
The problem:
If I click a popover it will scroll to the top of the page (typical click propagation)
If I re-click the same link to open the popover, that popover will get broken and will not be able to open it again. It opens and closes right after.
I tried by putting a return false like so
# bootstrap.js.coffee
$('*[data-poload]').bind 'click', ->
$this = $(this)
$.get $this.data('poload'), (d) ->
$this.popover
content: d
html: true
title: $this.parents("tr").data("title")
.popover 'show'
false
but that won't work because the next js bit will not get triggered. The one that's supposed to close the other popovers. Clicking everywhere else works
of course.
I have a jQueryUI tabs object, and i want to handle the event of a tab being clicked, when is already selected.
using:
$("#tabs").tabs({
select: function (event, ui) {
onSelected();
}
});
I'm able to handle the event when the tab is first clicked (selected), but when i click it again - the handler isn't called.
is there any solution for that?
If not - another option that will suit my needs is the following:
define the tabs as collapsible, and collapse them by script (and not by user click).
i define the tabs object as:
$("#tabs").tabs({
collapsible: true
});
but when i try to simulate a click using:
$("#tabs").tabs("select", 0);
or
$("#tab-link-0").trigger('click');
nothing happens.
I need to point out that the tabs are added dynamically, using:
$("#tabs").tabs("add", "#tab-link-0", "title 0");
any ideas\suggestions for any of the cases?
Thanks,
I experimented a bit and found out that you can prevent the collapse of a tab by calling event.preventDefault() in the select handler. You obviously only want to do this when the select handler is fired on your currently-selected tab (to prevent collapsing the tab), or you'll never be able to switch the tab. This is worth testing, due to the call to preventDefault() on the jQuery event, but it appears to give you the behavior you want, at least in Chrome:
var tabs = $("#tabs").tabs({
collapsible: true,
select: function(event, ui) {
if (tabs.tabs('option', 'selected') === ui.index) {
// Prevent the tab from collapsing if the event fired on the
// currently-selected tab
event.preventDefault();
}
onSelected();
}
});