javascript - One page app doesn't refresh with Ajax and SQL requests (online only) -
i'm trying build trip organiser. it's 1 page app. there list of trips, activities on 1 side, , google map on other side.
screenshot here : http://hpics.li/fc1b59c
i have 2 main files : 1 called app.js, trigger events forms , click on buttons. or send data travelapi.php, send , retrieve data database. when add trip or activity; empty whole list, retrieve trips , activities again db.
in local environment, works fine. when tried put online, it's mess. sql requests work fine, trips list doesn't update, , don't understand why. actually, list seems refresh, same results, , without trip added. (but trip pushed database) display new trip, need clear google chrome cache.
i tried analyse issue postman extension, seems come client side.
ajax request:
function inserttrip() { $.ajax({ url: 'travelapi.php?call=inserttrip', type: 'post', data: { cityname: $("input[name=cityname]").val(), date: $("input[name=date]").val(), dateupdateplace: $.now() }, success: function() { inittriplist(); } }); }; inittriplist method:
function inittriplist() { $("#triplist").html(''); var listplace = new array(); $.ajax({ type: "get", url: "travelapi.php?call=gettrips", datatype: "json", success: function(data) { (var = 0; < data.length; i++) { if (i === 0) { $("#triplist").append('<div class="trip" data-id="' + data[i].idplace + '"><div class="headingname"><p class="tripname">' + data[i].nameplace + '</p><img class="editnameaction" src="imgs/edit.png" width="30px" alt="edit"></div><div class="editname" style="display:none"><input type="text" name="tripname" value="text edit"><img class="confirmeditname" src="imgs/validate.png" width="30px" alt="valider"></div><p class="tripdate">' + data[i].dateplace + '</p><div class="editdate" style="display:none"><input type="text" name="tripdate" value="text edit"><img class="confirmeditdate" src="imgs/validate.png" width="30px" alt="valider"></div><ul><li data-id="' + data[i].idactivity + '"><a href="#">' + data[i].nameactivity + '</a><img class="deleteactivity" src="imgs/delete.png" style="width: 15px;"></li></ul></div>'); } else { if ($.inarray(data[i].idplace, listplace) != -1) { $('.trip[data-id="' + data[i].idplace + '"] ul').append('<li data-id="' + data[i].idactivity + '"><a href="#">' + data[i].nameactivity + '</a><img class="deleteactivity" src="imgs/delete.png" style="width: 15px;"></li>'); } else { $("#triplist").append('<div class="trip" data-id="' + data[i].idplace + '"><div class="headingname"><p class="tripname">' + data[i].nameplace + '</p><img class="editnameaction" src="imgs/edit.png" width="30px" alt="edit"></div><div class="editname" style="display:none"><input type="text" name="tripname" value="text edit"><img class="confirmeditname" src="imgs/validate.png" width="30px" alt="valider"></div><p class="tripdate">' + data[i].dateplace + '</p><div class="editdate" style="display:none"><input type="text" name="tripdate" value="text edit"><img class="confirmeditdate" src="imgs/validate.png" width="30px" alt="valider"></div><ul><li data-id="' + data[i].idactivity + '"><a href="#">' + data[i].nameactivity + '</a><img class="deleteactivity" src="imgs/delete.png" style="width: 15px;"></li></ul></div>'); } } listplace.push(data[i].idplace); } } }); settimeout(function() { inittriplistsec(); }, 100); };
Comments
Post a Comment