1

Most of the times we face issues while we integrate jQuery UI popups in Visual Force page. I was also struggling a lot as i was facing the same issues. And I found one article which helped me in fixing some of the common issues while dealing with jQuery popups. So I thought of sharing with you guys. This may be helpful for someone facing same kind of issues.

2

There is lot of conflict when we use jquery with visual force pages.

Often times the popup seems to annony developers. Whenever we invoke a .dialog() menthod on any div that is inside the <apex:form>, it will move the dialog out of the <apex:form> which you never wanted.

To fix this, make sure your <apex:form> tag has an ID specified. Then use jQuery to find it and put the popup back inside the <form> section. So, assuming my <form> tag has an id that renders as ‘ThePageID:TheFormID’ the code would look like this:

j$("#MyPopup").dialog({modal: true, autoOpen: false }).parent().appendTo(j$("#ThePageID\\:TheFormID"));

The datePicker on a popup is most annoying.Either it will be invisible or we wont be able to change the date using the datePicker.

datePicker goes behind the popup: This happens because of the z-index issues. We need to keep the z-index of a datePicker greater the the z-index of the popup dialog.

$("#MyPopup").dialog({modal: true, zIndex: 9 });

Not able to change date through datePicker on a jQuery Popup: This is the most common problem that i found. I also faced this problem and was not able to understand why this happens. So i found a hack to fix this problem. I added a class "ui-dialog" to datePicker and it worked fine.

$('#datePicker').addClass('ui-dialog');

Today Link on datePicker doesnot work: To fix this issue add the below code.

jQuery('.calToday').click(function () {
                $('#datePicker').css("display", "none");
            });

Here is a very nice article that address common issues that we face while using jQuery UI with Visual Force.

http://improveit360.blogspot.in/2010/09/gotchas-using-jqueryui-to-make-popups.html

2
  • 2
    Rather than just post a link can you add any more detail to your answer? – Girbot Mar 3 '15 at 7:07
  • 1
    @Girbot This is just a knowledge sharing post. I have added some issues which i myself faced while dealing with jquery popups. – Yameen Mar 3 '15 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.