Resting Model and collection on every click before fetch - backbone.js

Question

Hi i have been working on app where onclick of the image you can add pin on the image anywhere and store its name and details. All work fine like i can add details and save it and it get saved into the database. But if you go back to another link and come back on the same. It shows the older stuff instead of the saved one in database.
I tried resetting and removing the model and collection but it doesnt work. Also tried destroying the model but it shows up errr as
Object function (){ return parent.apply(this, arguments); } has no method 'reset'
Below is my code :
/*MLP Backbone Starts Here*/
var MLPImage = Backbone.Model.extend({
});
var MLPImages = Backbone.Collection.extend({
model : MLPImage,
url: jQuery('#baseurl').val()+'index.php/api/example/scmlps/',
initialize : function(){
/*if(MLPImage.destroy()){
console.log("destroyed")
}else{
console.log("not destroyed")
}*/
this.deleteTask();
console.log(this)
this.on("reset", this.loadMLPImagesView,this);
this.on("pushpindata", this.pushpindetailsview,this);
this.on("error", this.errorMLPImageMessage,this);
this.on("mlperror", this.errorMLPpushpin,this);
console.log(this)
},
deleteTask: function() {
that = this;
this.model.reset();
this.model.destroy({
success: function() {
console.log(that.parent.collection);
}
});
return false;
},
loadMLPImagesView : function(){
// console.log(this);
//console.log(this.CollView.$el);
if(!this.CollView){
this.CollView = new MLPImagesView({collection:this})
}
this.CollView.render();
},
errorMLPImageMessage : function(){
jQuery('#imageBlocksDiv').html('<span id="noMsg"><h4>No images to display.</h4></span>');
},
pushpindetailsview : function(){
if(!this.pushpinview){
this.pushpinview = new pushpindetailsViews({collection:this})
}
this.pushpinview.render();
},
errorMLPImageMessage : function(){
jQuery('#clickable').append('<span id="noMsg"><h4>No images to display.</h4></span>');
}
});
var MLPImagesView = Backbone.View.extend({
el : jQuery('#imageBlocksDiv'),
events : {
'click .middle-box-title' : 'setsavevisisble',
'click .box-comment' : 'setsavevisisble',
'click .imagepopup' : 'mlppopupimage',
'click #closeme' : 'closepopup',
'click #closesave' : 'closepindetails',
'click #details' : 'savepushpindetails',
'click #closeupdate' : 'closeupdatepushpin',
'click .ui-draggable-mlp': 'passpushpindobjid',
'dragenter img.ui-draggable-mlp' : 'alertMe',
},
alertMe: function (e) {
jQuery(e.currentTarget).draggable({ containment: "parent" });
jQuery(e.currentTarget).mouseup(function(){
var x = jQuery(this).css("left");
var x_myarr = x.split("px");
var x_val = x_myarr[0];
var y = jQuery(this).css("top");
var y_myarr = y.split("px");
var y_val = y_myarr[0];
//console.log(jQuery(this).attr('data-objectid'))
objid = jQuery(this).attr('data-objectid');
var inputData = {
'total_img_des' : jQuery('#clickable').html(),
'x_val' : x_val,
'y_val' : y_val,
'id' : objid
};
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlpspushpins/',
'data' : inputData,
success : function(response){
//console.log(response)
}
});
});
},
setsavevisisble : function(ev){
jQuery(jQuery(ev.currentTarget).parents().eq(1).find('#saveGallery')).css('display','block');
},
closepindetails : function(){
jQuery('.close').show();
jQuery('#title').val('');
jQuery('#description').val('');
jQuery('.pinDetails').hide();
jQuery('.popupmlp').find('.ui-draggable-mlp').last().remove();
},
closeupdatepushpin : function(){
jQuery('.close').show();
jQuery('.updatepin').hide();
},
passpushpindobjid : function(ev){
var that = this;
var leftval = jQuery(ev.currentTarget).css('left');
var topval = jQuery(ev.currentTarget).css('top');
jQuery(ev.currentTarget).parents().eq(0).append("<img id='pushpin_loader' style='position:absolute;left:"+leftval+";top:"+topval+";' src='http://www.dwellar.com/portal/assets/icon/dots.gif' />");
jQuery('.updatepin').remove();
jQuery('#updatetitle').val('');
jQuery('#updatedescription').html('');
var img_id = jQuery(ev.currentTarget).attr('data-objectid'); //console.log(img_id)
that.retrivepushpindetails(img_id);
},
savepushpindetails : function(ev){
var popup_id = jQuery('.pinDetails').attr('data-popupid');
jQuery('#popup'+popup_id).find('#btn').html("<img style='float:right;margin: 15px 5px;' src='http://www.dwellar.com/portal/assets/icon/dots.gif' />");
var x = jQuery('.popupmlp img[data-uniqueid="'+popup_id+'"]').css("left");
var x_myarr = x.split("px");
var x_val = x_myarr[0];
var y = jQuery('.popupmlp img[data-uniqueid="'+popup_id+'"]').css("top");
var y_myarr = y.split("px");
var y_val = y_myarr[0];
var inputData = {
'description': jQuery('#description').val(),
'title': jQuery('#title').val(),
'imageid' : jQuery('#hideobjid').val(),
'projectId' : jQuery('#ugallerymlp').val(),
'total_img_des' : jQuery('#clickable').html(),
'pushpin_number' : popup_id,
'x_val' : x_val,
'y_val' : y_val,
'canvas_height' : jQuery('#clickable').height(),
'canvas_width' : jQuery('#clickable').width()
};
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlpspushpins/',
'data' : inputData,
success : function(response){
jQuery('.popupmlp img[data-uniqueid="'+popup_id+'"]').attr('data-objectid',response.objectId);
/*var inputData = {
'total_img_des' : jQuery('#clickable').html(),
'id' : response.objectId
};
jQuery.ajax({
'type':'POST',
'url': 'http://www.dwellar.com/portal/index.php/api/example/scmlpspushpins/',
'data' : inputData,
success : function(response){
}
});*/
alert("Saved");
jQuery('#popup'+popup_id).find('#btn').html('<input type="button" name="details" value="Save Detail" id="details">');
jQuery('#title').val('');
jQuery('#description').val('');
jQuery('.pinDetails').hide();
jQuery('.close').show();
}
});
},
mlppopupimage : function(ev){
var that = this;
jQuery("#clickable").html('');
jQuery('#mlpimagepopup').remove();
jQuery('#imageBlocksDiv').append('<div id="mlpimagepopup"></div>');
jQuery('#mlpimagepopup').append('<div class="pinDetails"><div id="closesave"><img src="http://www.dwellar.com/portal/assets/images/closenew.png"></div><table style="float:left; width:100%;"><tbody><tr><td style="height: 40px;"><span>Title :</span></td><td><span><input type="text" name="title" id="title" class="title" style="width: 162;"></span></td></tr><tr><td style="padding-top: 6%;height: 40px;"><span style="vertical-align: top;">Description :</span></td><td><span><textarea name="description" id="description" class="description" style="width: 98%;"></textarea></span></td></tr><tr><td id="btn" colspan="3"><input type="button" name="details" value="Save Detail" id="details"></td></tr></tbody></table></div>');
var hidval = jQuery(ev.currentTarget).parents().eq(1).find('img').attr('id');
var imgurl = jQuery(ev.currentTarget).parents().eq(1).find('img').attr('src'); //console.log(imgurl)
jQuery.ajax({
'type':'GET',
'url': jQuery('#baseurl').val()+'index.php/api/authentication/randomdata/scpushpin_details/imageid/'+hidval,
success : function(response){
//console.log(response.length)
for(var i = 0; i<response.length; i++){
jQuery('#clickable').append('<img src="http://www.elementalcrafts.com/dwellarportal/images/location.png" style="position:absolute;height:35px;width:22px;left:'+response[i].x_val+';top:'+response[i].y_val+'" data-objectid="'+response[i].objectId+'" class="ui-draggable-mlp" title="'+response[i].title+'"data-uniqueid ="'+response[i].pushpin_number+'">');
}
}
});
jQuery('#mask').show();
jQuery('#mlpimagepopup').show();
jQuery('#mlpimagepopup').append('<input type="hidden" value="'+hidval+'" id="hideobjid"><div class="close" id="closeme" style="margin: -14px -8px 0px 0px;font-size: 30px;"><img src="http://www.dwellar.com/portal/assets/images/closenew.png"></div><div style="margin:7px;" class="popupmlp" id="clickable"><img src="'+imgurl+'"></div>');
//jQuery('#clickable').append('<div></div>');
jQuery('.popupmlp').bind('click', function (ev) {
jQuery('.close').hide();
jQuery('.ui-draggable-mlp').each(function(){
var pinval = jQuery(this).attr('data-objectid');
if(typeof pinval == 'undefined'){
var pi = jQuery(this).attr('data-uniqueid');
jQuery('img[data-uniqueid="'+pi+'"]').remove();
}
});
var divId = document.getElementById("clickable");
var divChild = jQuery('.popupmlp img').length;
var currentElemId= divChild+1;
var jQuerydiv = jQuery(ev.target);
var offset = jQuerydiv.offset();
var x = ev.clientX - offset.left ; //console.log(x)
var y = ev.clientY - offset.top ;
var xfloor = Math.floor(x);
var yfloor = Math.floor(y);
var scrollval = jQuery('.scrollval').last().attr('value'); //console.log(scrollval)
if(scrollval){}
else{
var scrollval = "0";
}
var nsv = Number(+yfloor + +scrollval); //console.log(nsv);
var pinImgElement= jQuery('<img class="ui-draggable-mlp">'); //console.log(pinImgElement);
pinImgElement.appendTo(jQuery(this));
pinImgElement.css({left:xfloor,top:nsv-25,'position':'absolute','width':'22px'}).attr('src','http://www.elementalcrafts.com/dwellarportal/images/location.png');
//pinImgElement.booklet( {keyboard: true} );
pinImgElement.draggable({ containment: "parent"});
pinImgElement.attr('data-uniqueid',currentElemId);
jQuery('.pinDetails').show();
jQuery('.pinDetails').attr('id','popup'+currentElemId);
jQuery('.pinDetails').attr('data-popupid',currentElemId);
jQuery('.updatepin').remove();
jQuery('#title').focus();
pinImgElement.on('click',function(){
var img_id = jQuery(this).attr('data-objectid');
that.retrivepushpindetails(img_id);
});
});
},
retrivepushpindetails : function(img_id){
jQuery('.pinDetails').hide();
jQuery('.ui-draggable-mlp').each(function(){
var pinval = jQuery(this).attr('data-objectid'); //console.log(pinval)
if(typeof pinval === 'undefined'){
var pi = jQuery(this).attr('data-uniqueid');
jQuery('img[data-uniqueid="'+pi+'"]').remove();
}
});
var that = this;
this.collection.fetch({data: jQuery.param({'objectid':img_id}), success:function(resp){
// console.log(resp)
that.collection.trigger("pushpindata");
},
error : function(){
//that.collection.trigger("mlperror");
}
});
},
closepopup : function(){
jQuery('#mask').fadeOut(100);
jQuery('#mlpimagepopup').fadeOut(500);
new pushpindetailsViews().cleanup();
},
initialize : function(){
var that = this;
jQuery('#ugallerymlp').change(function(){
that.filterByProjectsMLPImage(jQuery('#ugallerymlp').val());
});
},
render : function(){
this.iterateMsg();
},
iterateMsg : function(){
var that = this;
jQuery('#imageBlocksDiv').html('');
_.each(this.collection.models, function (msg) {
that.renderMsg(msg)
//console.log(msg)
});
pinterest();
},
renderMsg : function(msg){
var mV = new MLPImageView({
model : msg
});
this.$el.append(mV.render().el);
},
filterByProjectsMLPImage : function(projectId){//alert('thius');
var that = this;
var projectId = jQuery('#ugallerymlp').val();
//console.log(projectId,this.collection)
this.collection.fetch({data: jQuery.param({'projectId': projectId}), success:function(resp){
//console.log(resp)
that.collection.trigger("reset");
},
error : function(){
that.collection.trigger("error");
}
});
},
cleanup: function() {
//this.undelegateEvents();
$(this.el).find('#mlpimagepopup').empty();
//jQuery(this.el).find('#mlpimagepopup').empty();
}
});
var pushpindetailsViews = Backbone.View.extend({
el : jQuery('#mlppushpindetails'),
render : function(){
var that = this;
_.each(this.collection.models, function (pusmsg) {
that.pushpinMsg(pusmsg);
//console.log(pusmsg)
});
},
pushpinMsg : function(pusmsg){
var pmV = new mlppushpindetails({
model : pusmsg
});
this.$el.append(pmV.render().el);
},
cleanup: function() {
this.undelegateEvents();
$(this.el).empty();
}
});
var mlppushpindetails = Backbone.View.extend({
template : jQuery('#pushpindetails').html(),
events : {
'click #updatepushpin': 'passpushpindtails',
'click #deletepushpin': 'passpushpindtails',
'click #closeupdate' : 'closeupdatepopup',
},
render : function(){
//jQuery('#pushpinmlpdetails').html('');
jQuery('#pushpin_loader').remove();
_.bindAll(this,'updatepushpindetails')
var tmpl = _.template(this.template);
this.$el.html(tmpl(this.model.toJSON()));
//console.log(this.el);
return this;
},
closeupdatepopup: function(){
jQuery('.close').show();
jQuery('.updatepin').parents().eq(0).remove();
jQuery('.updatetitle').val('');
jQuery('.updatedescription').html('');
},
passpushpindtails:function(ev){
var selectedButton = jQuery(ev.currentTarget).attr('id');
var title= jQuery('.updatetitle').val();
var description = jQuery('.updatedescription').val();
var objId = jQuery('#hideval').val();
//console.log(selectedButton,objId)
selectedButton == 'updatepushpin' ? this.updatepushpindetails(objId,title,description): this.deletepushpindetails(objId);
//jQuery(jQuery(ev.currentTarget).parents().eq(1).find('#saveGallery')).css('display','none');
//jQuery('#updatepin').html("<img style='float:right;margin:5px 15px;' src='http://www.dwellar.com/portal/assets/icon/dots.gif' />")
return false;
},
updatepushpindetails : function(objId,title,description){
jQuery('#updatepushpin').parents().eq(0).html("<img style='float:right;margin: 15px 5px;' src='http://www.dwellar.com/portal/assets/icon/dots.gif' />")
var inputData = {
'title': title,
'description': description,
'id' : objId
};
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlpspushpins/',
'data' : inputData,
success : function(response){
alert('updated');
jQuery('.close').show();
jQuery('#updatetitle').html('');
jQuery('#updatedescription').html('');
jQuery('.updatepin').parents().eq(0).remove();
jQuery('#updatepushpin').parents().eq(0).html('<input type="button" name="Update" id="updatepushpin" class="updatepushpin" value="Update">')
}
});
},
deletepushpindetails : function(objId){
var r=confirm("Want to delete!")
if (r==true)
{
jQuery('#deletepushpin').parents().eq(0).html("<img style='float:right;margin: 15px 5px;' src='http://www.dwellar.com/portal/assets/icon/dots.gif' />")
if(typeof objId!='undefined'){
var inputData = {
'id' : objId
}
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlpspushpin/',
'data' : inputData,
success : function(response){
alert("Delete Pushpin")
//console.log(jQuery('#clickable').html(),jQuery('#currentimageid').val())
/*var inputData = {
'total_img_des' : jQuery('#clickable').html(),
'id' : jQuery('#currentobjid').val()
};
jQuery.ajax({
'type':'POST',
'url': 'http://www.dwellar.com/portal/index.php/api/example/scmlpspushpins/',
'data' : inputData,
success : function(response){
console.log(response)
}
});*/
jQuery('.updatepin').parents().eq(0).remove();
jQuery('.updatetitle').html('');
jQuery('.updatedescription').html('');
jQuery('.popupmlp img[data-objectid="'+objId+'"]').last().remove()
jQuery('.close').show();
jQuery('#deletepushpin').parents().eq(0).html('<input type="button" name="Delete" id="deletepushpin" class="deletepushpin" value="Delete">')
}
});
}
}
}
});
var MLPImageView = Backbone.View.extend({
className : "block",
initialize: function(){
var that = this;
jQuery('.inner-middle').mouseover(function(ev) {
jQuery(this).find('.editbutton').show();
}).mouseout(function(ev) {
jQuery(this).find('.editbutton').hide();
});
jQuery('.closedialog').click(function(){
jQuery('#dialog').fadeOut(1000);
});
},
template : jQuery('#mlpimagesBlock').html(),
events : {
'click #saveGallery': 'passImageDetails',
'click #deleteGallery': 'passImageDetails',
'click #sethome' : 'setashome',
'click .editbutton' : 'enableediting',
'click .box-comment' : 'enableediting',
'click .middle-box-title' : 'enableediting',
'click #cancelgallery' : 'cancelgallery',
},
enableediting : function(ev){
new galleryimageuploader(jQuery(ev.currentTarget).parents().eq(1).find('img').attr('id'))
var selectedButton = jQuery(ev.currentTarget).attr('class'); //console.log(selectedButton)
jQuery(ev.currentTarget).append('<input type="hidden" id="oldtitleval" value="'+jQuery(ev.currentTarget).parents().eq(1).find('#middle-box-title').text()+'"><input type="hidden" id="olddescriptoinval" value="'+jQuery(ev.currentTarget).parents().eq(1).find('#box-comment').text()+'"><input type="hidden" id="oldimagesrc" value="'+jQuery(ev.currentTarget).parents().eq(1).find('img').attr('src')+'">');
jQuery('.editbutton').hide();
jQuery('.editbutton').attr('class','ch-inner');
jQuery('.box-comment').prop("contentEditable", false);
jQuery('.middle-box-title').prop("contentEditable", false);
jQuery('.box-comment').attr('class','changebox');
jQuery('.middle-box-title').attr('class','changetitle');
jQuery('.imagepopup').attr('class','changeimgstyle');
if(selectedButton == "box-comment" || selectedButton == "galleryimgstyle"){
jQuery(ev.currentTarget).parents().eq(2).find('.editbutton').hide();
jQuery(ev.currentTarget).parents().eq(2).find('.metadata').css('visibility','visible');
jQuery(ev.currentTarget).parents().eq(2).find('.changebox').css('z-index','9999');
jQuery(ev.currentTarget).parents().eq(2).find('.changetitle').css('border','1px solid red');
jQuery(ev.currentTarget).parents().eq(2).find('.changetitle').prop("contentEditable", true);
jQuery(ev.currentTarget).parents().eq(2).find('.changebox').css('border','1px solid red');
jQuery(ev.currentTarget).parents().eq(2).find('.changebox').prop("contentEditable", true);
jQuery(ev.currentTarget).parents().eq(2).find('.changeimgstyle').css("opacity", "0.4");
jQuery(ev.currentTarget).parents().eq(2).find('.gallerybox').show();
}
else{
jQuery(ev.currentTarget).parents().eq(1).find('.metadata').css('visibility','visible');
jQuery(ev.currentTarget).parents().eq(1).find('.changebox').css('z-index','9999');
jQuery(ev.currentTarget).parents().eq(1).find('.changetitle').css('border','1px solid red');
jQuery(ev.currentTarget).parents().eq(1).find('.changebox').css('border','1px solid red');
jQuery(ev.currentTarget).parents().eq(1).find('.changebox').prop("contentEditable", true);
jQuery(ev.currentTarget).parents().eq(1).find('.changetitle').prop("contentEditable", true);
jQuery(ev.currentTarget).parents().eq(1).find('.changeimgstyle').css("opacity", "0.3");
jQuery(ev.currentTarget).parents().eq(1).find('.gallerybox').show();
}
return false;
},
render : function(){
_.bindAll(this,'saveImageDetails')
var tmpl = _.template(this.template);
this.$el.html(tmpl(this.model.toJSON()));
return this;
},
passImageDetails:function(ev){
var selectedButton = jQuery(ev.currentTarget).attr('id');
var imgTitle= jQuery(ev.currentTarget).parents().eq(1).find('#middle-box-title').text(); //console.log(imgTitle)
var imgDescription = jQuery(ev.currentTarget).parents().eq(1).find('#box-comment').text();
var imageUrl = jQuery(ev.currentTarget).parents().eq(1).find('img').attr('src');
var spl = imageUrl.substring(imageUrl.lastIndexOf('/')).split('/'); //console.log(spl[1])
var objId = jQuery(ev.currentTarget).parents().eq(1).find('img').attr('id');
//console.log(selectedButton,objId,imgTitle,imgDescription)
selectedButton == 'saveGallery' ? this.saveImageDetails(objId,imgTitle,imgDescription,imageUrl,ev): this.deleteImage(objId,spl[1],ev);
jQuery(jQuery(ev.currentTarget).parents().eq(1).find('.metadata')).html("<img style='float:right' src='http://www.dwellar.com/portal/assets/icon/dots.gif' />").css('height','28px');
return false;
},
saveImageDetails : function(objId,imgTitle,imgDescription,imageUrl,sethomeid){
var inputData = {
'name': imgTitle,
'description': imgDescription,
'image_url' : imageUrl,
'projectId' : jQuery('#ugallerymlp').val()
};
inputData.id = (objId != null) ? objId:"";
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlps/',
'data' : inputData,
success : function(response){
if(typeof response.objectId!='undefined'){
jQuery('.block').find("img[src='"+inputData.image_url+"']").attr('id',response.objectId);
jQuery('#'+response.objectId).parents().eq(2).find('div[id="tmploader"]').hide();
jQuery('#'+response.objectId).parents().eq(2).find('div[id="displaysus"]').attr('id',response.objectId);
}
jQuery('#'+response.objectId).parents().eq(2).find('.metadata').css({'visibility':'hidden','height':'28px'});
if(sethomeid == "abc"){
//jQuery('#dialog').show();
jQuery('#'+response.objectId).parents().eq(2).find('div[id="'+response.objectId+'"]').show()
jQuery('#'+response.objectId).parents().eq(2).find('div[id="'+response.objectId+'"]').fadeOut(3000);
}
else{
jQuery('.metadata').html('<a id="saveGallery" href="#" style="color:white;margin: 0px;padding: 3px;" class="gallerystyle">Save</a><a id="cancelgallery" href="##" style="color:white;margin: 0px;padding: 3px;background: #b2da8e;margin: 0 14% 0 0;" class="gallerystyle">Cancel</a><a id="deleteGallery" href="#" style="color:white;margin: 0px;padding: 3px;float:left;background:#d94a38;" class="gallerystyle">Delete</a>');
}
if(objId){jQuery('.metadata').css({'visibility':'hidden','height':'28px'});}
jQuery('#'+objId+'abc').show();
jQuery('#'+objId+'abc').fadeOut(3000);
jQuery('.changebox').css('border','none');
jQuery('.changetitle').css('border','none');
jQuery('.changebox').prop("contentEditable", false);
jQuery('.changetitle').prop("contentEditable", false);
jQuery('.ch-inner').attr('class','editbutton')
jQuery('.changebox').attr('class','box-comment');
jQuery('.changetitle').attr('class','middle-box-title');
jQuery('.changeimgstyle').attr('class','imagepopup');
jQuery('.imagepopup').css('opacity', '1');
jQuery('.gallerybox').hide();
}
});
},
deleteImage : function(objId,imageUrl,sethomeid){
//console.log(objId)
var r=confirm("Want to delete!")
if (r==true)
{
if(typeof objId!='undefined'){
var inputData = {
'id' : objId,
'imgurl' : imageUrl
}
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlp/',
'data' : inputData,
success : function(response){
if(objId){jQuery('.metadata').css({'visibility':'hidden','height':'28px'});}
jQuery('#'+objId).parents().eq(3).remove();
pinterest(undefined);
if(sethomeid == "abc"){
jQuery('.metadata').html('<a id="saveGallery" href="#" style="color:white;margin: 0px;padding: 3px;" class="gallerystyle">Save</a><a id="deleteGallery" href="#" style="color:white;margin: 0px;padding: 3px;float:left;background:#d94a38;" class="gallerystyle">Delete</a>');
pinterest(undefined);
}
else{
jQuery('.metadata').html('<a id="saveGallery" href="#" style="color:white;margin: 0px;padding: 3px;" class="gallerystyle">Save</a><a id="cancelgallery" href="##" style="color:white;margin: 0px;padding: 3px;background: #b2da8e;margin: 0 14% 0 0;" class="gallerystyle">Cancel</a><a id="deleteGallery" href="#" style="color:white;margin: 0px;padding: 3px;float:left;background:#d94a38;" class="gallerystyle">Delete</a>');
}
jQuery('.changebox').css('border','none');
jQuery('.changetitle').css('border','none');
jQuery('.changebox').prop("contentEditable", false);
jQuery('.changetitle').prop("contentEditable", false);
jQuery('.ch-inner').attr('class','editbutton')
jQuery('.changebox').attr('class','box-comment');
jQuery('.changetitle').attr('class','middle-box-title');
jQuery('.changeimgstyle').attr('class','imagepopup');
jQuery('.imagepopup').css("opacity", '1');
jQuery('.gallerybox').hide();
pinterest(undefined);
jQuery.ajax({
'type':'POST',
'url': jQuery('#baseurl').val()+'index.php/api/example/scmlpdetails/',
'data' : inputData,
success : function(resdata){ console.log(resdata)}
});
}
});
}
}
else{
jQuery('.metadata').css({'visibility':'hidden','height':'28px'});
jQuery('.metadata').html('<a id="saveGallery" href="#" style="color:white;margin: 0px;padding: 3px;" class="gallerystyle">Save</a><a id="cancelgallery" href="##" style="color:white;margin: 0px;padding: 3px;background: #b2da8e;margin: 0 14% 0 0;" class="gallerystyle">Cancel</a><a id="deleteGallery" href="#" style="color:white;margin: 0px;padding: 3px;float:left;background:#d94a38;" class="gallerystyle">Delete</a>');
jQuery('.changebox').css('border','none');
jQuery('.changetitle').css('border','none');
jQuery('.changebox').prop("contentEditable", false);
jQuery('.changetitle').prop("contentEditable", false);
jQuery('.ch-inner').attr('class','editbutton')
jQuery('.changebox').attr('class','box-comment');
jQuery('.changetitle').attr('class','middle-box-title');
jQuery('.changeimgstyle').attr('class','imagepopup');
jQuery('.imagepopup').css("opacity", '1');
jQuery('.gallerybox').hide();
pinterest(undefined);
}
},
cancelgallery : function(ev){
jQuery(ev.currentTarget).parents().eq(1).find('#middle-box-title').text(jQuery('#oldtitleval').val());
jQuery(ev.currentTarget).parents().eq(1).find('#box-comment').text(jQuery('#olddescriptoinval').val());
jQuery(ev.currentTarget).parents().eq(1).find('img').attr('src',jQuery('#oldimagesrc').val());
jQuery('.metadata').css({'visibility':'hidden','height':'28px'});
jQuery('.changebox').css('border','none');
jQuery('.changetitle').css('border','none');
jQuery('.changebox').prop("contentEditable", false);
jQuery('.changetitle').prop("contentEditable", false);
jQuery('.ch-inner').attr('class','editbutton')
jQuery('.changebox').attr('class','box-comment');
jQuery('.changetitle').attr('class','middle-box-title');
jQuery('.changeimgstyle').attr('class','imagepopup');
jQuery('.imagepopup').css("opacity", '1');
jQuery('.gallerybox').hide();
pinterest(undefined);
}
});
/MLP Backbone Ends Here/
Can anyone help me with the destroying and clearing the collection and model. Any help is deeply appreciated.
Thanking you,
Santosh Upadhayay

Answer 1

My first reaction would be to confirm that you don't have 2 of the same view on the page. I suspect that your original view still exists when you navigate back to the page. So it's this view that's being shown before your updated view which makes you think it's not being updated. So confirm that the html you expect to see isn't showing up in the wrong place.
If, on the other hand, you never see the correct html (even after the first interaction), then I suspect it has to do with your rendering logic. The model may be correctly syncing with the server, but you're not listening to the correct events from the view; or perhaps you are listening to the model event, but your handler is NOT rendering the view again.