In my web application, users have the ability to create and view interactive stories...
One of the features allows them to change the background image by uploading a new image file. The file path of the uploaded image is stored within a javascript object and then posted as JSON to a MongoDB database.
When I replace the uploaded image with a new one and save it using the app, everything works perfectly.
However, when I retrieve the JSON data from the database and try to use the stored URL later on, it reverts back to the old image instead of displaying the updated one...
This snippet of code is responsible for saving the story...
function saveStory(){
var numPages = $('.page').length;
var book = {};
$.getJSON('../scripts/getUser.php').done(function(data){
book.title = title;
book.user = data._id.$id;
book.pages = [];
var page;
var link;
for (var i = 0; i < numPages; i++){
var numLinks = $('#p' + i + ' .link').length;
page = {};
page.text = $('#p'+i+' .textarea').text();
page.image = $('#p'+i).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
page.links = [];
for (var j = 0; j < numLinks; j++){
link = {};
link.text = $('#p'+i+'l'+j+' .linktext').text();
link.locale = $('#p'+i+'l'+j+' .locale').text();
page.links.push(link);
}
book.pages.push(page);
}
}).then(function(){ $.post('../scripts/addstory.php', {book: book})});
}
This piece of code handles opening the story...
function openStory(){
var story = $('#thestory').text();
$.post('../scripts/getstory.php', {story: story}, function(book){
var numPages = book.pages.length;
for (var i = 0; i < numPages; i++){
var numLinks = book.pages[i].links.length;
$('#content').append("<div id='p"+ i +"' class='page'><div class='textarea' contentEditable='true'>" + book.pages[i].text + "</div></div>");
$('#p'+i).css('background-image', 'url(' + book.pages[i].image.replace(/^url\(["']?/, '').replace(/["']?\)$/, '') + ')');
for (var j = 0; j < numLinks; j++){
$('#p' + i).append("<div id='p"+ i +"l"+ j +"' class='link'><div class='linktext' contentEditable='true'>"+ book.pages[i].links[j].text +"</div><div class='locale' contentEditable='true'>"+ book.pages[i].links[j].locale +"</div></div>");
}
}
}, 'json');
}
I confirmed that the correct URL was being saved in the JSON data.
After saving the story and refreshing the page, the openStory() function is called and the image URL reverts back to the old one!
The confusing part is that the URL value in the database has been updated, yet it somehow retrieves the old value.
Does anyone have a solution for this issue?