CRM-17352 - Use Backbone.noConflict #11504

colemanw · 2018-01-10T21:58:03Z

Overview

Fixes JS errors caused by the presence of other versions of Backbone (e.g. in Drupal 8 or certain WP extensions).

Before

Profiles cannot be edited on the "Manage Event" screen etc. in D8 or certain WP sites.

After

Profile editing works normally regardless of other js plugins present.

Notes

This requires civicrm/civicrm-packages#198 - use both PRs when testing.

CRM-17352: Backbone no-conflict

eileenmcnaughton · 2018-01-10T22:10:02Z

Should we close #9759 in response to this?

colemanw · 2018-01-10T23:47:23Z

Test failures make no sense to me. Retest this please.

seamuslee001 · 2018-01-11T02:29:46Z

test this please

seamuslee001 · 2018-01-11T05:35:29Z

@colemanw @jackrabbithanna @dsnopek

I tried testing this out with drupal 8 and it appears that the new script is being loaded too early

this is what the sources looked like in my testing of the manage contribution page

<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/css/crm-i.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/datatables/media/css/jquery.dataTables.min.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/font-awesome/css/font-awesome.min.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/select2/select2.min.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/css/civicrmNavigation.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/css/civicrm.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jstree/themes/default/style.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/css/crm.designer.css?r=iZ9qm" rel="stylesheet" />
<link href="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/backbone-forms/distribution/templates/default.css?r=iZ9qm" rel="stylesheet" />
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/jquery/dist/jquery.min.js?r=iZ9qm"></script>
<script>CRM.BB = Backbone.noConflict();</script>
<meta name="Generator" content="Drupal 8 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/core/misc/favicon.ico" type="image/vnd.microsoft.icon" />
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/jquery-ui/jquery-ui.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/lodash-compat/lodash.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.mousewheel.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/select2/select2.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.form.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.timeentry.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.blockUI.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/datatables/media/js/jquery.dataTables.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/bower_components/jquery-validation/dist/jquery.validate.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.ui.datepicker.validation.min.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/js/Common.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/js/crm.ajax.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/js/wysiwyg/crm.wysiwyg.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.tableHeader.js?r=iZ9qm"></script>
<script src="http://d8-test:7977/vendor/civicrm/civicrm-core/packages/jquery/plugins/jquery.menu.min.js?r=iZ9qm"></script>

This was leading to

