0

On my Web app, users can click a button to see their favorite places. Underneath the list, there is button to enter additional favorites. If they have on favorite, it works fine and I can see the list. If I add a second favorite, it seems as if the AJAX does not execute at all. The click event works because I did console.log outside of ajax. But my list is empty!

I tried $('#favoritePlaces').click(function(e){ too but same result.

HTML and AJAX to view favorites:

<div id="homeMenu" hidden="hidden">
            <div class="pvBtn menuBtn" id="favoritePlaces">Favorite Places</div>
            <div class="pvBtn menuBtn" id="recentPaths">Recent Paths</div>
        </div>
        <div id="favoritesWrapper" hidden="hidden">&nbsp;</div>
        <script>
            var favoritesArray = [];
            $(document).on('click', '#favoritePlaces', function(e){
                $.ajax({
                    url: 'https://pppp/accesspathweb/getfavorites.php',
                    type: 'POST',
                    dataType:"json",
                    data: {
                        acctid: localStorage.getItem('uacctid')
                    },
                    success: function(data){
                        var favoritesString;
                        if(JSON.stringify(data).includes('gf001')){
                            $('#myFavs').prepend('<h2>Enter Your Favorite Places To Quickly Access Them Later</h2>');
                        } else{
                            favoritesString = null;
                            var s = 0;
                            for(var f in data){
                                if(favoritesString == null){
                                    favoritesString = '<div class="favoritesList" id="favorites' + s + '">' + data.name + '</div>';
                                } else{
                                    favoritesString = favoritesString + '<div class="favoritesList" id="favorites' + s + '">' + data.name + '</div>';
                                }
                                favoritesArray.push(data.address);
                                s++;
                            }
                            $('#favoritesWrapper').html(favoritesString);                           document.getElementById('navigationWrapper').setAttribute('hidden', 'hidden');
        document.getElementById('favoritesWrapper').removeAttribute('hidden');
                        }               
                    },
                    error: function(errmsg){
                        console.log(errmsg);
                    },
                    cache: false
                });
                document.getElementById('homeMenu').setAttribute('hidden', 'hidden');
                //$('#myFavs').removeAttr('hidden');
                document.getElementById('myFavs').removeAttribute('hidden');
            });
</script>

Please let me know if you need more info. Thanks!

SinTek Solutions
  • 105
  • 1
  • 1
  • 11
  • Do you have multiple elements with the same `favoritePlaces` id? – Rory McCrossan Mar 21 '19 at 16:40
  • 1
    in your for loop you are accessing `data.name` directly, should that be `f.name`? If it works as is, I'd say the server is only returning 1 place – Trey Mar 21 '19 at 16:42
  • You don't need `if (favoritesString == null)`. Just initialize the variable to an empty string instead of `null`. – Barmar Mar 21 '19 at 16:45
  • If `data` is an array, `data.name` should be `data[f].name`. Also see https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea?lq=1 – Barmar Mar 21 '19 at 16:46
  • These tips are great @Barmar . But it's not hitting `success` or `error` I have `console.log` in both and I get nothing. – SinTek Solutions Mar 21 '19 at 18:46
  • Use the Network tab in the console to see what parameter you're sending in the AJAX request, and what the raw response is. – Barmar Mar 21 '19 at 18:50
  • @Barmar the response is returning the correct two items. – SinTek Solutions Mar 21 '19 at 18:54
  • If it's returning that, then I can't think of any reason why it wouldn't run the success or error function. – Barmar Mar 21 '19 at 18:59
  • @Barmar if I remove `dataType : 'json'` it gets to success. But obviously it returns text not json. Any suggestions? – SinTek Solutions Mar 25 '19 at 21:55
  • You must not be returning valid JSON. Copy the response from the Network tab into jsonlint.com to see what's wrong with it. – Barmar Mar 25 '19 at 23:52

0 Answers0