Tuesday, 13 January 2009

AJAX Modal Popup Extender click event not firing

I had a situation today where i had a webform with a Gridview, a modal popup extender and a dummy button to fire up the hidden panel for the modal popup extender. If i pressed cancel to close the popup, when i next pressed the button to open up the modal popup nothing happened and i had to click the button a second time.

This drove me mental for a couple of hours and i ended up leaving it alone for a bit. A tad a later i hit another problem to do with validation where i realised i needed to add validation groups as i had more than one group of controls to validate.

The great thing is after i added the validation groups the problem above went away! So if you have a modal popup extender and are using validation controls always ensure you add a validation group to your controls.

The validationgroup is simply a property on a control and a validator. Simply add a common name to group controls and ensure the name on the button you want to have the validation fire on is the same as the control group to validate. Im sure you get the picture.

I dont know if this is a bug in the modal popup extender or if its by design?? Its propbably good practice create a validation group whenever you add validation controls to a form.

Also note...if you are looking to learn more on ASP.Net and other .Net technologies and find learning by video useful I highly recommend LearnVisualStudio.Net. I have been a member there for almost 4 years and they are constantly adding new content in line with new technology. Go check them out and try their free videos.

24 comments:

Shanchar said...
This comment has been removed by the author.
Shanchar said...

Man, You are a life saver
Shanchar

Omen said...

Glad i could you out dude! :o)

Anonymous said...

Thx man!!!!
This was driving me crazy!!

Hans

Jai said...

Hi

I followed your step but still I m facing problem.

Error is :

Microsoft JScript runtime error : object expected

Thanks

Click here http://tinyurl.com/lfk9n9 to get a free, cool and sexy animated avatar of yourself!

Omen said...

Are all your ControlID's set - and your validators attached to a control?

Re-check all your validators have Validation groups.

Best way to test if its a validator causing the issue is to disable validation on the submit button you are using. Do this by setting the CausesValidation = false. If it works then you know it is something in your validotr setup.

Sujith said...

Hey,
Thanks for the post.
But it's not exactly working for me.
The scenario is a bit different for me.

I am creating a table dynamically and each row contains an Edit button. On clicking of this button, I am showing the Modal Popup Panel wherein the user can key in the values and submit the panel, which will inturn update the parent table.

Issue I am facing here is exactly the same as mentioned by you. (Popup happening only on second click, after a Submit)


I marked the Causes Validation property of my Edit Button as false. Still facing the issue.

I added Validation Groups for all controls in the popup panel and assigned the same to the Submit button in the Popup.

Please help me in identifying the issue..

Thanks much !

Omen said...

Add a validation summary and set the validate on the submit button - see if anything is failing validation.

Sound like you have done most other things correctly.

Sujith said...

Omen,

Thanks for the reply. It was very quick.


Let me put it this way,
I dont want to do any validation in the panel (atleast for time being). Also, for validation purposes we wont use any of the Validation Controls, but we used to write the code manually and execute the same on Submit Click.

If not using Validation Controls, what may be the issue ?


Do you have an idea??

Thanks again.

Omen said...

So you have removed ALL the validation controls and still get the same issue?

How are you firing the popup? Client side or server side?

Sujith said...
This comment has been removed by the author.
Sujith said...

Yes,
I have removed all the validation controls from the entire page.

I'm firing the popup from Server Side. I will assign the Key Value into a hidden variable through Client Side and will actually fire the popup from Server Side.

Please refer the code snippet below:

..........
..
tdObjective = new TableCell();
tdObjective.HorizontalAlign = HorizontalAlign.Center;

btnEditObj = new ImageButton();
btnEditObj.ImageUrl = "Images\\Edit1.gif";
btnEditObj.CausesValidation = false;
btnEditObj.Attributes.Add("OnClick", "javascript:EditObjectiveClick('" + empObjectiveID.ToString() + "');");
btnEditObj.Click += new ImageClickEventHandler(btnEditObj_Click);

tdObjective.Controls.Add((Control)btnEditObj);
trObjective.Cells.Add(tdObjective);


.....
.
.......


private void btnEditObj_Click(object sender, ImageClickEventArgs e)
{

ViewState["ObjAction"] = "EDIT";
LoadMasters();
ClearObjectivePanel();
PopulateObjectivePanel();
pnlObjective_ModalPopupExtender.Show();

}
.....
.......

Thanks much..!!

Rgds,
Sujith

Sujith said...

Some more info...


I've put an alert in the Client Side, it fires on every click of the button.

(Blog is restricting me in pasting the jscript here) :(


But, the Server Side event is calling on the Second Click Only..

Omen said...

Hi Sujith

I am slightly confused by your code.

You have added a server control )the button) but you are trying to call the event using javascript which is client side.

Remove this line:

btnEditObj.Attributes.Add("OnClick", "javascript:EditObjectiveClick('" + empObjectiveID.ToString() + "');");

Im guessing the javascript could be stopping the serverside event firing.

To get the mpObjectiveID value you could set the CommandArgument property on the imagebutton and retrieve this server side on the click event.

I think you have got slightly mixed up with client side and server side calls.

Hope you understand this and it sorts your problem.

Sujith said...

Hi,

I followed as you told.
Removed the Client Side function.
Passed the value thru CommandArgument.

But, the issue remains :(
(Popup happening only on second click, after a Submit)


There is one thing which i found, which may help you in helping me..

On the Submit Click (inside the popup panel), after saving the values, I am calling a function to load the table in the parent page (so that it will be updated with the newly entered values). The entire table will get reloaded.

If I remove this function call, my issue is resolved. Everything works fine.

But, I need the parent table to refresh after every update throug the popup panel.

Omen said...

Sounds like an events issue - move the table loading to the page load event rather than in the click event.

sujith said...

The table loading is anyway happening in the Page_Load.

But the Page_Load fires before the Submit Button Click. Hence to update the parent table with the updated values, I need to fire the function to load the table in the parent page..

So,
On the submit click


- Loading Parent Table (Page_Load)
- Update Database (Submit_Click)
- Loading Parent Table (Submit_Click)


If I remove the third step, issue is resolved. But, my objective wont be met..

Sorry, If I'm troubling you. I'm having a tough time in doing RnD with Ajax..
I'm sure this blog and its follow-ups are going to help someone in future.. :)

Thanks again!

Anonymous said...

Hey another fix is [CausesValidation="false"]
Why do we have to do this at all! It all was working before. It just began to be an issue!!

Anonymous said...

OMG!!! Thanks a ton dude...I was abt to abandon the page and start from scratch...Million Dollar question is...how did you end up looking into this? I mean I spent DAYS on it but never thought to look at the valifation group as the problem..In my case one validator was missing the grp name. So why did you lok at that in specific?

Omen said...

:o) Cant remeber exactly - but i knew it was something to do with the validation. Think i just gave it a go.


Glad it helped you out dude! ;o)

SUJITH said...

Sorry for the late post.
Even I rectified the issue.
It was not causes validation which caused the issue to me, but a little careless..

While creating buttons dynamically, I missed out assigning a unique ID to the control, which inturn was the cause of the 'mandatory second click'.


Thanks all !

Anonymous said...

this post solved my problem, thanks!

Online Status Reports said...

I just noticed by the way that the Click event won't fire if you have multiple embedded user controls on one form, and they both have the same validation group names shared within them.

Chamila said...

check this also...
http://chamilaw.blogspot.com/2011/05/can-not-put-more-than-one-modalpopup.html