VyTcdc VyTcdc - 18 days ago 5
jQuery Question

javascript with firebase Push method display values two or multiple times, in the chat page. whenever I go back page and come to chat page

I am creating a simple chat page using firebase Whenever I go to back page from current page(Chat page) and coming back to chat page and sending a message "Hi" it is displaying two times in chat page, if I return back to another page and again come back to chat page and send message, it is showing 3 times same vice versa it is showing multiple times.

The bellow is my coding. Please some one guide me..

$(document).on('pagebeforeshow', '#chatpage', function() {

var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");
$("#images6").empty();
ActivityIndicator.show();
ref.orderByChild("messages").on("child_added", function(snapshot) {

$("#images6").append(movielist(snapshot.val()));

var last_li = $("ul li:last-child").offset().top;

//alert(last_li);
setTimeout(function() {
$.mobile.silentScroll(last_li);
}, 50);

//console.log(JSON.stringify(snapshot.key()) + " was " +JSON.stringify(snapshot.val()));
ActivityIndicator.hide();




});


});




function movielist(item) {
//return "<li style='height:43px; border-bottom: 1px solid grey; font-size:15px; margin-top:18px;' ><a href='#' style='text-decoration:none;' data-name="+item.text+"><span class='left'>"+item.text+"</span><div class='clear'></div></a></li>";
return "<li style='font-size:15px; margin-top:18px;' margin-left:10px;><a href='#' style='text-decoration:none;' data-name=" + item.text + "><span class='left'>" + item.text + "</span><div class='clear'></div></a></li>";
}


$("#button").click(function() {


//alert("Hi");
var u = $.trim($("#uname").val());
var p = $("#pwd").val();
localStorage.setItem("locuname", u);
localStorage.setItem("locpwd", p);

var v = localStorage.getItem("locuname");
var m = localStorage.getItem("locpwd");



if (typeof(Storage) !== "undefined") {
$.mobile.changePage("#chatpage", {
transition: "slideup",
changeHash: false
});
} else {
// Sorry! No Web Storage support..
console.log("Please Login");
}

});




$("#send").click(function() {
var mes = $("#message").val();
if (mes.length == 0) {
//alert("Please Enter Text");
navigator.notification.alert(
'Please Enter Text', // message
alertDismissed, // callback
'Text Message', // title
'Done' // buttonName
);


} else {
var v = localStorage.getItem("locuname");
var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");

ref.push({
name: v,
text: mes,
photoUrl: "/images/profile_placeholder.png"
});



$('#message').val('');

var last_li = $("ul li:last-child").offset().top;
setTimeout(function() {
$.mobile.silentScroll(last_li);
}, 50);

}

});

function alertDismissed() {
// do something
}

Answer

You're attaching a new listener each time the page is shown:

$(document).on('pagebeforeshow', '#chatpage', function() {
    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");
    $("#images6").empty();
    ActivityIndicator.show();
    ref.orderByChild("messages").on("child_added", function(snapshot) {

In this case you should also detach the listener when the page is being hidden:

$(document).on('pagebeforehide', '#chatpage', function() {
    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");
    $("#images6").empty();
    ActivityIndicator.show();
    ref.orderByChild("messages").off("child_added");
Comments