In a nutshell..
the popupbeforeposition event fires every time I open a popup on a page in my jquery mobile project UNTIL I use
$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});
to force a refresh of the current page, after-which the 'popupbeforeposition' event never fires.
To elaborate and show my code..
I have a page (id="page_manage-buildings") in my jquery mobile project.
This page contains a link that opens a popup:
open popup
The html for the 'manage_buildings_image_picker' popup contents is pretty straight forward:
<div data-role="popup" id="manage_buildings_image_picker" data-transition="pop" class="ui-content" data-history="false" data-corners="false" data-theme="d" data-overlay-theme="a" style="width:300px; height:150px;">
... popup contents here ...
</div>
I have the 'pageinit' event bound to the '#page_manage-buildings' page and within that I am binding the 'popupbeforeposition' event to the 'manage_buildings_image_picker' popup, like so:
$(document).on("pageinit", "#page_manage-buildings", function() {
console.log('#page_manage-buildings page - pageinit event -- (only once for THIS page)');
$( "#manage_buildings_image_picker" ).on({
popupbeforeposition: function(event, ui) {
console.log('popupbeforeposition event');
}
});
});
Everything works fine until I click a a button labeled 'refresh' that actually runs custom code to reload the current page using $.mobile.changePage to force a reload of the current page. (I need to retain a session variable that is passed from page to page). Anyway, after I click on my refresh button, the 'popupbeforeposition' event is no longer fired when opening the 'manage_buildings_image_picker' popup.
This is the code that is executed when the 'refresh' button is clicked:
convert_get_to_post($(location).attr('href'), true);
function convert_get_to_post(urlStr, forceReload){
postData = new Object;
var urlObj = $.mobile.path.parseUrl(urlStr);
if(urlObj.search){
// -- ensure any query string parameters are sent as post data
var dataStr = urlObj.search.toString();
dataStr = dataStr.replace(/^\?/,'');
dataPairs = dataStr.split('&');
//console.log('here is the dataPairs');
//console.log(dataPairs);
var avsessionFound=0;
for (x in dataPairs) {
dataPair = dataPairs[x];
//console.log(dataPair);
var dataSet = dataPair.split('=');
//console.log('here is the dataSet');
//console.log(dataSet);
postData[dataSet[0]]=dataSet[1];
if(dataSet[0]=='avsession'){
avsessionFound=1;
console.log('avsession found: '+dataSet[1]);
}
}
if(avsessionFound==0){
// inject the avsession value into the post data
postData['avsession'] = $.jStorage.get('avsession', '');
}
//console.log('here is the postData');
//console.log(postData);
// send this request as a post
$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});
}else{
// no query string to worry about jsut send this as a post with the avsession value injected
postData['avsession'] = $.jStorage.get('avsession', '');
$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});
}
}
UPDATE #1
I changed the syntax of my ON binding and it fixed the 'popupbeforeposition' event issue but now the 'popupafterclose' event is firing twice when I close the popup. I can deal with that but was wondering if it was caused from something obvious?
$(document).on("pageinit", "#page_manage-buildings", function() {
console.log('#page_manage-buildings page - pageinit event -- (only once for THIS page)');
$(document).on("popupbeforeposition", "#manage_buildings_image_picker", function(event, ui) {
console.log('*** popupbeforeposition event ***');
});
$(document).on("popupafterclose", "#manage_buildings_image_picker", function(event, ui) {
console.log('*** popupafterclose event ***');
});
});
Update #2
Actually the code in update #1 caused the bind events to get bound pageview+(n-1) times where n is equal to the number of times that page was viewed. This is because the events are bound at the document level (which stays the same in JQM) and is only ever updated as pages are loaded/unloaded. I used Omar's suggestion and unbound the event with OFF befor binding the event which ensures there is only ever one event firing.
$(document).off("popupbeforeposition", "#manage_buildings_image_picker").on("popupbeforeposition", "#manage_buildings_image_picker", function(event, ui) {
console.log('*** popupbeforeposition event ***');
});
binding events used only on a specific page at the document level seems messy and I would still like to know why it won't work when binding it to an element that exists within that page ??
So I have 2 html pages. 1 that functions as container and 1 that functions as content.
When I load the content page with a table I'm able to use drag and drop.
But when I go to my container page and load the content page into a div with ajax, the drag and drop stops working. All other javascript functionalities inside the content page still work. How can I bind the jquery dnd plugin to the table loaded with ajax?
I'm using drag & drop with this as tutorial http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
my code looks like this:
$(window).load(function()
{ if(temp == 0)
{
DP("eerste keer")
load_table();
temp = 1;
}
} );
function load_table()
{
DP('load_table');
$.ajax({
//async: false,
type: "POST",
url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
success: function (data) {
$("#diagnoses_zelf").html(''); //<== clears current content of div
$("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
},
error: function(){
alert('error');
}
}).done(function() {
update_table();
initialize_table(); // <== calls jquery plug in
});
return false;
}
function initialize_table()
{
var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
alert(tableid);
$(tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
alert(tette);
},
dragHandle: ".dragHandle"
});
}
How is this possible and what can I do about it?
Can anyone help me with this please.
Very short:
I want access to the ID of the table I load into my container page with ajax and use the jquery drag and drop plug in on it.
EDIT
Findings:
Somehow my table in the container page got renamed to pSqlaTable instead of the id I gave to it in the controller page which is.
<table id="tableDiagnose" class="table table-hover">
Thats why the code couldn't find the table annymore Got fixed by this code thanks to Fábio Batista:
$('#diagnoses_zelf table').tableDnD( ... );
, but how can I use the dnd plugin now ?
It finds the table now, but I'm still not able to bind the dnd plugin to it, Am I able to bind a jquery plug in to ajax loaded tables ?
EDIT
//drag & drop http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
function initialize_table()
{
var tableid = $('#diagnoses_zelf table').attr('id');
alert(tableid);
$('#' + tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
alert('issemer?');
},
dragHandle: ".dragHandle"
});
}
This is the code i'm still stuck with. tableid is correct but the initialisation of the jquery isn't. I can't drag the drows in the table. Is my syntax wrong ?
EDIT
Could it be that I can't bind the jquery to the table because I dynamicaly generate the table on the other page with ZPT (or javascript) ?
The issue with plugins.
You're mixing lots of external libraries and code. This results in possible mis-matches between versions, and a lot of black boxes in your code.
As a developer, this should make you feel very uneasy. Having code you do not fully understand in your code base can get really frustrating really fast.
The alternative.
Often, these sort of plugins provide functionality we, as JavaScript developers can accomplish just as easily without them. This development process, in simple enough scenarios, lets us create code we understand and have an easier time maintaining. Not only do we learn from this process, but we also create smaller bits of specific code. Community driven solutions are very good in general, but it's important to remember they're not a silver bullet. Often you're stuck using a not-so-active project which has a bug for your specific case and you have to dig through a large, unfamiliar code base.
Your code
So what does this drag and drop plugin do?
Well, I'd break it down as the following:
Listens to the mousedown event on table rows
When such an event fires, start moving the table row to match the mouse position
When mouseup occurs, detect that, and finalize the position.
Let us see how we can do something similar.
Let's assume the table's HTML is something like:
<table>
<tbody>
<tr>
<td> Hello 1</td>
</tr><tr>
<td> Hello 2</td>
</tr>
</tbody>
</table>
Here is a fiddle with the table with some basic styling applied
Next, we'll listen to the selection events. We'll add an event to the table rows for selection and to the document to when the mouse is up. jQuery has event listeners for such events. Since we want these events to stick even after AJAX, we'll use .on which lets us use delegated events. .on means that even if we add content to the table later, it won't matter.
var selected; // currently selected row
$(document).on("mousedown","#MySpecialTable tr",function(){
$("#textDiv").text(this.textContent);
selected = this;
});
$(document).on("mouseup",function(){
$("#textDiv").text("Left "+selected.textContent);
selected = null;
});
Here is a working fiddle of such code.
Now, we'll want to actually change the drag&drop to work when, that is, update the current position to the one reflecting the mouse position. We can listen to mousemove events, and detect the element we're currently on. Something like
$(document).on("mousemove",function(e){
$("#textDiv").text($(e.target).html());
});
You can see a working fiddle here
That's nice, but we want to actually change the element position. So we'll need to change the table structure to allow that. We can remove the element, and append it at the correct position. We'll check if we have a selected element, and if we do, we can track it compared to the current element in the mousemove event. We can for starters detect if we should drag with something like:
$(document).on("mousemove",function(e){
if(selected !=null){// got an element selected
if($("#MySpecialTable").has(e.target).length > 0){ //in the table
$("#mousePos").text("DRAGGING");
}
}else{
$("#mousePos").text("NOT SELECTED");
}
});
(Fiddle)
Now, we'll add actual selection, we'll replace the elements when the target is not our element and we're in the table. Our full code should be something like:
var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
e.preventDefault();//stop the text selection;
$("#textDiv").text(this.textContent);
selected = $(this);
selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
$("#textDiv").text("Left "+selected.text());
selected.find("td").css("background-color","");
selected = null;
});
$(document).on("mousemove",function(e){
if(selected !=null){// got an element selected
if($("#MySpecialTable").has(e.target).length > 0){ //in the table
var el = $(e.target).closest("tr");//the tr element we're on
el.before(selected);// replace the elements
}
}else{
$("#mousePos").text("NOT SELECTED");
}
});
$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table
(Fiddle)
Now, so far we only have a few lines of code, which is nice since we know exactly what's going on and didn't need to use lots of lines of external code we don't fully understand.
But will it AJAX?
Let's load the data into the table with AJAX and see! We'll simulate an AJAX response using a setTimeout which would allow us to simulate an asynchronous request. We'll use
setTimeout(function(){
$("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);
This means, update the HTML of #MySpecialTable after one second. Let's see if it works shall we?
So why does it work? well, we used delegated events which means we don't care if the elements we're loading are in the screen right now or not. We had the insight to do this since we built our code ourselves and knew what our final goal was. The only thing left to do is clean the code a little.
We'll wrap our code in the following, to prevent $ from being an issue in non-conflict mode (that is, $ is already taken in the page:
(function($){
})(jQuery);
Next we'll add a binding for our table event:
$.GertVDragTable = function(elementSelector){ // rest of code.
Eventually, our code might look something like this.
Using it, would be a simple $.GertVDragTable("#MySpecialTable"); alternatively, we can put it on $.fn and allow every function to call it. Which is a matter of taste.
No copy-pasta please :) I'd appreciate it if you stop on every stage and think why the next step was taken.
You don't need to use the ID as a selector, you can use any expression that can find your table.
If there's only one table on the resulting $.ajax call, you can search for "a table inside the container", using the container ID, which won't change:
$('#diagnoses_zelf table').tableDnD( ... );
If there's more than one table, use a different kind of selector, instead of the ID. A CSS class works fine:
$('table.table-diagnose').tableDnD( ... );
So does a data- attribute:
$("table[data-diagnose]").tableDnD( ... );
Try adding a title to your table, like so:
<table id = "tableDiagnose" class = "table table-hover" title = "table-content">
Then use the jQuery attribute selector to find this table instead of finding it by id.
$('table[title="table-content"]').tableDnD({
// the rest of your code
If your id is changing you should not use an ID then:
<table class="tableDiagnose table table-hover">
Plugin
function initialize_table()
{
$('.tableDiagnose.table').tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
dragHandle: ".dragHandle"
});
DP('nee');
}
EDIT: ajax is asynchronous :
function load_table()
{
DP('load_table');
$.ajax({
//async: false,
type: "POST",
url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
success: function (data) {
$("#diagnoses_zelf").html(''); //<== clears current content of div
$("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
update_table();
initialize_table(); // <== calls jquery plug in
},
error: function(){
alert('error');
}
});
//removed .done as you already have a success option in ajax
return false;
}
EDIT: found your bug........
you retrieve the table id then select it in $(tableid) but you missed the #
function initialize_table()
{
/*
var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
alert(tableid);
// but you really should limit the use of variables when you don't need them*/
//$('#'+tableid).tableDnD({
//like this directly
$('#diagnoses_zelf table').tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
//alert(tette);
},
dragHandle: ".dragHandle"
});
}
See the demo here
EDIT
Do you include the script file in the container page or in the content page? I guess you might want to try to load it when calling the dnd plugin with getScript:
...
$.getScript('pathTotableDnDlib').done(function(){
$(tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
alert(tette);
},
dragHandle: ".dragHandle"
});});
...
more on getscript: here
#BenjaminGruenbaum Hi thx a lot for the tutorial, i modified a bit the code to block the drag n'drop on table headers and to improve the drag fluidity tracking the mouse direction.
var old_y = 0;
(function ($) {
$.GertVDragTable = function (tableName) {
var selected;
$(document).on("mousedown", tableName+" tr",function (e) {
e.preventDefault(); //stop the text selection;
if (($(this).find('th').length)== 0){ //prevent dragging on tr containing th
selected = $(this);
selected.find("td").css("background-color", "black");
selected.find("td").css("color", "white");
}
});
$(document).on("mouseup", function () {
selected.find("td").css("background-color", "");
selected.find("td").css("color", "");
selected = null;
});
$(document).on("mousemove", function (e) {
if (selected != null ) { // got an element selected
if ($(tableName).has(e.target).length > 0) { //in the table
var el = $(e.target).closest("tr"); //the tr element we're on
if (el.find('th').length==0){ //prevent dropping on headers row
if (e.pageY > old_y){ //**
el.after(selected);}else{ //**-->more fluid dragging based on mouse direction
el.before(selected); //**
}
}
}
old_y = e.pageY;
}
});
$(tableName).on('selectstart', false); //Don't let the user select the table
}
})(jQuery);
here's the fiddle http://jsfiddle.net/59rdq/
I hope it will be useful for someone.
Code:
$(".box-collapse").live("click",function(){
if(updating()) return false;
var b = $(this).parent().parent();
b.find(".album-div").stop(true,false).slideToggle();
$.ajax({
url: addNonce($(this).attr("href")),
success:function(data){
c = b.attr("id");
var resp = $('<div />').html(data);
var col = $("#"+c+" .box-collapse");
var ncol = resp.find("#"+c+" .box-collapse");
col.html(ncol.html());
col.attr('href',ncol.attr('href'));
resp.remove();
clearUpdate(data);
wait = false;
}
});
return false;
});
This click is being fired twice.
What happens:
Click to collapse and it sends a
response to save that collapse.
Click again to expand and it sends a
request to save the expand.
Click again to collapse and it is
fired twice (leaving it expanded, but collapse is saved).
Click again and it fires 4 times.
It only begins multiple firing AFTER the second click. It's baffling me.
If I remove the servicing of the data, it doesn't fire twice. What am I doing wrong on the service? (i.e. I only leave wait = false in success)
The other functions that I use in this call:
function updating(){
if(!wait) {
$("#loading").html('Updating...');
wait = true;
return false;
}
else {
$("#loading").html('Slow down...');
return true;
}
}
function clearUpdate(data){
var resp = $('<div />').html(data);
//alert(resp.find("#nonce").val() + " "+$("#nonce").val());
$("#loading").html(resp.find("#loading").html());
if(typeof(resp.find("#nonce").val()) == 'undefined'){
alert(data);
$("#loading").html("Fatal error. Your session could have ended. <a href='javascript:location.reload()'>Refresh</a>");
resp.remove();
return false;
}
else if(resp.find("#errorcode_").val() == "refresh"){
location.reload();
}
resp.find(".image-box").each(function(){
$("#"+$(this).attr("id")).find(".image-count").html($(this).find(".image-count").html());
});
$("#nonce").val(resp.find("#nonce").val());
wait = false;
resp.remove();
}
The wait flag prevents a request from being sent before the last has been serviced. I do this because I track a nonce and I have to get a new nonce after each request.
Again, if I remove the data servicing, it works fine. But I need to service the data to get the fresh nonce.
Plus, I'm not seeing it crash anywhere. Any help would be great. I'll post any other functions if needed. My full script is pretty large.
Here is the HTML of .box-collapse parent:
<div class='box image-box album-marker-visible image-box-w-20 image-box-list-0' id='portrait'>
<h2 class='box-header image-box-header'>
<input type='checkbox' name='albums[portrait]'>
<span class='image-box-header-move'>
<span class='image-album-number'>1</span>. Portrait <input type='hidden' class='image-album-anchor' value='portrait'>
<input type='hidden' class='image-album-portfolio' value='1'>
<span class='image-count'>(20)</span>
<span class='box-mover'>Move to: <a href='images?n=bridals,weddings,engagement,portrait&port=2&nonce=I8FX2BH841' title='Move to Wedding Portfolio'>Wedding Portfolio</a> Move: <a href='images?n=story,portrait,capture,press,concerts&port=1&nonce=I8FX2BH841'>down</a></span></span>
<span class='album-marker'> | <a href='images?ia=3&action=hide&nonce=I8FX2BH841' title='Mark album as hide' class='album-mark-hide album-mark'>hide</a></span>
<a class='box-mover-show box-collapse' href='images?expand=portrait&nonce=I8FX2BH841' title='Expand Portrait'>expand</a></h2>
There are multiple instances of .box and I didn't show the content after the h2 tag (that's why my div isn't closed).
As requested, this is the step by step process of what SHOULD be happening:
I click collapse on a .box-collapse instance. It sends its href.
jQuery toggles its slide.
On call back I get the new href from the link I just clicked. It should have changed query strings from expand=an_album to collapse=an_album or vise-versa. I also change the state from 'expand' to 'collapse'. I am searching through the response based on the id of the containing .box I just clicked. I am getting the correct response (collapse will change to expand), but jQuery slideToggles twice.
In clearUpdate() I update my nonce from the received data. If I don't receive a nonce, I die. I also update the image count for each .box.
I have placed an alert in the success, and on the first click, I get one alert. Click again, I get one alert. Click an THIRD time, I get two alerts. Fourth time, 4 alerts.
I have also done alert($(".box-collapse").length); in my clearUpdate() and the size does not change.
The error lies in the success function and/or clearUpdate. Since I am receiving the exact same HTML as I already have (minus the changes above), is it possible that I am reparsing the javascript and re-binding a click? But this doesn't seem feasible because I should be firing multiple times after the FIRST click.
Update
I added an alert in the $(document).ready() and I get the alert every time I get a response. So it is re-parsing the javascript and re-binding the click. My immediate fix will be to change it to : $(".box-collapse").die("click").live("click",function()) but I will add a query to disable the javascript header.
Thanks for the help!
This most likely creates the second click event if data contains the .box-collapse class
var resp = $('<div />').html(data);
Do you really need the class selector? Identifiers should be unique
that makes b.html() == $("#"+c+" .box-collapse").html() and b == col[0]
var col = $("#"+c+" .box-collapse");
This is worrying. It means that within resp there is an element with the same id as within b.
It is most likely the cause for when switching to click from live that the click event
happens twice.
var ncol = resp.find("#"+c+" .box-collapse");
Too little known about the content of .box-collapse or data to understand
col.html(ncol.html());
col.attr('href',ncol.attr('href'));
Now I think I finally understand.
Change the data to contain a JSON object or a simpler HTML structure and it should work like this.
Good example
data == { "innerText":"expand", "url":"images?expand=portrait&nonce=I8FX2BH841" }
col.html(data.innerText);
col.attr('href', data.url);
Bad Example
server response:
data == <span class="innerText">expand</span><span class="url">images?expand=portrait&nonce=I8FX2BH841</span>
var div = $("<div />").html(data);
col.html(div.find(".innerText").html());
col.attr(div.find(".url").html());
and adjust the clearUpdate function
I am using jQuery to show/hide a div container (#pluginOptionsContainer), and load a page (./plugin_options.php) inside it with the required POST vars sent.
What POST data is sent is based on the value of a select list (#pluginDD) and the click of a button (#pluginOptionsBtn)...
It works fine in Firefox, but doesn't work in IE.. The '$("#pluginOptionsContainer").load()' request never seems to finish in IE - I only see the loading message forever...
bind(), empty() and append() all seem to work fine in IE.. But not load()..
Here is my code:
// wait for the DOM to be loaded
$(document).ready(function() {
// hide the plugin options
$('#pluginOptionsContainer').hide();
// This is the hack for IE
if ($.browser.msie) {
$("#pluginDD").click(function() {
this.blur();
this.focus();
});
}
// set the main function
$(function() {
// the button shows hides the plugin options page (and its container)
$("#pluginOptionsBtn") .click(function() {
// show the container of the plugin options page
$('#pluginOptionsContainer').empty().append('<div style="text-align:center;width:99%;">Loading...</div>');
$('#pluginOptionsContainer').toggle();
});
// set the loading message if user changes selection with either the dropdown or button
$("#pluginDD,#pluginOptionsBtn").bind('change', function() {
$('#pluginOptionsContainer').empty().append('<div style="text-align:center;width:99%;">Loading...</div>');
});
// then update the page when the plugin is changed when EITHER the plugin button or dropdown or clicked or changed
$("#pluginDD,#pluginOptionsBtn").bind('change click', function() {
// set form fields as vars in js
var pid = <?=$pid;?>;
var cid = <?=$contentid;?>;
var pDD = $("#pluginDD").val();
// add post vars (must use JSON) to be sent into the js var 'dataString'
var dataString = {plugin_options: true, pageid: pid, contentid: cid, pluginDD: pDD };
// include the plugin option page inside the container, with the required values already added into the query string
$("#pluginOptionsContainer").load("/admin/inc/edit/content/plugin_options.php#pluginTop", dataString);
// add this to stop page refresh
return false;
}); // end submit function
}); // end main function
}); // on DOM load
Any help would be GREATLY appreciated! I hate IE!
IE sometimes caches responses. You can check by watching the requests IE makes to the server. Fiddler2 is a tool that's good for watching http requests.
If you notice that you hit submit and don't see any http requests being made, IE is caching the result.
If that's the case, you can add a random number to the url to cache bust it:
$("#pluginOptionsContainer").load("url.php?random=" + Math.random()*99999, dataString);
IE is sometimes pickier then FF when it comes to duplicate element ids.
Check if every ID you use is used only once and is not created anew during the ajax call.
If caching is the issue, then try setting cache = false in jquery's ajax setup...
$.ajaxSetup ({
cache: false,
});
I am working on an online music store. There are buttons like myplaylists, mydownloads etc...
On clicking on these buttons, a list of songs appears accordingly in a grid view.
The problem is that when I click on the buttons twice quickly the list appears two times like 1..4..8 1..4..8 and if I click thrice quickly it happens three times.The function that displays the list uses append() to add songs to the list.
These things happen only on Firefox
I cannot figure out the problem.
function fillMyMusicSongGrid
{
// code to fetch data from the database
embedSongGrid(.....);//displays the grid
}
embedSongGrid(.....)
{
//displays the grid
tableContent = '...............'
$(tableCont).appendTo('table#songList');
}
If I'm guessing correctly, pressing these buttons makes and Ajax call back to the server to get the information, probably as a JSON array. You then loop through these and append() them to the appropriate div. Either that or you get HTML and just append it.
Simply solution: just empty() it before you add it:
$.ajax({
...
success: function(data) {
$("#songlist").empty();
for (song in data) {
$("#songlist").append(...);
}
}
});
or
$.ajax({
...
success: function(html) {
$("#songlist").html(html);
}
});
Try
$(tableCont).empty();
$(tableCont).appendTo('table#songList');
instead of
$(tableCont).appendTo('table#songList');