amount?action=update&reset=1&id=1:20 Uncaught ReferenceError: Backbone is not defined
    at amount?action=update&reset=1&id=1:20```

dsnopek · 2018-01-11T06:14:17Z

I don't know if this is related, but I've seen some issues with Javascript files being loaded too early and my theory was that it was because they were intended for the footer, but since D8's CiviCRM integration can't yet put scripts in the footer, it was putting them in the header and too high up. I never got around to verifying that, though - the specific broken Javascript was low priority.

colemanw · 2018-01-11T12:57:46Z

@seamuslee001 is that the complete header? I don't see the Backbone scripts in there at all :/

seamuslee001 · 2018-01-11T14:46:10Z

@colemanw no they were getting loaded but much further down. After the navigation menu js etc. I can post fuller tomorrow if needed.

colemanw · 2018-01-11T15:55:05Z

@seamuslee001 I've just pushed another change which might solve the problem. It's a little heavy-handed but is probably the safest way to avoid edge-case bugs related to script ordering.

dsnopek · 2018-01-11T17:49:44Z

@colemanw Can you share what the <script> tags look like after your most recent change? It'd be nice to compare it with @seamuslee001's comment above #11504 (comment)

colemanw · 2018-01-11T17:54:48Z

Sorry I haven't had time to spin up a D8 sandbox to test this on. I've verified that it doesn't break anything on D7, and GH just enthusiastically gave it a thumbs up for fixing the bugs in Wordpress. I'm confident this should do the trick on D8 but will need someone to try it out.

dsnopek · 2018-01-11T18:00:06Z

Ok, I'll see if I can help test - just reading the details of the issue now :-)

dsnopek · 2018-01-11T18:22:59Z

I did some testing on Drupal 8!

Since I'm new to this issue, it wasn't totally clear to me how to reproduce. This is what I tried (please let me know if I'm doing this wrong):

Create a new Event
While still on the "Configure Event" page, I clicked "Online Registration" tab
Checked the "Allow Online Registration" checkbox
Went down to the "Include Profile" field and clicked the "add another profile" link

Expected: I would have the ability to add another profile

Actual: the screen scrolled up to the top of the page and nothing changed. No Javascript errors in the console.

Then I applied both the changes here and the changes on civicrm/civicrm-packages#198 and cleared all the caches

Following the same steps, I get the same result, except now there are numerous Javascript errors:

crm.backbone.js?r=XJfFH:448 Uncaught TypeError: Cannot read property 'Model' of undefined
    at crm.backbone.js?r=XJfFH:448
    at crm.backbone.js?r=XJfFH:572
crm.designer.js:5 Uncaught TypeError: Cannot read property 'extend' of undefined
    at crm.designer.js:5
    at crm.designer.js:121
crm.profile-selector.js:4 Uncaught TypeError: Cannot read property 'extend' of undefined
    at crm.profile-selector.js:4
    at crm.profile-selector.js:9
crm.schema-mapped.js:17 Uncaught TypeError: Cannot read property 'extend' of undefined
    at crm.schema-mapped.js:17
    at crm.schema-mapped.js:47
crm.uf.js?r=XJfFH:125 Uncaught TypeError: Cannot read property 'extend' of undefined
    at crm.uf.js?r=XJfFH:125
    at crm.uf.js?r=XJfFH:848
crm.designer.js:34 Uncaught TypeError: Cannot read property 'Marionette' of undefined
    at crm.designer.js:34
    at crm.designer.js:878
crm.profile-selector.js:4 Uncaught TypeError: Cannot read property 'Marionette' of undefined
    at crm.profile-selector.js:4
    at crm.profile-selector.js:188
jquery.crmProfileSelector.js:2 Uncaught TypeError: CRM.UF.UFGroupCollection is not a constructor
    at jquery.crmProfileSelector.js:2
    at jquery.crmProfileSelector.js:99
crm.designerapp.js?r=XJfFH:11 Uncaught TypeError: Cannot read property 'Application' of undefined
    at HTMLDocument.<anonymous> (crm.designerapp.js?r=XJfFH:11)
    at i (jquery.min.js?r=XJfFH:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?r=XJfFH:2)
    at Function.ready (jquery.min.js?r=XJfFH:2)

Looking at the page source, the <script> tags are definitely changed! Here's how they look for me:

<script type="text/javascript">
var CRM = {"tabSettings":{"active":"location"},"config":{"isFrontend":false,"wysisygScriptLocation":"http:\/\/roundearth-upstream.lndo.site\/libraries\/civicrm\/\/js\/wysiwyg\/crm.ckeditor.js","CKEditorCustomConfig":{"default":"http:\/\/roundearth-upstream.lndo.site\/sites\/default\/files\/civicrm\/persist\/crm-ckeditor-default.js"}},"PseudoConstant":{"locationType":{"5":"Billing","1":"Home","3":"Main","4":"Other","2":"Work"},"websiteType":{"1":"Work","2":"Main","3":"Facebook","4":"Google+","5":"Instagram","6":"LinkedIn","7":"MySpace","8":"Pinterest","9":"SnapChat","10":"Tumblr","11":"Twitter","12":"Vine"},"phoneType":{"1":"Phone","2":"Mobile","3":"Fax","4":"Pager","5":"Voicemail"}},"initialProfileList":{"is_error":0,"version":3,"count":13,"values":[{"id":"1","is_active":"1","group_type":"Individual,Contact","title":"Name and Address","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"0","name":"name_and_address","is_proximity_search":"0"},{"id":"2","is_active":"1","group_type":"Individual,Contact","title":"Supporter Profile","help_post":"<p><strong>The information you provide will NOT be shared with any third party organisations.<\/strong><\/p><p>Thank you for getting involved in our campaign!<\/p>","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"2","is_reserved":"0","name":"supporter_profile","is_proximity_search":"0"},{"id":"3","is_active":"1","group_type":"Participant","title":"Participant Status","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"participant_status","is_proximity_search":"0"},{"id":"4","is_active":"1","group_type":"Individual,Contact","title":"New Individual","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"new_individual","is_proximity_search":"0"},{"id":"5","is_active":"1","group_type":"Organization,Contact","title":"New Organization","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"new_organization","is_proximity_search":"0"},{"id":"6","is_active":"1","group_type":"Household,Contact","title":"New Household","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"new_household","is_proximity_search":"0"},{"id":"7","is_active":"1","group_type":"Contact","title":"Summary Overlay","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"summary_overlay","is_proximity_search":"0"},{"id":"8","is_active":"1","group_type":"Contact","title":"Shared Address","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"shared_address","is_proximity_search":"0"},{"id":"9","is_active":"1","group_type":"Contact,Organization","title":"On Behalf Of Organization","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"on_behalf_organization","is_proximity_search":"0"},{"id":"10","is_active":"1","group_type":"Contribution","title":"Contribution Bulk Entry","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"contribution_batch_entry","is_proximity_search":"0"},{"id":"11","is_active":"1","group_type":"Membership","title":"Membership Bulk Entry","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"membership_batch_entry","is_proximity_search":"0"},{"id":"12","is_active":"1","group_type":"Individual,Contact","title":"Your Registration Info","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"0","name":"event_registration","is_proximity_search":"0"},{"id":"13","is_active":"1","group_type":"Individual,Contact","title":"Honoree Individual","add_captcha":"0","is_map":"0","is_edit_link":"0","is_uf_link":"0","is_update_dupe":"0","is_cms_user":"0","is_reserved":"1","name":"honoree_individual","is_proximity_search":"0"}]},"contactSubTypes":[],"profilePreviewKey":"06b184c35ad3ff6f413852c54207eeef_7618","civiSchema":{"IndividualModel":{"schema":{"address_name":{"type":"Text","title":"Address Name","civiFieldType":"Contact","civiIsLocation":true},"addressee":{"type":"Text","title":"Addressee","civiFieldType":"Contact"},"addressee_custom":{"type":"Text","title":"Addressee Custom","civiFieldType":"Contact"},"city":{"type":"Text","title":"City","civiFieldType":"Contact","civiIsLocation":true},"communication_style_id":{"type":"Text","title":"Communication Style","civiFieldType":"Contact"},"id":{"type":"Text","title":"Contact ID","civiFieldType":"Contact"},"contact_source":{"type":"Text","title":"Contact Source","civiFieldType":"Contact"},"contact_sub_type":{"type":"Text","title":"Contact Subtype","civiFieldType":"Contact"},"country":{"type":"Text","title":"Country","civiFieldType":"Contact","civiIsLocation":true},"county":{"type":"Text","title":"County","civiFieldType":"Contact","civiIsLocation":true},"do_not_email":{"type":"Text","title":"Do Not Email","civiFieldType":"Contact"},"do_not_mail":{"type":"Text","title":"Do Not Mail","civiFieldType":"Contact"},"do_not_phone":{"type":"Text","title":"Do Not Phone","civiFieldType":"Contact"},"do_not_sms":{"type":"Text","title":"Do Not Sms","civiFieldType":"Contact"},"do_not_trade":{"type":"Text","title":"Do Not Trade","civiFieldType":"Contact"},"email":{"type":"Text","title":"Email","civiFieldType":"Contact","civiIsLocation":true},"email_greeting":{"type":"Text","title":"Email Greeting","civiFieldType":"Contact"},"email_greeting_custom":{"type":"Text","title":"Email Greeting Custom","civiFieldType":"Contact"},"external_identifier":{"type":"Text","title":"External Identifier","civiFieldType":"Contact"},"group":{"type":"Text","title":"Group(s)","civiFieldType":"Contact"},"im":{"type":"Text","title":"IM Screen Name","civiFieldType":"Contact","civiIsLocation":true},"image_URL":{"type":"Text","title":"Image Url","civiFieldType":"Contact"},"geo_code_1":{"type":"Text","title":"Latitude","civiFieldType":"Contact","civiIsLocation":true},"geo_code_2":{"type":"Text","title":"Longitude","civiFieldType":"Contact","civiIsLocation":true},"nick_name":{"type":"Text","title":"Nickname","civiFieldType":"Contact"},"is_opt_out":{"type":"Text","title":"No Bulk Emails (User Opt Out)","civiFieldType":"Contact"},"note":{"type":"Text","title":"Note(s)","civiFieldType":"Contact"},"openid":{"type":"Text","title":"OpenID","civiFieldType":"Contact"},"phone":{"type":"Text","title":"Phone","civiFieldType":"Contact","civiIsLocation":true,"civiIsPhone":true},"phone_and_ext":{"type":"Text","title":"Phone and Extension","civiFieldType":"Contact","civiIsLocation":true,"civiIsPhone":true},"postal_code":{"type":"Text","title":"Postal Code","civiFieldType":"Contact","civiIsLocation":true},"postal_code_suffix":{"type":"Text","title":"Postal Code Suffix","civiFieldType":"Contact","civiIsLocation":true},"postal_greeting":{"type":"Text","title":"Postal Greeting","civiFieldType":"Contact"},"postal_greeting_custom":{"type":"Text","title":"Postal Greeting Custom","civiFieldType":"Contact"},"preferred_communication_method":{"type":"Text","title":"Preferred Communication Method","civiFieldType":"Contact"},"preferred_language":{"type":"Text","title":"Preferred Language","civiFieldType":"Contact"},"preferred_mail_format":{"type":"Text","title":"Preferred Mail Format","civiFieldType":"Contact"},"signature_html":{"type":"Text","title":"Signature Html","civiFieldType":"Contact"},"signature_text":{"type":"Text","title":"Signature Text","civiFieldType":"Contact"},"state_province":{"type":"Text","title":"State","civiFieldType":"Contact","civiIsLocation":true},"street_address":{"type":"Text","title":"Street Address","civiFieldType":"Contact","civiIsLocation":true},"supplemental_address_1":{"type":"Text","title":"Supplemental Address 1","civiFieldType":"Contact","civiIsLocation":true},"supplemental_address_2":{"type":"Text","title":"Supplemental Address 2","civiFieldType":"Contact","civiIsLocation":true},"supplemental_address_3":{"type":"Text","title":"Supplemental Address 3","civiFieldType":"Contact","civiIsLocation":true},"tag":{"type":"Text","title":"Tag(s)","civiFieldType":"Contact"},"user_unique_id":{"type":"Text","title":"Unique ID (OpenID)","civiFieldType":"Contact"},"url":{"type":"Text","title":"Website","civiFieldType":"Contact","civiIsWebsite":true},"birth_date":{"type":"Text","title":"Birth Date","civiFieldType":"Individual"},"current_employer":{"type":"Text","title":"Current Employer","civiFieldType":"Individual"},"is_deceased":{"type":"Text","title":"Deceased","civiFieldType":"Individual"},"deceased_date":{"type":"Text","title":"Deceased Date","civiFieldType":"Individual"},"first_name":{"type":"Text","title":"First Name","civiFieldType":"Individual"},"formal_title":{"type":"Text","title":"Formal Title","civiFieldType":"Individual"},"gender_id":{"type":"Text","title":"Gender","civiFieldType":"Individual"},"prefix_id":{"type":"Text","title":"Individual Prefix","civiFieldType":"Individual"},"suffix_id":{"type":"Text","title":"Individual Suffix","civiFieldType":"Individual"},"job_title":{"type":"Text","title":"Job Title","civiFieldType":"Individual"},"last_name":{"type":"Text","title":"Last Name","civiFieldType":"Individual"},"legal_identifier":{"type":"Text","title":"Legal Identifier","civiFieldType":"Individual"},"middle_name":{"type":"Text","title":"Middle Name","civiFieldType":"Individual"},"formatting":{"type":"Markup","title":"Free HTML","civiFieldType":"Formatting","section":"formatting"}},"sections":{"default":{"title":"Individual","is_addable":false},"formatting":{"title":"Formatting","is_addable":false}}},"ParticipantModel":{"schema":{"participant_campaign_id":{"type":"Text","title":"Campaign","civiFieldType":"Participant"},"event_type":{"type":"Text","title":"Event Type","civiFieldType":"Participant"},"participant_fee_amount":{"type":"Text","title":"Fee Amount","civiFieldType":"Participant"},"participant_fee_currency":{"type":"Text","title":"Fee Currency","civiFieldType":"Participant"},"participant_note":{"type":"Text","title":"Participant Note","civiFieldType":"Participant"},"participant_role":{"type":"Text","title":"Participant Role","civiFieldType":"Participant"},"participant_source":{"type":"Text","title":"Participant Source","civiFieldType":"Participant"},"participant_status":{"type":"Text","title":"Participant Status","civiFieldType":"Participant"},"participant_register_date":{"type":"Text","title":"Register date","civiFieldType":"Participant"},"participant_registered_by_id":{"type":"Text","title":"Registered By ID","civiFieldType":"Participant"},"transferred_to_contact_id":{"type":"Text","title":"Transferred to Contact ID","civiFieldType":"Participant"}},"sections":{"default":{"title":"Participant","is_addable":false}}}}};
</script>
<script type="text/javascript" src="/libraries/civicrm/bower_components/jquery/dist/jquery.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/bower_components/jquery-ui/jquery-ui.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/bower_components/lodash-compat/lodash.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.mousewheel.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/bower_components/select2/select2.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.form.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.timeentry.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.blockUI.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/bower_components/datatables/media/js/jquery.dataTables.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/bower_components/jquery-validation/dist/jquery.validate.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.ui.datepicker.validation.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/js/Common.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/js/crm.ajax.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/js/wysiwyg/crm.wysiwyg.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.tableHeader.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.menu.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jquery.notify.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/js/crm.optionEdit.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/js/crm.drupal.js?r=XJfFH">
</script>
<script type="text/javascript" src="/civicrm/ajax/l10n-js/en_US?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/jquery/plugins/jstree/jquery.jstree.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/templates/CRM/common/TabHeader.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone/json2.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone/backbone.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone/backbone.collectionsubset.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone/backbone.marionette.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone-forms/distribution/backbone-forms.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone-forms/distribution/adapters/backbone.bootstrap-modal.min.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/packages/backbone-forms/distribution/editors/list.min.js?r=XJfFH">
</script>
<script type="text/javascript">
CRM.BB = Backbone.noConflict();
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/button.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/collapse.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/dropdown.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/modal.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/scrollspy.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/tab.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/base/js/transition.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/js/noConflict.js?r=XJfFH">
</script>
<script type="text/javascript" src="/libraries/civicrm/js/noconflict.js?r=XJfFH">
</script>
<link href="/libraries/civicrm/css/crm-i.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/bower_components/datatables/media/css/jquery.dataTables.min.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/bower_components/font-awesome/css/font-awesome.min.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/bower_components/select2/select2.min.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/css/civicrmNavigation.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/css/civicrm.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/tools/extensions/org.civicrm.shoreditch-0.1-alpha12/css/bootstrap.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/packages/jquery/plugins/jstree/themes/default/style.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/css/crm.designer.css?r=XJfFH" rel="stylesheet" />
<link href="/libraries/civicrm/packages/backbone-forms/distribution/templates/default.css?r=XJfFH" rel="stylesheet" />

Please let me know if I did anything wrong! I'd be happy to test again. :-)

colemanw · 2018-01-11T18:52:50Z

Hmm @dsnopek those scripts look correct to me. Can you also clear your browser cache?

dsnopek · 2018-01-11T19:23:30Z

I tried clearing caches - that didn't help.

The Javascript errors are basically saying that Backbone is undefined when crm.backbone.js runs.

I tried running Backbone.noConflict() in the JS console and it will actually makes Backbone be undefined!

So, here's appears to be happening:

/libraries/civicrm/packages/backbone/backbone.js loads (in the header) defining Backbone
CRM.BB = Backbone.noConflict(); runs, undefining Backbone
/libraries/civicrm/js/crm.backbone.js loads (in the page content) where the errors are caused
/core/assets/vendor/backbone/backbone-min.js loads (in the footer) where Backbone is defined again by Drupal

If I change this line:

CRM.BB = Backbone.noConflict();

to:

Backbone = CRM.BB = Backbone.noConflict();

That gets rid of the errors from crm.backbone.js. However, I think it'd probably be better if crm.backbone.js depended on CRM.BB rather than expecting Backbone to be from CiviCRM.

I'm still getting this Javascript error from crm.designerapp.js:

Uncaught TypeError: Cannot read property 'Application' of undefined
    at HTMLDocument.<anonymous> (crm.designerapp.js?r=0VpAJ:11)
    at i (jquery.min.js?r=0VpAJ:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?r=0VpAJ:2)
    at Function.ready (jquery.min.js?r=0VpAJ:2)
    at HTMLDocument.K (jquery.min.js?r=0VpAJ:2)

I'm really not sure why my hack doesn't work there too? However, probably all these Javascript files that refer to Backbone should have CRM.BB passed in!

dsnopek · 2018-01-11T19:28:09Z

Gah! Nevermind. :-) I messed up applying the patches.

I forgot that because I'm running with the vendor directory outside of the webroot, that I needed to copy any changes to assets into the webroot. We have a build script that does that, but since I was applying these patches by hand, I was forgetting that step.

Undoing my hack and just working straight with the patches is now working in my testing! Sorry for all noise... And 👍

seamuslee001 · 2018-01-11T22:14:26Z

@colemanw @dsnopek i have run this on my D8 now and confirmed that the profile edit wizard now appears and i can select profiles as normal on contribution forms YAY.

However when i click on edit to edit a profile from the contribution config page this is what i get

colemanw · 2018-01-11T23:34:46Z

Ok so this has now been tested successfully on D7, D8 and Wordpress. I think we're in good shape to merge. I'll wait another day for any additional feedback & then merge if there are no objections.

colemanw · 2018-01-11T23:38:49Z

Oh wait I just saw your last comment @seamuslee001. Do you have any errors in your console?

seamuslee001 · 2018-01-11T23:41:56Z

@colemanw there aren't any console errors. if anything it looks like a style problem because if you look right at the bottom of that screenshot you will see the profile stuff there but its just not in the modal area and not on the left like it usually is. I've attached an updated screenshot which shows the issue a bit more cleanly

seamuslee001 · 2018-01-11T23:52:57Z

@colemanw i think i have solved the display problem see PR here colemanw#5

seamuslee001 · 2018-01-11T23:53:22Z

Jenkins re test this please

seamuslee001 · 2018-01-12T00:27:20Z

Jenkins re test this please

colemanw · 2018-01-12T00:35:30Z

Test failures are unrelated, it was passing before and the only update was to CSS.

seamuslee001 · 2018-01-12T00:36:34Z

@colemanw i think the test failure is coming from https://github.com/civicrm/civicrm-core/pull/11507/files where https://github.com/civicrm/civicrm-core/pull/11507/files#diff-7b0caad195353c8c5d49bbf5f053daf6R89 isn't being picked up should be indented an extra 2 spaces because it doesn't seem to understand the finally stuff

kngs · 2018-07-13T18:41:15Z

I'm running 5.2.1 in Joomla and getting the following js errors:

JQMIGRATE: Migrate is installed, version 1.4.1
crm.backbone.js:448 Uncaught TypeError: Cannot read property 'Model' of undefined
at crm.backbone.js:448
at crm.backbone.js:572
crm.designer.js:5 Uncaught TypeError: Cannot read property 'extend' of undefined
at crm.designer.js:5
at crm.designer.js:121
crm.profile-selector.js:4 Uncaught TypeError: Cannot read property 'extend' of undefined
at crm.profile-selector.js:4
at crm.profile-selector.js:9
crm.schema-mapped.js:17 Uncaught TypeError: Cannot read property 'extend' of undefined
at crm.schema-mapped.js:17
at crm.schema-mapped.js:47
crm.uf.js:125 Uncaught TypeError: Cannot read property 'extend' of undefined
at crm.uf.js:125
at crm.uf.js:874
crm.designer.js:34 Uncaught TypeError: Cannot read property 'Marionette' of undefined
at crm.designer.js:34
at crm.designer.js:878
crm.profile-selector.js:4 Uncaught TypeError: Cannot read property 'Marionette' of undefined
at crm.profile-selector.js:4
at crm.profile-selector.js:188
jquery.crmProfileSelector.js:2 Uncaught TypeError: CRM.UF.UFGroupCollection is not a constructor
at jquery.crmProfileSelector.js:2
at jquery.crmProfileSelector.js:99
crm.designerapp.js:11 Uncaught TypeError: Cannot read property 'Marionette' of undefined
at HTMLDocument. (crm.designerapp.js:11)
at fire (jquery.js:3232)
at Object.fireWith [as resolveWith] (jquery.js:3362)
at Function.ready (jquery.js:3582)
at HTMLDocument.completed (jquery.js:3617)
jquery.js?r=z0ruE:10208 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.js?r=z0ruE:10208

eileenmcnaughton · 2018-07-13T23:13:32Z

@kngs perhaps try to get help on chat.civicrm.org - the error is maybe that the script files are not being loaded?

kngs · 2018-07-15T13:52:11Z

This was due to a conflict with the Grants Application extension which has been upgraded and is compatible with 5.x so is now resolved.

CRM-17352 - Use Backbone.noConflict

e7c93dd

civicrm-builder added the master label Jan 10, 2018

colemanw mentioned this pull request Jan 10, 2018

CRM-17352 - Use Backbone.noConflict civicrm/civicrm-packages#198

Merged

CRM-17352 - Use CiviCRM to load scripts for consistency

670a34b

CRM-17352 fix display of modal on drupal8 (#5)

2d1111e

colemanw merged commit 3d47a43 into civicrm:master Jan 15, 2018

eileenmcnaughton deleted the CRM-17352 branch January 15, 2018 03:16

mlutfy added this to the 4.7.31 milestone Feb 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CRM-17352 - Use Backbone.noConflict #11504

CRM-17352 - Use Backbone.noConflict #11504

colemanw commented Jan 10, 2018 •

edited

eileenmcnaughton commented Jan 10, 2018

colemanw commented Jan 10, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018 •

edited

dsnopek commented Jan 11, 2018

colemanw commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

colemanw commented Jan 11, 2018

dsnopek commented Jan 11, 2018

colemanw commented Jan 11, 2018

dsnopek commented Jan 11, 2018

dsnopek commented Jan 11, 2018 •

edited

colemanw commented Jan 11, 2018

dsnopek commented Jan 11, 2018 •

edited

dsnopek commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

colemanw commented Jan 11, 2018

colemanw commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 12, 2018

colemanw commented Jan 12, 2018

seamuslee001 commented Jan 12, 2018

kngs commented Jul 13, 2018

eileenmcnaughton commented Jul 13, 2018

kngs commented Jul 15, 2018

CRM-17352 - Use Backbone.noConflict #11504

CRM-17352 - Use Backbone.noConflict #11504

Conversation

colemanw commented Jan 10, 2018 • edited

Overview

Before

After

Notes

eileenmcnaughton commented Jan 10, 2018

colemanw commented Jan 10, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018 • edited

dsnopek commented Jan 11, 2018

colemanw commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

colemanw commented Jan 11, 2018

dsnopek commented Jan 11, 2018

colemanw commented Jan 11, 2018

dsnopek commented Jan 11, 2018

dsnopek commented Jan 11, 2018 • edited

colemanw commented Jan 11, 2018

dsnopek commented Jan 11, 2018 • edited

dsnopek commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

colemanw commented Jan 11, 2018

colemanw commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 11, 2018

seamuslee001 commented Jan 12, 2018

colemanw commented Jan 12, 2018

seamuslee001 commented Jan 12, 2018

kngs commented Jul 13, 2018

eileenmcnaughton commented Jul 13, 2018

kngs commented Jul 15, 2018

colemanw commented Jan 10, 2018 •

edited

seamuslee001 commented Jan 11, 2018 •

edited

dsnopek commented Jan 11, 2018 •

edited

dsnopek commented Jan 11, 2018 •

edited