Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 834
  • Last Modified:

How to load a query into a div dynamically

I have a cold fusion file that I will be loading data into from a cfquery.  The cfm file has ajax that allows an edit in place for comments that will be posted to a database.  I need the results from the query to be posted in the div when the page loads.  I can add comments to the page but i do not know how to load the comments from the database.  I included the cfm file and the javascript that writes to the div.  Please let me know if i need to provide more information.  
HTML/CFM code
----------------------------------------------------------------------
<script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript" src="formdata2querystring.js"></script>
    <script type="text/javascript" src="blog.js"></script>
    <link rel="stylesheet" href="blog.css" type="text/css"/>
  </head>
  <body>
 <cfquery name="getcomments" datasource="#datasource#">
  select comment from comment
</cfquery>
    <form id="blogForm" method="post" action="">
      <div>
        <input type="hidden" id="editEntryId" name="editEntryId" value="" />
        <div id="colDiv">
          <div id="promptDiv"><!--- (Double-click any entry to edit) ---></div>
          <div id="newEntryButtonDiv">
            <input type="button" id="newEntryButton" name="newEntryButton" class="inputButton" value="New Entry" />
          </div>
          <div class="clearBoth"></div>
          <div id="allEntryDiv"></div>
        </div>
      </div>
    </form>
  </body>
----------------------------------------------------------------------
JAVASCRIPT THAT WRITES TO THE DIV
----------------------------------------------------------------------
 
