CRM.confirm not working in my extensions

[lee.gooding]

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):

Code: [Select]

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?

[Coleman Watts]

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?

[lee.gooding]

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?

[Coleman Watts]

When you type that code into your console, while on your custom page, what is the error message?
Can you verify that Common.js is loading on that page?

[lee.gooding]

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:

Code: [Select]

<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:

Code: [Select]

<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>


[Coleman Watts]

Just to be clear, this is when typing the same code into your browser's console?

[lee.gooding]

Yep.

[Coleman Watts]

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.

[lee.gooding]

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.

[Coleman Watts]

Can you disable it from loading temporarily to verify that's the problem?

Try using noConflict mode when you load it.

[lee.gooding]

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.

[lee.gooding]

Alright, inserting CRM.$.noConflict() before the jQuery mobile code does not change anything. If I set it to CRM.$.noConflict(true) it breaks jquery-mobile.

On a side note, I had added this line to jQuery mobile to get it to load:

Code: [Select]

jQuery = CRM.$; // allows adding jQuery Mobile
Without that line jQuery-mobile isn't able to find jQuery properly and throws all sorts of errors. This is why running a "deep" noConflict breaks jquery-mobile (because it is dependent on jQuery).

I'm not sure what to do at this point, short of using jQuery mobile's dialogs.

[Coleman Watts]

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

[lee.gooding]

This is good to know.

I made the changes (and removed my hack from jquery-mobile) and now it is loading jquery-mobile right before noConflict in the header. However, I still don't get the confirm dialog...

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

[Coleman Watts]

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?