The Javascript function does not work in the HTML editor for Sharepoint

advertisements

No jquery. Pure javascript. I am using a Sharepoint html content editor. I have marked the sources to the images and urls as confidential. I am trying to get it so that when the user clicks on one of the images it triggers the function 'open(this)' and will create a popup window (modal) to a specific url. So far when the user clicks one of the two images it pops up the window but always to the confidential2 url. So when it should match the first case in the if statement of 'open(this)' it is not going to that url. And yes I have checked to make sure I have different urls. I switched the urls around too and it ALWAYS goes to confidential2!! Please help if you can.

<script type="text/javascript">
function opac(x) {
  x.style.opacity=.5;
}
function opac_back(x) {
  x.style.opacity=1;
}
</script> 

<script type="text/javascript">
var options = {
url: theurl,
        title: "Learning_Technology",
        allowMaximize: true,
        showClose: true,
        width: 625,
        height: 525,
        dialogReturnValueCallback: silentCallback};
function open(x) {
        var theurl;
    if (x.id == "1") {
        theurl = "confidential1";
    } else if (x.id == "2") {
        theurl = "confidential2";
    } else {

    }
    SP.UI.ModalDialog.showModalDialog(options);
}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
    SP.UI.Notify.addNotification('Operation Successful!');
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
} </script>

<div style="background-color: rgb(237, 237, 237); width: auto; height: auto;">
<center><h2 style="color: green;">MyLearning Requests</h2></center>

<div style="height: auto; width: auto;">
<center><a href="javascript:open(this)"><img width="164" height="42" border="0" id="1" name="button22694Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="opacity: 1;"/></a>    

<a href="javascript:open(this)"><img width="164" height="42" border="0" id="2" name="button27129Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="cursor: pointer; opacity: 1;"/></a>

</center>
</div>
</div>


You're calling open(this) on the link tag therefor this will be the link and not the image. As the link has no id attribute you're comparing undefined with "1" and "2" which will fail both. You will have to do some little DOM traversal to get the image in the link :)

function open(x) {
        var theurl,
            img = x.firstChild;

    if (img.id == "1") {
        theurl = "confidential1";
    } else if (x.img == "2") {
        theurl = "confidential2";
    } else {

    }
    SP.UI.ModalDialog.showModalDialog(options);
}