Hi,
I'm implementing a layout with Extjs 4 as shown in the image.
The layout contains
4 tab panels
Each tab content will be loaded dynamically. The loaded page contains left navigation panel and right side container to load the respective page
The page which is loaded in right side container will have a button
When the button is clicked a pop will be shown
I'm showing one pop up in page1 and another different pop up in page2.
What my problem is
when i click the button on the 1st page its showing a popup (say pop up 1),
for the second page when i click on the button it has to show pop up2, which contains some panels.
But pop up 1 appears in the second page.
the same pop up appears in all the sub pages.
if i reload the entire page and directly go to the page2 it shows the pop2.
i think that the window once created will persist until the page is reloaded.
i'm using window as follows
var createLessonWin = Ext.widget('window', {
autoHeight:true,
id: 'cformWin',
closeAction: 'hide',
y: 100,
modal: true,
plain: true,
layout: 'fit',
items: profile_form
});
Ext.get('add_lessons_btn').on('click', function () {
createLessonWin.show();
});
if i use closeAction: 'destroy' window elements also destroyed.
i tried with Ext.create('Ext.window.Window', {}) and new Ext.Window also. the same problem appears.
Content of the pop up in each page is a different form
How to solve this problem
I'm assuming you only use that code for one of the two windows. The items property is what goes in the window, so you'll need that to be different for the two buttons. Secondly, make sure your ids are unique for each window.
If you post some more code, I might have a better idea of what's going on. How do you create your other window?
Related
i have one image button on page,on click event of this imagebutton i have called one ModalPopupExtender, having definition as
(Panel3 contains one gridview and one button whereas gridview gets filled in codebehind)
But when i click the imagebutton, for 1st time it displays Panel3 with only button for 2seconds and then page gets reloaded automatically and again Panel3 displays with gridview,why this is happning i do not understand
i need to do is, as soon as i click on ImageButton the popup should be displayed with gridview and button....please help me as soon a possible
When a user double clicks on a row on my page, I navigate them to an edit screen which shows them some important information. When they submit that patient I gerimander jqGrid to take them page to the page that they were just viewing...
serializeGridData: function (postData) {
//debugger;
var pagInfo = $(this).se
debugger;
if ((rowFromTemp != "") && (pageFromTemp != "")) {
//debugger;
postData.page = pageFromTemp;
pageFromTemp = "";
rowFromTemp = "";
}
return postData;
},
I basically edited the postData in the serializeGridData function.
My question is, when I navigate to a different page lets say page 3 of 10 after I have edited information and returned to the correct page, when I click refresh of the whole page...
I want the user to return to the page that they just navigated to. Right now, it will return them back to the page that they initially returned from after editing information. So If I were to construct a timeline of events...
1) user see's paged information...
2) user selects row to edit
3) user navigates to edit page and does his thing then submits
4) user now is sent back to page where he came from...
5) user goes to a different page (either next or last)
6) user refreshes page
7) !! user is sent to page X from step 3 and 4 and Not 5 !!
I was hoping to to some kind of refresh of page event and set the correct page in there.
Is my methodology or thinking in correct here? Is there a way to ensure that the correct page is selected no matter what?
I just checked again. It would seem that if a user
1) navigates to page X
3) refreshes a page
he will be sent to page 1.
Maybe I am setting an unrealistic expectation. Maybe if they reload the whole page, they should expect to go back to page 1.
Well even so, how could I accomplish that task with the first workflow
In my opinion the real problem which you have is the usage of step 3: "user navigates to edit page and does his thing then submits". The step makes all the problems which you try to solve. Instead of going to another page one can create dynamically some controls which allows to edit the selected row. jqGrid provide inline editing or form editing for the purpose. You need just include editable: true property in the columns which you need to edit implement starting of inline/form editing on select of row or on double click. Alternatively you can use buttons from the navigator bar (see navGrid and inlineNav) or in addition column of the grid (see formatter: "actions").
If you still don't want to use any editing mode which provide jqGrid you can just place the whole content of the body of the main page inside of a div. You can hide the div using jQuery.hide instead of redirection to "edit page". You can load the content of "edit page" on the same main page (per jQuery.load for example). Then you can remove the loaded "edit page" and show the original main page. As the result the main page will be shown in exactly the same form as it was before starting of editing.
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();
})
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
});
In my program I have the main window in the background which has a smaller, UIScrollView on it. I have buttons on each page of the scroll view which I want to bring up a modal view that can be dissmissed. It works fine for the first page, however, when I click the button on the second page of the scroll view the modal view that is brought up is on top of the first page instead of the second and the second page is completely blank. When I close the modal view, the first page has been replaced with the second page and the second page is still left blank... The code I am using is:
MVC = new NewsModalViewController(this);
MVC.ModalTransitionStyle = UIModalTransitionStyle.CoverVertical;
MVC.ModalPresentationStyle = UIModalPresentationStyle.CurrentContext;
I've been trying to play around with the frames but having no luck...
Any insights?
Cheers
I would rewrite the subpages to fire an event that the parent view listens to. Then, display the modal from the parent view (you can actually create the modal in the child view and pass it up on the event). This eliminates any problems with the modal being applied to the wrong context.
There may be another explanation, but this is the method I've implemented on a couple applications and has served me well. It appears that modals are best displayed only from the highest level view in the stack.