I have a modal which has a link to another modal. When I opened the second modal and close the first modal, I can't scroll the second modal, only the background content scrolls. Can any one help me to solve this? I am using bootstrap 3.3.7
Try to use Modal Events to be sure your modals will not overlap. In this case you must open the second modal after the first one, like this:
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
});
If .button is the selector for those things that close the first modal to open the second one, you should have something like this
$('#first-modal').on('click', '.button', function() {
// [...] Whatever you need to do after pushing one of those buttons
$('#first-modal').on('hidden.bs.modal', function(event) {
// Open your second one in here
$('#first-modal').off('hidden.bs.modal');
// This will remove ANY event attached to 'hidden.bs.modal' label
}).modal('hide');
});
If you want to use the first cleaner example, oyu should be able to test from the event object where it came from (if it's not one of your button, event.preventDefault(); and quit)
Related
I'm trying to create a chart with D3 that will update when a submit button is clicked, however instead of firing when the button is clicked, the event happens as the page is loaded.
For example:
d3.select("#updatedata").on("click", alert('test'));
The alert happens immediately and does not happen when the button is clicked.
Am I missing something obvious?
Any advice appreciated.
Thanks.
You need to wrap the handler in a function:
d3.select("#updatedata").on("click", function() { alert('test'); });
I have an issue related to click events on different modal divs.
I have a modal div 'A' which shows an overlay div with some info. This div is show by clicking i.e. a button A. So, when it's shown if i click outside the overlapped div, i want this to close.
I have another div 'B' which shows an overlay div with some other info. This div is show by clicking i.e. a button B. So, when it's shown if i click outside the overlapped div, i want this to close.
In both cases i use $(window).click() for managing them.
The question is that i need that when once i click on button 'A', it's corresponding div come up and if i click on button 'B' I want div 'A' close and div 'B' come up and viceversa.
how can i handle multiple clicks events for multiple modal divs?
Thanks.y
I'm not really sure if this is what you want, but...
Assuming your buttons and divs are of class "overlay", and have IDs as in Rolando's example ("buttonA", "divA"; "buttonB", "divB"; etc.):
$(".overlay").filter(":button").click(function() {
var callid = /button(.+)/.exec($(this).attr("id"))[1];
$("div.overlay[id$=" + callid + "]").show();
$("div.overlay:not([id$=" + callid + "])").hide();
})
Example: http://jsfiddle.net/KXeXj/
The only issue is the "clicking outside the div to close it" part; I tried using $(":not(.overlay)").click(function() {$("div.overlay").hide()}), but that didn't seem to work as it just kept the divs hidden whatever you clicked.
This may be a staring:
$('#buttonA").click(function(){
$(#divA").show();
$(#divB").hide();
})
Does jqgrid supports fade in,fade out, I want to make it fade in fade out when the grid display and reload, is there anyone knows how to make it?
you need to hide it's content or the whole grid?, there is no fade in/out in jqgrid but you can use jquery effect function to create this effect
you can set fadeOut in onBeforeRequest, and fadeIn in loadComplete
onBeforeRequest : function(){
// is used for the whole grid
$(this).closest('#gbox_'+this.id).fadeOut('slow');
/*--------- OR ----------*/
//will fade out only the table inside
$(this).fadeOut('slow');
},
loadComplete : function(){
$(this).closest('#gbox_'+this.id).fadeIn('slow');
/*--------- OR ----------*/
$(this).fadeIn('slow');
}
If you're going for a visual effect, Liviu's answer is a good one. If you're trying to block user interaction with the grid while it's loading data, what I like to do on my grids is use the BlockUI plugin http://jquery.malsup.com/block/#element
My pattern is to block the grid before an ajax call, and then unblock it on the ajax call's success method .
If you are wanting to inform your users that the grid is loading...(I'm completely assuming this might be at the core of what you are looking for??)...as an alternative to a fadeIn/fadeOut...
I find that the "grid loading" message is not the greatest way to inform users that the grid is loading. For example, if the grid has many rows, the message may not appear in the view area and the user may be looking at old data in the grid (while it's loading) and not realize it...especially if the server processes the ajax slow or the query is slow for whatever reason. Here's a little something I do:
Add this event to your jqgrid setup:
beforeRequest: function(){
$('#grid tr').addClass('gridLoadingClass');
$('#grid span').css('color','lightgray');
$('#grid a').css('color','lightgray');
},
And add a class like this somewhere in your CSS:
.gridLoadingClass {color:lightgray;}
Your grid's contents will now "gray out" while loading.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});
I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});