var Blog = new function() {
  this.ajax = null;
  this.form = null;
  this.proc = 'ready'; // 'ready', 'proc' or 'done'
  this.fadeIncr = 0;
  this.statusInterval = null;
  this.isInputDisabled = false;
  this.editId = '';
  this.saveId = '';
  this.origTitle = '';
  this.origBody = '';
  
  this.init = function() {
    var self = Blog;
    self.ajax = new Ajax();
    self.form = document.getElementById('blogForm');
    self.form.newEntryButton.onclick = self.addNewEntry;
  };
  
  this.toggleEditInPlace = function(e) {
    var self = Blog;
    var elem = null;
    if(!e) {
      e = window.event;
    }
    elem = self.getSrcElem(e);
    id = elem.id.replace(/main|title|body/, '');
    if (id != 'editCancel' && !self.isInputDisabled) {
      self.editId = id;
      self.editInPlaceOn();
      self.disableEnableMainWinInput(false);
    }
    else if (id == 'editCancel') {
      if (self.editId == 'NewEntryTemp') {
        self.removeEntryDiv();
      }
      else {
        self.editInPlaceOff(false);
      }
      self.editId = '';
      self.disableEnableMainWinInput(true);
    }
  };
  
  this.getSrcElem = function(e) {
    var ret = null;
    if (e.srcElement) {
      ret = e.srcElement;
    }
    else if (e.target) {
      ret = e.target;
    }
    while (!ret.id && ret) {
      ret = ret.parentNode;
    }
    return ret;
  };
  this.editInPlaceOn = function(id) {
    var self = Blog;
    var id = self.editId;
    var entryDiv = null;
    var titleDiv = null;
    var bodyDiv = null;
    var titleInput = null;
    var bodyArea = null;
    var cancelButton = null;
    var saveButton = null;
    var leftButtonDiv = null;
    var rightButtonDiv = null;
    var clearBothDiv = null;
    entryDiv = document.getElementById('main' + id);
    titleDiv = document.getElementById('title' + id);
    bodyDiv = document.getElementById('body' + id);
    self.origTitle = titleDiv.innerHTML;
    self.origBody = bodyDiv.innerHTML;
    while(titleDiv.firstChild) {
      titleDiv.removeChild(titleDiv.firstChild);
    }
    while(bodyDiv.firstChild) {
      bodyDiv.removeChild(bodyDiv.firstChild);
    }
    titleInput = document.createElement('input');
    bodyArea = document.createElement('textarea');
    titleInput.id = 'titleText';
    titleInput.name = 'titleText';
    bodyArea.id = 'bodyText';
    bodyArea.name = 'bodyText';
    bodyArea.cols = "36";
    bodyArea.rows = "8";
    titleInput.className = 'titleInput';
    bodyArea.className = 'bodyArea';
    titleDiv.appendChild(titleInput);
    bodyDiv.appendChild(bodyArea);
    titleInput.value = self.origTitle;
    bodyArea.value = self.origBody;
    cancelButton = document.createElement('input');
    saveButton = document.createElement('input');
    leftButtonDiv = document.createElement('div');
    rightButtonDiv = document.createElement('div');
    clearBothDiv = document.createElement('div');
    leftButtonDiv.className = 'leftButton';
    rightButtonDiv.className = 'rightButton';
    clearBothDiv.className = 'clearBoth';
    clearBothDiv.style.paddingBottom = '12px';
    cancelButton.type = 'button';
    cancelButton.className = 'inputButton';
    cancelButton.id = 'editCancel';
    cancelButton.onclick = self.toggleEditInPlace;
    cancelButton.value = 'Cancel';
    saveButton.type = 'button';
    saveButton.className = 'inputButton';
    saveButton.id = 'updateSave';
    saveButton.onclick = self.doSave;
    saveButton.value = 'Save';
    entryDiv.appendChild(leftButtonDiv);
    leftButtonDiv.appendChild(cancelButton);
    entryDiv.appendChild(rightButtonDiv);
    rightButtonDiv.appendChild(saveButton);
    entryDiv.appendChild(clearBothDiv);
  };
  
  this.disableEnableMainWinInput = function(enable) {
    var self = Blog;
    var but = document.getElementById('newEntryButton');
    self.isInputDisabled = !enable;
    if (enable) {
      but.onclick = self.addNewEntry;
      but.disabled = false;
    }
    /*else {
      but.onclick = null;
      but.disabled = true;
    } */
  };
  
  this.editInPlaceOff = function(acceptChanges) {
    var self = Blog;
    var id = self.editId;
    var allEntryDiv = null;
    var entryDiv = null;
    var titleDiv = null;
    var bodyDiv = null;
    entryDiv = document.getElementById('main' + id);
    titleDiv = document.getElementById('title' + id);
    bodyDiv = document.getElementById('body' + id);
    entryDiv.removeChild(entryDiv.lastChild);
    entryDiv.removeChild(entryDiv.lastChild);
    entryDiv.removeChild(entryDiv.lastChild);
    if (acceptChanges) {
      t = titleDiv.firstChild.value;
      b = bodyDiv.firstChild.value;
    }
    else {
      t = self.origTitle;
      b = self.origBody;
    }
    titleDiv.removeChild(titleDiv.firstChild);
    bodyDiv.removeChild(bodyDiv.firstChild);
    titleDiv.innerHTML = t;
    bodyDiv.innerHTML = b;
  };
  
  this.doSave = function() {
    var self = Blog;
    var postData = '';
    self.form.editEntryId.value = self.editId;
    postData = formData2QueryString(self.form);
    self.ajax.doGet('blog_process.cfm?' + postData, self.handleSave);
    self.editInPlaceOff(true);
    self.proc = 'proc';
    self.startStatusAnim();
  };
  
  this.startStatusAnim = function() {
    var self = Blog;
    self.fadeIncr = 0;
    self.doStatusAnim();
    self.statusInterval = setInterval(self.doStatusAnim, 200);
  };
  
  this.doStatusAnim = function() {
    var self = Blog;
    var r = 235;
    var g = 235;
    var fadeDiv = null;
    fadeDiv = document.getElementById('main' + self.editId);
    if (self.fadeIncr < 20) {
      self.fadeIncr += 5;
    }
    else {
      if (self.proc == 'proc') {
        self.fadeIncr = 0;
      }
      else {
        self.fadeIncr = 20;
        self.stopReset();
      }
    }
    r += self.fadeIncr;
    g += self.fadeIncr;
    fadeDiv.style.background = 'rgb(' + r + ', ' + g + ', 255)';
  };
  
  this.parseYamlResult = function(str) {
    var arr = [];
    var res = [];
    var pat = /(\S+): (\S+)\n/g;
    while (arr = pat.exec(str)) {
      res[arr[1]] = arr[2];
    }
    return res;
  };
  
  this.handleSave = function(str) {
    var self = Blog;
    var res = [];
    var err = '';
    res = self.parseYamlResult(str);
 
    switch (res['type']) {
      case 'new':
        if (res['status'] != 'success') {
          err = 'Could not save the new entry.';
        }
        else {
          self.saveId = res['id'];
        }
        break;
      case 'edit':
        if (res['status'] != 'success') {
          err = 'Could not save changes to entry.';
        }
        break;
      default:
        err = 'Unknown error.';
        break;
    }
    self.proc = 'done';
    if (err) {
     // alert(err);
    }
  };
  
  this.stopReset = function() {
    var self = Blog;
    clearInterval(self.statusInterval);
    self.disableEnableMainWinInput(true);
    self.editId = '';
    self.proc = 'ready';
    if (self.saveId) {
      self.setNewEntryRealId();
    }
  };
  
  this.addNewEntry = function() {
    var self = Blog;
    if (self.insertEntryDiv()) {
      self.editId = 'NewEntryTemp';
      self.editInPlaceOn();
      self.disableEnableMainWinInput(false);
    }
  };
  
  this.insertEntryDiv = function() {
    var self = Blog;
    var allEntryDiv = null;
    var entryFirst = null;
    var newEntryDiv = null;
    var titleDiv = null;
    var bodyDiv = null;
    allEntryDiv = document.getElementById('allEntryDiv');
    newEntryDiv = document.createElement('div');
    titleDiv = document.createElement('div');
    bodyDiv = document.createElement('div');
    newEntryDiv.id = 'mainNewEntryTemp';
    titleDiv.id = 'titleNewEntryTemp';
    bodyDiv.id = 'bodyNewEntryTemp';
    titleDiv.className = 'entryTitle';
    bodyDiv.className = 'entryBody';
    titleDiv.appendChild(document.createTextNode('New entry'));;
    bodyDiv.appendChild(document.createTextNode('Type body here ...'));
    newEntryDiv.appendChild(titleDiv);
    newEntryDiv.appendChild(bodyDiv);
    entryFirst = allEntryDiv.firstChild;
    if (entryFirst) {
      allEntryDiv.insertBefore(newEntryDiv, entryFirst);
    }
    else {
      allEntryDiv.appendChild(newEntryDiv);
    }
    return true;
  };
  
  this.removeEntryDiv = function() {
    var self = Blog;
    var allEntryDiv = document.getElementById('allEntryDiv');
    var entryDiv = document.getElementById('main' + self.editId);
    allEntryDiv.removeChild(entryDiv);
  };
  
  this.setNewEntryRealId = function() {
    var self = Blog;
    var entryDiv = null;
    var titleDiv = null;
    var bodyDiv = null;
    entryDiv = document.getElementById('mainNewEntryTemp');
    titleDiv = document.getElementById('titleNewEntryTemp');
    bodyDiv = document.getElementById('bodyNewEntryTemp');
    entryDiv.id = 'main' + self.saveId;
    titleDiv.id = 'title' + self.saveId;
    bodyDiv.id = 'body' + self.saveId;
    entryDiv.ondblclick = self.toggleEditInPlace;
    self.saveId = '';
  };
};
 
window.onload = Blog.init;

Open in new window

0
monica73174
Asked:
monica73174
1 Solution
 
ZvonkoSystems architectCommented:
Check this:
<div id="allEntryDiv"><cfoutput query="getcomments">#comment#</cfoutput></div>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now