JQuery Collapsable DIV losing functionality after re-generating HTML code
I have a legible DIV that, with the click of a button, I recreate the HTML to create an expandable DIV. However, the second DIV I create doesn't shrink.
You can see this issue here http://jsfiddle.net/Shinksy/SfcTk/7/
Click the search button and you will see a folding DIV, click the Post button, and then create a folding DIV as well. However, it no longer shrinks.
Any help would be greatly appreciated.
thank
Martin
source to share
Calling both functions when pressing search. This will work - JS -
//Set global variables
var newData = "";
var statusReport = "X";
var innerHtml = "";
var defaultHTML = "";
//Handle Search
$("#idoc_search").click(function() {
requestProcessedSearch();
});
function changePage() {
$.mobile.changePage("#results_page", {})
}
function requestProcessedSearch() {
document.getElementById('resultTable').innerHTML = "";
defineNewStatusDiv();
defineNewMessageDiv();//Call function here
changePage();
}
function defineNewStatusDiv() {
innerHtml = null;
defaultHTML = null;
innerHtml = document.getElementById('resultTable').innerHTML;
defaultHTML = '<div data-role="collapsible" data-theme="a" data-content-theme="a" id="status">' + '<h3>Status</h3>' + '<table id="chart' + '51' + '" class="imagetable">' + '<tr>' + '<th>IDoc</th>' + '<th>Message Type</th>';
alert(defaultHTML);
innerHtml = innerHtml + defaultHTML;
document.getElementById('resultTable').innerHTML = null;
document.getElementById('resultTable').innerHTML = innerHtml;
}
function defineNewMessageDiv() {
innerHtml = null;
defaultHTML = null;
innerHtml = document.getElementById('resultTable').innerHTML;
defaultHTML = '<div class = "ui-collapsible ui-collapsible-collapsed" data-role="collapsible" data-theme="a" data-content-theme="a">' + '<h3>Message</h3>' + '<table id="chart' + 'MATMAS' + '" class="imagetable">' + '<tr>' + '<th>IDoc</th>' + '<th>Status</th>';
innerHtml = innerHtml + defaultHTML;
document.getElementById('resultTable').innerHTML = null;
document.getElementById('resultTable').innerHTML = innerHtml;
}
Here's a fiddle- http://jsfiddle.net/SfcTk/11/
PS- You can use JQuery appendTo without making DOM as NULL.
source to share
You will find here: jsFiddle
I have 'updated' your code to use jQuery
as it should be used.
The reason your second foldable was div
not linked is because the code you generated is html
not initializing jQuery
. For the first one it is done by call changePage
(I think not familiar with jQuery-mobile
), the second one just replaced innerHtml
with some html containing some useless classes css
if they are not initialized!
What I did was initialize two resettable div
s, each in a separate result-div container before the actual one changePage
, and when the message button is clicked, I hide the first one and show the second one (which was hidden on initialization), easy!
Review the code and see how easy it is to use jQuery
for control DOM
compared to your first post!
source to share