0

I have a webpage in which I dynamically change the HTML in the contentEditor div, depending on what topic the user picks in the navigation menu. The HTML in this contentEditor div gets loaded from external scripts:

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
new jscolor.color($line.find('input[name=color]')[0], {});
}
/* and so on... */
}

Now this works perfectly fine, the correct html gets loaded for every page. I do have a problem with Javascript though..

One of the textfields in the script that I have should be a color picker: enter image description here The color picker works perfectly when I load the page itself in my browser, but when I load this page in my contentEditor div, it does not get loaded:

enter image description here

The color picker is an external Javascript (downloaded from: http://jscolor.com/download.php).

I already tried loading it in both the main page as the editor page (editor is the one I load inside the main page), but that won't solve the problem either.

Question How do I make sure my Javascript gets executed when I load a page containing that script inside another HTML page's div?

PLEASE NOTE I do have other javascript in the editor that I load inside my main page. that is javascript that shows a pop up div. that works without any problem.

Any help would be highly appreciated!

Joris416
  • 4,751
  • 5
  • 32
  • 59
  • 1
    Is [this](http://stackoverflow.com/questions/538745/how-to-tell-if-a-script-tag-failed-to-load) what you're looking for? – Murillio4 Aug 20 '14 at 13:46
  • Thank you for your suggestion, But I am afraid this is not what I'm looking for. When I load the page itself in my browser, it works perfectly fine. The problem only occurs when I load the page inside another page. Any ideas on how I solve that problem? – Joris416 Aug 20 '14 at 13:58
  • just recall your color picker function on the reloaded html to reassign the picker like ``onAjaxLoaded(function(data){ setcontent(data); colorpicker(); })`` - edit ok the problem with your lib is that you only can reassign the whole html document with the colorpicker - everytime your ajax is loaded you setup a colorpicker maybee on elements that have allready modif. – ins0 Aug 20 '14 at 14:00
  • I am not familiar with Ajax and I am not using it, so I don't think that will be the problem. Thanks for the suggestion though! – Joris416 Aug 20 '14 at 14:18
  • 1
    @Imaginedigital so, you're saying, when you load the url, there's nothing? Try doing that, use google chrome and check the console for any error. – sulavvr Aug 20 '14 at 14:31
  • @sulavvr, that is true! when I load the URL in any browser, nothing is wrong. I may be a little further though: I added an unload="alert('loaded')" function on the script. Now, When I load the URL in a browser, it shows an alert confirming that the script is loaded. When I load the page in my other page, i don't het this alert, so basically it does not get loaded. Any idea how i solve this? – Joris416 Aug 20 '14 at 14:59
  • 1
    Ok, does your chrome console show any error? Maybe something like "No 'Access-Control-Allow-Origin' header is present...". – sulavvr Aug 20 '14 at 15:02
  • nothing, neither does safari console. Probably because it does not even try to load it? is there any function that I can trigger to load it, as it apparently does not work the automatic way? – Joris416 Aug 20 '14 at 15:04
  • Ok, then what is the URL of the page you are trying to load it on? – sulavvr Aug 20 '14 at 15:06
  • http://www.imaginedigital.nl/CMS/Main.php – Joris416 Aug 20 '14 at 15:42
  • and just in case: The url of the page i am loading in that page is imagine digital.nl/CMS/Editor/Homepage1.html – Joris416 Aug 20 '14 at 15:48
  • Ok, did you try doing this, using relative path instead of absolute path.`$("#contentEditor").load("Editor/Homepage9.html");` – sulavvr Aug 20 '14 at 16:26
  • I just did it but nothing changes. It is very strange, as the other JS I have just works (the popups from the blue buttons). I load the scripts the exact same way... – Joris416 Aug 20 '14 at 16:28
  • Can you try something like this, in your JS file, `$(document).ready(function()){ $('.button').on('click', '#contentEditorDiv', function(){ //call the color popup } }`, instead of doing the `onclick = popup()`.. – sulavvr Aug 20 '14 at 16:39
  • the on `click = popup()`; is not the function that calls the color picker. the color picker should be called by the ` – Joris416 Aug 20 '14 at 16:56
  • Hmmmm.. ok, what happens if you do something like this, `$('id').load('url', function(){ $('#background').addClass('color') })`.. adding class after the load. – sulavvr Aug 20 '14 at 17:10
  • ok, I think this might help, reinitialize the jscolor.. http://stackoverflow.com/questions/8366454/newly-added-elements-using-delegate-wont-bind-jscolor-js ... :D hopefully! – sulavvr Aug 20 '14 at 17:13
  • Thank you for your suggestions. I added the re-initialization from the answer you posted after the new html gets loaded (see updated question), but it does not help, neither does the line of code you posted. Should I implement them on a certain line? – Joris416 Aug 20 '14 at 18:31
  • @Imaginedigital First of all, the $line is undefined, so you can't use it, second of all you can't use `input[name=color]` because your element doesn't have a name attribute with the value 'color'. So, maybe try this.. `new jscolor.init();`, and try this on the load callback function.. which would look like this.. `$('#content....').load('path', function() { new jscolor.init(); });` – sulavvr Aug 20 '14 at 18:56

2 Answers2

0

Have you tried using window.onload=function(){SomeJavaScriptCode}; in the script you are loading?.

Take a look at this, the beforeload is what you might be looking for:

How do you detect that a script was loaded *and* executed in a chrome extension?

Community
  • 1
  • 1
Luke SpringWalker
  • 1,600
  • 3
  • 19
  • 33
  • I know it does not get loaded due to the fact that I added an unload "alert('loaded')", which does not show up when I load the page inside my other page. How do I make sure it actually gets loaded? – Joris416 Aug 20 '14 at 18:33
  • Have you tried using a callback function after loading? `if(editingPage == "Homepagina") { $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html", function(response, status, xhr){ if ( status == "success" ) { new jscolor.color($line.find('input[name=color]')[0], {}); } });` – Luke SpringWalker Aug 21 '14 at 14:27
0

you say that it dont load in the contenteditor id ? Please check first -> Are you using jQuery or Pure JS

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
}
/* and so on... */
}

From your code you are mixing Pure JS and jQuery + dont know are you using jQuery or not

document.getElementById('contentEditor'); -> Pure JS
$("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery

If you are not using jQuery -> $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery will not work

Johan Surya
  • 23
  • 7
  • I am using JQuery. The page itself gets loaded perfectly, the only problem is that the javascript is not working. any idea how I can solve that? please let me know if you need more information for that – Joris416 Aug 20 '14 at 13:49
  • So the script you first run (success one) is inside Homepage9.html ?And then you load it to #contentEditor which load the Homepage9.html with all its script ? I suggest you cut the script from Homepage9.html to your main site which load Homepage9.html – Johan Surya Aug 21 '14 at 05:14
  • I tried that and it is obviously not working as quotation marks cross each other interrupting the script. – Joris416 Aug 21 '14 at 14:42