0

I have a javascript file saved in my site assets that i can get to run (I ran an alert box to test), but I can't get the function inside of it to run.

Here is the code for the button...

<button class="lg-button lg-button-text" id="testbutton" type="button" onclick="javascript:dialogfunction('https://asml.sharepoint.com/teams/HBO_EUV_AP_Tracker/SitePages/Help%20Center%20WPP.aspx')"> 
               <img class="excel-icon" alt="excel" src="/teams/HBO_EUV_AP_Tracker/SiteAssets/excel-logo.png" /> 
               <p class="lg-button-text">Create<br> Scanner AP</p>
</button>

Sharepoint designer immediately deletes the onclick code above ^ when I try to save it.

Here is the code in the javascript file...

function dialogfunction(pageUrl) {
      var options = { 
         url: pageUrl, 
         width: 1100, 
         height: 600,
      };
      SP.UI.ModalDialog.showModalDialog(options);
}

So I know it's connected correctly. I used a content editor and linked to the javascript page, and i know the modal box usually works because I had it working with an image when it was all in a script editor. But I'm not sure how to get it to bring up the modal box when I have the function in a javascript file.

I tried to load the javascript file after everything else, but that didn't do me any good eiher.

Can someone help! I have searched everywhere.

Improve this question
3
  • Have you used script tags in javascript file? Dont use it if you are using it
    – SharePointMan
    Aug 23, 2017 at 6:25
  • No script tags. I'm adding my html button code to the aspx page though. Is that a problem?
    – josh
    Aug 23, 2017 at 17:09
  • shouldnt be unless you use the code inside ajax update panel
    – SharePointMan
    Aug 24, 2017 at 5:49

2 Answers 2

Reset to default
1

Following code works for me: In html file (added link in Content Editor Webpart):

<script src="https://mysiteurl/SiteAssets/test.js"> </script>
<button id="customBtn"  onclick="javascript: test();" type=button >click me</button>

In JS File:

function test(){
              var e = "https://asml.sharepoint.com/teams/HBO_EUV_AP_Tracker/SitePages/Help%20Center%20WPP.aspx";
    var options = {
        title: "My Dialog Title",
        width: 400,
        height: 300,
        url: e
    };
    SP.UI.ModalDialog.showModalDialog(options);
           }

It opens the dialog box on click of button:enter image description here

Hope this will help you!

Improve this answer
1
  • My problem is that when I try to add the html button code to the html in my aspx page file, sharepoint designer automatically deletes the "onclick" part. How do I keep it from doing that?
    – josh
    Aug 23, 2017 at 17:14
0

The JavaScript from the other Answer works fine for me, if you're still having trouble there may be another couple of tricks that you may be missing by the sounds of your comments. Firstly, Don't put html code directly into the the content query web part. Instead create a little html file and add it to a folder on your site, then link the content query web part to that file as in the image below (it stops it from automatically modifying the html code).

Linking content editor to html file

Another possible issue is that you also need to make sure that you include the SharePoint JavaScript files. for dialogs specifically you need sp.ui.dialog.js to be on the page. I add these files to the head section of the html file I add to the content query web part.

Header of the html file:

  <head>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="_layouts/15/SP.js"></script> 
        <script type="text/javascript" src="_layouts/15/SP.runtime.js"></script> 
        <script type="text/javascript" src="_layouts/15/sp.ui.dialog.js"></script>
        <script src="/sites/Test/JSOMTest/Javascript Code/TestJS/DialogTest.js" type="text/javascript"></script>
    </head>

Hope this helps

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.