4

I have added JSOM/js code using Content Editor to a SharePoint page. The js code is retrieving list items and binding it to a ul and divs. And the ul forms the jQuery tabs. But my problem here is tabs functionality is not working i.e li onclick event is not triggered at all. I am not sure what I am missing. Below code is just a skeleton of actual code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

ExecuteOrDelayUntilScriptLoaded(getItems, "sp.js");

function getItems() {
//Get list items and onSuccess bind to ul
}
    $("ul.tabs li").click(function(){  
        // Switch between tabs
    });
});
</script>

Update: Sorry for not providing full code here.Anyway when the getItems and switch tabs functions are separately been used they are working with no issues, and I already have them in other pages. but here in this page SharePoint is not loading click method. As some answers suggested, i have already tried on('click'... before posting question here.

  • Can you add the full script, if possible? – Denis Molodtsov Sep 24 '17 at 0:37
  • Can you please check if the page has Script disabled?? – John Zachariah Sep 24 '17 at 2:11
  • @john - I don't think script is disabled because it's working first time. – Ahmed Sep 25 '17 at 5:59
  • 1
    @Ahmed I would suggest to load the page in chrome and wait for the items to display as ul li. Then in console paste that $("ul.tabs li").click(function(){ console.log("click is fired"); }); and hit enter. Now see if click event is firing. Also make sure the tabs class exists on ul. – Ahmad Zia Sep 26 '17 at 3:51
  • 1
    @Ahmed Good to hear, there seems to be a timing issue between rendering the ul li elements and event registering. After creating the ul li elements dynamically, call a method and with in that method register the click event on ul li. See if that works. – Ahmad Zia Sep 26 '17 at 4:59
4

Try the following click event code instead of above one.

//Dynamic element click event

$(document).on('click', 'ul.tabs li', function() {
    // Do something on an existent or future .dynamicElement
});

Hope this helps to you..

  • I have exactly tried the same thing.but no luck :( – Ahmed Sep 25 '17 at 7:50
  • ok, you are adding only <li> elements dyanamically or <ul> also? – Nagababu Annamdasu Sep 25 '17 at 10:24
  • @Ahmed, can you, please, add the whole script to your question? – Denis Molodtsov Sep 25 '17 at 11:22
  • @Denis - Sorry that I can't add my code here.. .. li click method is not working otherwise works fine.. this is almost similar case sharepoint.stackexchange.com/questions/214783/… – Ahmed Sep 25 '17 at 11:35
  • @Nagababu - i am creating complete ul dynamically.. – Ahmed Sep 25 '17 at 11:36
3

Don't know the exact reason why following code doesn't work sometime with SharePoint.

$("ul.tabs li").click(function(){  
   // Switch between tabs
});

But using the code as given follow always worked for me:

$("ul.tabs li").on('click',function(){  
   // Switch between tabs
});

Updates:

Based on your edited question, here I am sharing my approach how I got this worked in past.

Following is just a code snippet, its only to give you the basic idea. Your code may differ from mine.

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(getItems, "sp.js");
});

function getItems() {

    getItemsFromList(function (data) {

        // Iterate here, When the iteration ends, bind the click events
        for (var i = 0; i < data.d.results.length; i++) {
            // Prepare the Tabs structure here

            // wait for the last item in data
            if (i == data.d.results.length - 1) {
                // Apend the tab struture to main div/element

                // Associate the click event here
                $("ul.tabs li").on('click', function () {
                    // Switch between tabs
                });
            }
        }
    },
        function (data) {
            console.log('Error');
        });
}

function getItemsFromList(success, failue) {
    $.ajax({
        url: "AJAX CALL URL",
        type: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data)
        },
        error: function (data) {
            failure(data)
        }
    });
}

Using this I got the working output. I made the same mistake, I was binding the event before the element get attached to DOM.

So I designed the code in above format, so first it will attach the element to DOM and later on it will bind the click event.

Let me know if you need any help in code.

  • I have already tried this workaround but no luck :( – Ahmed Sep 25 '17 at 16:00
2

Thank you all for your answers and help. With help of Ahmed Zia's comments I found solution to my problem. As the complete ul is getting formed dynamically, and the page is unable to find the click event later. So I changed my code like below so that the click event will be registered after the ul got created and bound to div (tabsContainerDiv_id) of a page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

ExecuteOrDelayUntilScriptLoaded(getItems, "sp.js");

function getItems() {
//Get list items and onSuccess bind to ul

registerEvents();
}

function registerEvents(){
    $('#tabsContainerDiv_id').on('click',' ul.tabs li', function(){  
        // Switch between tabs
    });
}
});
</script>
0

Please view if there is any error reported in console of developer tools after you click the tabs second time. Looks like getItems() is having some issue on second load or some required scripts are not loading Error message in console will surely help in narrowing the issue. Please post the error here if any.

  • No errors in the console and breakpoint at click method is not triggering, second time. – Ahmed Sep 25 '17 at 6:03
0

Please refer this link

Maybe the classes which need to be added or removed may not be mentioned in CSS.

  • Tabs functionality is working fine in other simple page. – Ahmed Sep 25 '17 at 6:57

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.