# Issues with dynamically adding add-ons after load

**URL:** <https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676>\
**Category:** Uncategorized\
**Created:** [March 8, 2016, 3:21am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676 "2016-03-08T03:21:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisban](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/f0a364/32.png) [@chrisban](https://discuss.codemirror.net/u/chrisban)\
**Post date:** [March 8, 2016, 3:21am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/1 "2016-03-08T03:21:38Z")

</div>

Hello,

I have a project I’m working on that creates multiple cm instances. On initial load, CM is loaded and works great. Afterwards an ajax call pulls the necessary add-on js/css resources and loads them.

These files get pulled fine, and I ensured that the js script is executed.

Still, I see no result. (ex: Match brackets and lang highlighting via mode don’t work even though mode is definitely set and match brackets option is set to true).

So, I figured maybe the editor just needs to call refresh! However that didn’t do anything for me either. I even tried to do it manually in console just to check ( $(’.CodeMirror’)[0].CodeMirror.refresh() ) which results in ‘undefined’, and the editor there is definitely the correct/valid editor.

So I have no idea how to get this to work right and it’s driving me crazy.

This is how I have tried refreshing:

```
 $('.CodeMirror').each(function(idx, el){
 	console.log('cm instance: ', el); 
 	el.CodeMirror.refresh();
 });

for(var i = 0; i < structure.count; i++)
{
	console.log('cm instance: ', $('.CodeMirror')[i].CodeMirror); 
	$('.CodeMirror')[i].CodeMirror.refresh();
}

```

[Here](http://imgur.com/a/Tvo91) is an album of relevant? images.

It’s also worth noting that when I explicitly hardcoded the scripts on the client side it worked ok. However, I need to be dynamically serving these files.

I’m using CM 5.12.

Any thoughts?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 8, 2016, 8:35am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/2 "2016-03-08T08:35:29Z")

</div>

Have you tried re-setting the relevant option with `setOption`? If the option initially didn’t exist, it’ll be ignored, and the editor won’t notice that it gets defined later on.

---

<div class="post-metadata">

**Author:** ![chrisban](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/f0a364/32.png) [@chrisban](https://discuss.codemirror.net/u/chrisban)\
**Post date:** [March 8, 2016, 8:55am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/3 "2016-03-08T08:55:15Z")

</div>

Didn’t seem to help… Assuming I understand you right, after all resources are loaded and editors init’d, I essentially tried:

```
var cm = $('.CodeMirror')[i].CodeMirror; 
cm.setOption('matchBrackets', true);
cm.setOption('autoRefresh', true);
cm.setOption('mode', mode[i]);
cm.refresh();

```

but to no effect.

Thanks for the quick response/help!

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 8, 2016, 9:28am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/4 "2016-03-08T09:28:40Z")

</div>

Oh, there’s a check that ignores `setOption` when the value is equal to the old value. So for now, you’ll have to first set these to something else, and then update them again with their intended value.

---

<div class="post-metadata">

**Author:** ![chrisban](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/f0a364/32.png) [@chrisban](https://discuss.codemirror.net/u/chrisban)\
**Post date:** [March 8, 2016, 10:42pm UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/5 "2016-03-08T22:42:45Z")

</div>

Hm, so I set those options to false, refresh, then set them back to true and refresh (two separate fors just to be extra sure haha). Still seeing the same result sadly.

Initializing editors without those settings and then using setOption after everything is loaded still doesn’t show any results either.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 9, 2016, 8:39am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/6 "2016-03-09T08:39:56Z")

</div>

I just ran this code on the demo on the webpage, and it turned the editor purple. So it might be that your problem is elsewhere.

```javascript
CodeMirror.defineOption("bg", null, function(cm, val) {
  cm.display.wrapper.style.background = val
})
editor.setOption("bg", "purple")

```

One possibility is that the way you’re loading the addon is causing it to load a separate `CodeMirror` module from the one your editor is using, and register its options there. Thus, your editor won’t see it. Add a `console.log` to the top of `codemirror.js` to find out how often it is being loaded.

---

<div class="post-metadata">

**Author:** ![chrisban](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/f0a364/32.png) [@chrisban](https://discuss.codemirror.net/u/chrisban)\
**Post date:** [March 10, 2016, 10:30pm UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/7 "2016-03-10T22:30:33Z")

</div>

> [@marijn](#):
>
> editor.setOption(“bg”, “purple”)

Okay so cm.js is called only once. I also added your color check and that worked and turned all the editors purple! How frustrating!! As you have said, my problem most likely lies elsewhere at this point…

Part of why I load some add-ons afterward is because codemirror.js itself is being served first (not hardcoded with script tag). Initially when I tried loading them sequentially, I got errors regarding codemirror not being undefined which led me to staggering the load (cm first then add-ons at the next stage)

Could this be the problem?

Thanks for all your help!!

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 11, 2016, 8:37am UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/8 "2016-03-11T08:37:38Z")

</div>

The addons all register themselves with the codemirror.js module, so you have to load that first. But I don’t see a reason to initialize the editor before loading the addons.

---

<div class="post-metadata">

**Author:** ![chrisban](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/f0a364/32.png) [@chrisban](https://discuss.codemirror.net/u/chrisban)\
**Post date:** [March 31, 2016, 4:52pm UTC](https://discuss.codemirror.net/t/issues-with-dynamically-adding-add-ons-after-load/676/9 "2016-03-31T16:52:13Z")

</div>

I realized I forgot to post a reply here. I’ve run out of time and had to work around that feature. Not the end of the world really.

Thanks for taking the time to try and help me out marijn! You’re awesome!