0

What I want is to display up to three buttons in the footer. I have a series of elements so I don't want to display the previous button when I'm at the first element and the next button when I'm at the last element.

But I can't get it to work properly. All the content displays just fine but when you arrive at an entrypage (you choose an element from the overview), you don't get the navigation, but when the page is manually refreshed it shows up fine.

I've tried to debug it and when I remove the if (entryId == nav.objId) statement the navigation is displayed - the wrong items are displayed but at least I don't need to refresh to see the overview-button.

You can see the code in action at http://kraen-ub-testen.dev.redia.dk/#overview

I have the following code to display the navigation:

$.each(navigation, function(i,nav) {
    var navArrLength = navigation.length;
    var index = nav.index;

    if (entryId == nav.objId) {
        var navLinks = "<div data-role=\"navbar\" class=\"ui-navbar ui-mini\" role=\"navigation\"><ul class=\"ui-grid-b\">";

        if (index >= navArrLength-1) {
            var prevEntry = navigation[index-1].objId;
            navLinks += "<li><a href=\"#entry?entryId=" + prevEntry + "\" data-icon=\"arrow-l\" data-transition=\"slide\">Næste</a></li>";
        }else{
            navLinks += "<li></li>";
        }

        navLinks += "<li><a href=\"#overview\" data-icon=\"grid\" data-transition=\"slideup\">Se alle</a></li>";

        if (index < navArrLength-1) {
        var nextEntry = navigation[index+1].objId;
        navLinks += "<li><a href=\"#entry?entryId=" + nextEntry + "\" data-icon=\"arrow-r\" data-transition=\"slide\">Næste</a></li>";
    }else{
        navLinks += "<li></li>";
    }

    navLinks += "</ul></div>";

    $navigation.html(navLinks).trigger('create');
    }
});
4

1 に答える 1

0

I have debug through your code and i have found out that you have space at the end in you entry, this is what i get in your objects as below:

nav.objId: "5020d6a3efd1cf3a5f000012"
entryId: "5020d6a3efd1cf3a5f000012 "
entryId == nav.objId: false

this is why it would fail now solution here is that as below

use this $.trim(entryId) == $.trim(nav.objId): true

so I have changed it to your code as below:

$.each(navigation, function(i,nav) {
    var navArrLength = navigation.length;
    var index = nav.index;

    if ($.trim(entryId) == $.trim(nav.objId)) {
        var navLinks = "<div data-role=\"navbar\" class=\"ui-navbar ui-mini\" role=\"navigation\"><ul class=\"ui-grid-b\">";

        if (index >= navArrLength-1) {
            var prevEntry = navigation[index-1].objId;
            navLinks += "<li><a href=\"#entry?entryId=" + prevEntry + "\" data-icon=\"arrow-l\" data-transition=\"slide\">Næste</a></li>";
        }else{
            navLinks += "<li></li>";
        }

        navLinks += "<li><a href=\"#overview\" data-icon=\"grid\" data-transition=\"slideup\">Se alle</a></li>";

        if (index < navArrLength-1) {
        var nextEntry = navigation[index+1].objId;
        navLinks += "<li><a href=\"#entry?entryId=" + nextEntry + "\" data-icon=\"arrow-r\" data-transition=\"slide\">Næste</a></li>";
    }else{
        navLinks += "<li></li>";
    }

    navLinks += "</ul></div>";

    $navigation.html(navLinks).trigger('create');
    }
});

I hope this would help,

于 2012-08-09T12:56:43.263 に答える