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>
1
  • Forgot to mention - no errors in console...
    – Isa
    Oct 31, 2017 at 23:11

1 Answer 1

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);
                 }
          });
    });
});
5
  • 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, 2017 at 19:27
  • Tested with your edits, however, it is still not working. :(
    – Isa
    Nov 1, 2017 at 20:09
  • Try and put a console log within document.ready and before the click event. Does that work?
    – Tanmay
    Nov 2, 2017 at 4:00
  • Yes, it did execute... Is the problem... with .click()???
    – Isa
    Nov 2, 2017 at 16:53
  • Damn. Can't believe I missed it, use # in the ID. Should wire up the event correctly.
    – Tanmay
    Nov 3, 2017 at 6:03

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.