Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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>
share|improve this question

2 Answers 2

up vote 5 down vote accepted

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.

share|improve this answer
    
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 '12 at 14:30

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

share|improve this answer
    
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 '12 at 13:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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