仅在按钮导航到另一页后刷新页面后，才能添加到本地存储

Question

I am developing an app that allows user to search for fishing lakes in their area. To do this they can type in their location which then displays fisheries near them that i have identified in the Json data. The search works perfectly with the code below i have written (i know it maybe a little flaky as i am not the best programmer).

//search
$(document).ready(function(){  
    $('#exampleSearch').keyup(function() {
        var searchVal = $('#exampleSearch').val();
        $('#results').empty();
        console.log(searchVal);
        var results = [];
        $.getJSON("/data/locations.json",function(locations) {
            for (var i = 0; i < locations.length; i++) {
                if (locations[i].location.match(searchVal)) {
                    results.push(locations[i]);
                }
            }

            $.each(results, function(index,result) {
                var $resultsLi = $(
                    '<div class="row">'+
                    '<div class="twelve columns profile-information ">'+
                    '<div class="profile-title">'+
                    '<h6>'+result.name+'</h6>'+
                    '</div> ' +
                    ' <img class= "favourites-pic" src="'+ result.image +'" alt="Fishery">'+
                    '<a class="view" href="'+ result.url + '" >View</a>'+
                    '</div>'+
                    ' </div>'
                )
                $("#results").append($resultsLi); 
            });
        });
    });
});

I have now added a feature where users can now add their search results to their favourites page, by click a Add to favorites button on the page of the fishery they found from their search with the following code:

Javascript:

//Add to Favourites
$(function() {
    $( ".addFavourites" ).on("click", function() {
        try {
            $(this).attr('disabled', true);

            var locIdToAdd = $(this).closest("p").attr("id");

            var myFavouriteLoc=JSON.parse(localStorage.getItem("favLoc"));

            if (myFavouriteLoc == null) {
                myFavouriteLoc = [];
            }

            if (myFavouriteLoc != null) {
                for ( var j = 0; j < myFavouriteLoc.length; j++) {
                    if ( locIdToAdd == myFavouriteLoc[j]) {
                        alert("This property is already in your favourites"); 
                        myFavouriteLoc = [];
                    }
                }
            }

            myFavouriteLoc.push(locIdToAdd);

            localStorage.setItem("favLoc", JSON.stringify(myFavouriteLoc));

        } catch (e) {
            if (e == QUOTA_EXCEEDED_ERR) {
                console.log("Error: Local storage limit exceeds");
            } else {
                console.log("ERROR: Saving to local storge.");
            }
        }
    });
});

Html:

<p id="loc 1">
    <input class="button-primary green addFavourites" type="submit" value="Add to Favourites">
</p>

THE PROBLEM

Upon clicking the 'view' button on the search page results, and navigating to a fishery page. I have a problem where i have to then refresh the page again before the add to favourites button will add anything to the local storage, it is clickable, but nothing happens. once i refresh the page it works fine.

Can anyone help with why i have to refresh the page first? any help is a appreciated :)

Answer 1

Try this jquery code to add favorites, it should work on each click:

$( document ).on("click", ".addFavourites", function(e) {
    e.preventDefault();
    try {
        $(this).attr('disabled', true);

        var locIdToAdd = $(this).closest("p").attr("id");

        var myFavouriteLoc=JSON.parse(localStorage.getItem("favLoc"));

        if (myFavouriteLoc == null) {
            myFavouriteLoc = [];
        }

        if (myFavouriteLoc != null) {
            for ( var j = 0; j < myFavouriteLoc.length; j++) {
                if ( locIdToAdd == myFavouriteLoc[j]) {
                    alert("This property is already in your favourites"); 
                    myFavouriteLoc = [];
                }
            }
        }

        myFavouriteLoc.push(locIdToAdd);

        localStorage.setItem("favLoc", JSON.stringify(myFavouriteLoc));

    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            console.log("Error: Local storage limit exceeds");
        } else {
            console.log("ERROR: Saving to local storge.");
        }
    }
});

Just make sure you are not putting this jquery function inside $(document).ready(function(){}) or $(function(){}) because it is not required

Answer 2

I can't see any code relating to loading the list of favourites, but I think it's fair to assume to that when the page loads you're loading the items from storage and placing them in, and then the pages where you add favourites and view favourites don't involve any loading between them. Therefore, of course, loading the items for the favourites list will only be performed on load, and so placing new items into the localStorage without reloading will not add them. So I'm going to cover a few things.

Firstly, don't use == and != . They perform type coercion, (numbers to strings, strings to numbers, null to undefined , etc.), the rules for which are unintuitive and unmemorable and are best simply avoided, lest they cause difficult to diagnose problems in your code. Use === and !== instead, these behave just like == and != does in other languages. If you want to perform type coercion I'd do so explicitly (eg Number('5') ).

Secondly, and just as a suggestion, if you implement the local storage as an object, you won't need to loop and can simply use property names. So you can replace

if (myFavouriteLoc != null) {
    for ( var j = 0; j < myFavouriteLoc.length; j++) {
        if ( locIdToAdd == myFavouriteLoc[j]) {

With simply

if (myFavouriteLoc && myFavouriteLoc[locIdToAdd]) { 
    // ... 
}

The object && object.property idiom will perform a truthy check on both the object and the property, only passing if they are both truthy (not falsy). Here's a list of falsy values .

So, to answer your actual question. I'd say you have two options:

1. Reload the page on each addition, or
2. AJAXily add the entry to your views when favourites are added. Favourites will then, of course, need be removed

Going with my assumption in the first paragraph, I'd say that the second option is your best bet, as the constant page refreshes would provide a bad user experience.

So here's the jsfiddle

(function bindBtns() {
    $('.Table-btn--add').click(function () {
        addBinding($(this));
    });

    $('.Table-btn--remove').click(function () {
        removeBinding($(this));
    });
})();

Here is an immediately invoked function, meaning it's run straight away. This will bind the existing buttons' behaviour, depending on whether they are add or remove buttons.

function addBinding($btn) {
    $btn.parent()
        .detach()
        .appendTo($('#favourites'));
    // add to local storage here
    modifyAttributes($btn);
}

Here's the behaviour for the binding, fairly straight forward, but:

1. Select the buttons parent, ie the row
2. Detach it from the DOM, ie the current table
3. Attach it to the other table
4. Rebind the button to perform the opposite behaviour, shown below

Place your behaviour for adding or removing from local storage where I've placed the comments.

removeBinding is exactly the same except it appends to the other table.

function modifyAttributes($btn) {
    if ($btn.hasClass('Table-btn--add')) {
        $btn.text('Remove')
            .removeClass('Table-btn--add')
            .addClass('Table-btn--remove')
            .off('click')
            .click(removeBinding.bind(null, $btn));
    } else if ($btn.hasClass('Table-btn--remove')) {
        $btn.text('Add')
            .removeClass('Table-btn--remove')
            .addClass('Table-btn--add')
            .off('click')
            .click(addBinding.bind(null, $btn));
    }
}

1. Split on whether this is an adding button, or a removing button. (The next steps will be for both versions.)
2. Update the text to be the opposite, (add -> remove, remove -> add)
3. Remove the current class
4. Add the new class
5. Remove the old click binding
6. Bind the new click binding. Read about .bind here

In your version you would replace .Table-btn--add with .addFavourites , and place addBinding($(this)) in your try block, and then you can just copy over the other functiona verbatim (I think).

Good luck! Sorry that got so long, and let me know how it goes.