1

I was following the instructions from the article below, but despite my efforts, I cannot get it to work. For some reason, jQuery functions are still not working. Any suggestions?

Article that described a similar problem, but did not solve my problem ( Why does jquery's document.ready not fire? )

A code sample that is attached through CEWP (Content Editor Webpart):

    <!--Adding some buttons for testing purposes-->
<div>
    <p id="viewpane"></p>

    <input type="button" value="Test Execute" onclick="Test()">
    <input type="button" value="WeWa Together" id="wewa">
    <input type="button" id = "btn1" value="jQuery doesnt work" title="Filter">
</div>

<script type="text/javascript" src="___ERASED___/SiteAssets/JQuery321.min.js">
</script>

<script type="text/javascript">
    // Test # 1 =  Boring~
    function Test() {
        alert('Hello World');
    }

    // Test # 2 = Vanilla event listener
    var weWa = document.getElementById('wewa');
    weWa.addEventListener('click', function() {
        alert('Sup?');
    }, false);

    // Test # 3 = jQuery approach test
    jQuery.noConflict(); //This was captured through breakpoints, which probably executed, but it did not get into $(document).ready(); for sure

    jQuery(document).ready(function(){
        jQuery("btn1").click(function(){
            alert('Hi girl!'); // Hi girl never displayed

            var siteurl = _spPageContextInfo.webAbsoluteUrl;
            jQuery.ajax({
                       url: siteurl + "/_api/web/lists/getbytitle('SampleData')/items",
                       method: "GET",
                       headers: { "Accept": "application/json; odata=verbose" },
                       success: function (data) {
                            if (data.d.results.length > 0 ) {
                                 //This section can be used to iterate through data and show it on screen
                                 alert('Hello');
                            }       
                      },
                      error: function (data) {
                          alert("Error: "+ data);
                     }
              });
        });
    });

    //-----------------------------------------------------------------------------
    // Output Functions
    //
    // Function Name            = WriteView
    // Function Purpose         = Display incremental message to dashboard

    function WriteView(logExecution) {
        var tempView = document.getElementById("viewpane");
        if (typeof tempView != 'undefined') {
            tempView.innerHTML = logExecution + "</br>" + tempView.innerHTML;
        } else {
            tempView.innerHTML = logExecution;
        }
    }

</script>
  • Forgot to mention - no errors in console... – Isa Oct 31 '17 at 23:11
0

Try this bit out. The change is in $ and jQuery. Check out the way it is supposed to be used here (2nd Code block)

Also, good to check if you reallly need $.noConflict() If $ is not being used elsewhere then it probably is a good idea to remove this.

$.noConflict(); //This was captured through breakpoints, which probably executed, but it did not get into $(document).ready(); for sure

jQuery(document).ready(function(){
// Code that uses jQuery's $ can follow here.
    $("#btn1").click(function(){
        alert('Hi girl!'); // Hi girl never displayed

        var siteurl = _spPageContextInfo.webAbsoluteUrl;
        $.ajax({
                   url: siteurl + "/_api/web/lists/getbytitle('SampleData')/items",
                   method: "GET",
                   headers: { "Accept": "application/json; odata=verbose" },
                   success: function (data) {
                        if (data.d.results.length > 0 ) {
                             //This section can be used to iterate through data and show it on screen
                             alert('Hello');
                        }       
                  },
                  error: function (data) {
                      alert("Error: "+ data);
                 }
          });
    });
});
| improve this answer | |
  • I did jQuery instead of $ because $ didn't seem to work. I was following the recommendations here: stephanrocks.com/2011/10/05/… – Isa Nov 1 '17 at 19:27
  • Tested with your edits, however, it is still not working. :( – Isa Nov 1 '17 at 20:09
  • Try and put a console log within document.ready and before the click event. Does that work? – Tanmay Nov 2 '17 at 4:00
  • Yes, it did execute... Is the problem... with .click()??? – Isa Nov 2 '17 at 16:53
  • Damn. Can't believe I missed it, use # in the ID. Should wire up the event correctly. – Tanmay Nov 3 '17 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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