client object model and jquery not loading -- sort of

Question

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.

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

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

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

    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);

        //ONLY LOAD FIELDS OF INTEREST
        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');         

            //RENDER USING TEMPLATE

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

            $("#testDiv").append(menuTemplate(currentData));

        }
    }

    function onFail() {

        alert("Request Failed");
    }

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

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

        });
    });

</script>

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

Steve Lineberry · Accepted Answer · 2012-05-30 14:27:40Z

5

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.

answered May 30, 2012 at 14:27

Steve Lineberry

7,95024 silver badges24 bronze badges

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
– CeeMoney

2012-05-30 14:30:21 +00:00
Commented May 30, 2012 at 14:30

Add a comment |

Maria Burton · Accepted Answer · 2012-05-30 13:16:12Z

0

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

answered May 30, 2012 at 13:16

Maria Burton

1,2425 gold badges26 silver badges41 bronze badges

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
– CeeMoney

2012-05-30 13:23:43 +00:00
Commented May 30, 2012 at 13:23

Add a comment |

Stack Exchange Network

client object model and jquery not loading -- sort of

2 Answers 2

Your Answer

Hot Network Questions

client object model and jquery not loading -- sort of

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions