I'm getting some data from a list via the client object model. After I get the list data, and the page loads, I want to use a little jquery to add a hover effect. Easy enough, right? Well apparently not.

1 -- I know jquery is loaded and working. The #Container div is set to display hidden. If jquery wasn't loaded, it would be hidden on the page and it's not. That said, it doesn't fade in like it's supposed to, but it does work. If I take out the jquery fadeIn line, the other DIV is hidden, so again, that line is loading, and it must be after the client-object script is loading.

2 -- the jquery hover styles do not work. i know the syntax is correct (maybe not best practice but this is just a test).

3 -- I know that 99% of everything is correct here I'm just missing something. If I call the list with SPServices instead of using the client object model, everything renders perfectly, incuding the hover methods. I must be loading something out of order but can't figure it out.

    #container {
        display: none;
    .title-class {
        background-color: blue;
        color: white;
        padding: 10px;
        margin:  5px;
        width:  200px;

<script id="menuTemplate" type="text/x-kendo-template">              
   <div class="title-class">               
  #= title #                                                                      

<script type="text/javascript">
    var context = null,
            web = null,
            currentUser = null,
            menuList = null,

    function getCurrentItems() {

        context = SP.ClientContext.get_current();
        web = context.get_web();

        //GET LIST
        menuList = web.get_lists().getByTitle('Menu');
        var query = SP.CamlQuery.createAllItemsQuery();

        //GRAB ITEMS -- ALL
        menuItems = menuList.getItems(query);

        context.load(menuItems, "Include(Title)");
        context.executeQueryAsync(onSuccess, onFail);

    function onSuccess() {

        var listEnum = menuItems.getEnumerator();
        while (listEnum.moveNext()) {

            var event = listEnum.get_current();

            //GET LIST DATA
            var Title = event.get_item('Title');         


            var menuTemplate = kendo.template($("#menuTemplate").html());
            var currentData = { title: Title };



    function onFail() {

        alert("Request Failed");

    $(document).ready(function () {
        ExecuteOrDelayUntilScriptLoaded(getCurrentItems, "sp.js");
        $('.title-class').animate({"opacity": .7});
        $('.title-class').hover(function () {
            $(this).stop(true).animate({ "opacity": 1 });

        }, function () {
            $(this).stop(true).animate({ "opacity": .7 });



<div id="container">
 <div id="testDiv">

2 Answers 2


Why don't you step through it using the JS debugging tools available in most major browsers (IE, FF, Chrome). That combined with fiddler are the main tools I need to figure out weird things like this.

Off the top of my head, I would move the fadein, animate, and hover code into the onsuccess function at the end.

  • We have a winner! Putting it in the OnSuccess function worked. I guess that makes sense now that I think about it. Good call on the debugging tools.... doh! And thank you.
    – CeeMoney
    May 30, 2012 at 14:30

It could be default js and css overwriting your code. not sure how to overcome this issue.

  • You would think I should be able to call list data, render it, then add jquery to manipulate it. I must have something out of order but am not familiar enough with how the client-object model ordering works. Like I said, if I call everything with SPServices, all is bueno, but in this case I'd rather use what's built into sharepoint if possible.
    – CeeMoney
    May 30, 2012 at 13:23

Your Answer

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

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