Another one of those “oh my god” moments in SharePoint programming, although it had nothing to do with SharePoint proper.
The Background
I want to dynamically add a DIV alongside a SharePoint field in Publishing page. The intended purpose is to extend the built-in control without any server-side code. I want the DIV to hold a simple hand-crafted AJAX call to add new items.
Everything is okay, I add my code to the SharePoint _spBodyOnLoadFunctionNames.push function, I find the control to be extended and I yank the DIV from its previous location to the parentNode object of the control. It nicely shows the new DIV below the original control:
The DIV contains an anchor element that has href=”#” and onclick=”SomeFunction();”. It’s created dynamically when the page loads:
var link = document.createElement("a");
link.href="#";
link.innerHTML = "Agregar nuevo elemento";
link.onclick = "SomeFunction();";
div.parentNode.appendChild(link);
The Symptoms
When you click the anchor in the added DIV, there’s a 30-second pause during which IE responds to no clicks, after which the following message appears:
Are you sure you want to navigate away from this page?
The page took too long to save. You can click “Cancel”, and then try to save the page again. If you click “OK”, you might lose unsaved data.
Press OK to continue, or Cancel to stay away on the current page.
After you click OK, the anchor works well, calling the SomeFunction flawlessly.
The First Suspect
I though that the issue was caused by another function I called, that uses “AJAX” call to owssvr.dll to filter cascading dropdown controls (more on that in next posts). It might leave the HTTP request in a undefined state so that the IE thinks it’s still not loaded.
I commented it out but the error persisted.
The Second Suspect
Then I thought that it has something to do with the appendChild method I use to move the DIV from its placeholder to the new position below the control it’s extending.
I changed the call to dynamically create a new DIV instead of moving the old one to a new position in DOM tree. But, the same error persisted.
The Real Culprit
After David Gutiérrez, one of my colleagues (whose mileage in JavaScript is much greater than mine) revised the code, and after a perfunctory “brain processing” period (which lasted about an hour, in this case), he appeared and outlined the malfunction.
The error message is caused by IE trying to “execute” the new onClick event, which is set to a JavaScript function in this case. But, the syntax is wrong, wrapped inside double-quotes, like in inline HTML.
link.onclick = "SomeFunction();";
The correct syntax is written just like a method call, using only the function name:
link.onclick = SomeFunction;
IE seems to “compile” the string into a method call, but only after you confirm that you want to navigate away. Weird enough.
