CiviCRM Community Forums (archive)

I have tested this in 2 different extensions and neither will show the confirmation dialog. The dialog will show just fine when viewing a standard CiviCRM page.

Here is the code I am using to test the dialog (it can be executed directly from the Java console in your browser):

CRM.confirm({
            title: 'My Title',
            message: ts('Add the %1 set of scheduled activities to this case?', {1: 'TEST'})
          })
            .on('crmConfirm:yes', function() {
             
            })
            .on('crmConfirm:no', function() {
             
            });
Any idea why this would work just fine on a standard page and not in an extension?

1) Yes this is a custom page that my extension defines
2) Yes, the url path is under civicrm (/civicrm/checkin/Checkin)
3) Yes, the CRM object exists

Are you talking about a custom page/form that your extension defines?
Does the url path to this page start with "civicrm/"?
Does the CRM object exist at all? Is Civi's standard javascript being loaded?

There is no error. Common.js is loading just fine. Below I have pasted the results from my extension, and then from a standard Civi page.

The element generated is completely different...

EXTENSION PAGE:
<div class="crm-confirm-dialog ui-dialog">
<div role="dialog" class="ui-dialog-contain ui-overlay-shadow ui-corner-all">Add the TEST set of scheduled activities to this case?
</div>
</div>

STANDARD PAGE:
<div class="crm-confirm-dialog ui-dialog-content ui-widget-content modal-dialog" id="ui-id-5" style="display: block; width: auto; min-height: 50px; max-height: none; height: auto;">Add the TEST set of scheduled activities to this case?</div>


Yep.

I am loading jQuery mobile which seems to be the most obvious difference between other extensions I have that work just fine with CRM.confirm. This extension will be run on a kiosk and jQuery mobile makes it really easy to create the user interface.

I've tested and removing jQuery mobile fixes the issue. Is there a way to work around it? Or do I just have to use the jQuery mobile interface. Maybe in this case it doesn't really matter if I use the CRM.confirm since I am completely restyling the interface. What do you think?

Thanks for helping me work through this.

Hmm, I wonder if there's a second copy of jQuery or jQuery UI loading on your extension's page that's interfering. Take a look at the scripts being loaded in the document.

It is definitely a conflict with jquery mobile. I'm currently at a conference. I'll try .noConflict on Monday when I get back and follow-up with my results.

Nope, that won't work. CRM.$ is already an instance of jQuery.noConflict() so definitely don't call it again on that.

Ah, I'm glad you added that "side note" that's actually the exact problem right there. You are loading jQuery mobile in the wrong place; it needs to be loaded in the header, after Civi's copy of jQuery, and before noConflict.js. Fix that and it should fix everything. And remove that hack before it causes more problems.

This is all documented here: http://wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference#JavascriptReference-jQuery

Hmm, well if everything is loading correctly, maybe jQuery mobile does something to dialogs to make them more mobile friendly? What do the docs say about it?