Output code modification..? Div doesn't display..?
JonGirard - January 20, 2008 - 08:50
Hi,
I'm trying to change some code outputted by one of my modules (chat-block). It is currently outputting this code in the web browser.
(1)
<div class="chatblockwrapper"><div id="chatblock_block"><div style="width: 95%; display: block;"><span style="color: red">Admin: </span> Message 1 submitted by user</div><div style="width: 95%; display: block;"><span style="color: red">Admin: </span> Message 2 submitted by user</div><div style="width: 95%; display: block;"><span style="color: red">Admin: </span> Message 3 submitted by user</div><div style="width: 95%; display: block;"><span style="color: red">Admin: </span> Message 4 submitted by user</div><div style="width: 95%; display: block;"><span style="color: red">Admin: </span> Message 5 submitted by user</div><br class="endchatblock" /></div></div><div id="chatblocklastmessage" style="display: none;">120081922245</div></div>In theory the style (color:red, width:95%..etc) should all be very easy to modify from chatblock.js.
// $Id$
// global variable to keep track of responses from the server
var _chatblock_response_timestamps = new Array();
/**
* This function scrolls the div to the bottom, buggy in Opera so we add a <br /> to the bottom of our div
*/
function chatboxInitScroll() {
var objDiv = document.getElementById("chatblock_block");
// all but Explorer Mac
if (objDiv.scrollHeight > 0) {
objDiv.scrollTop = 0;
objDiv.scrollTop = objDiv.scrollHeight - objDiv.offsetHeight;
}
// Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
else {
objDiv.scrollTop = objDiv.offsetHeight;
}
}
/**
* This function checks for new messages at the rate specified by the user
*/
function chatboxGetMessage() {
// we could use a jQuery selector here, but why bother?
var timestamp = document.getElementById("chatblocklastmessage").innerHTML;
// create the message to send to the server, including a random token so IE won't cache the response
var message = "×tamp=" + timestamp + "&chatboxtoken=" + Math.random();
// send the data to the server
$.ajax({ type: "POST", url: chatBlockViewURL, data: message, success: function(text) { chatblockResponse(text); } });
}
/**
* This function handles the json response from the server
* We were using an html response, but occasionally we receive duplicate responses
* so we need to be able to keep track of the timestamps, which is easier using json
*/
function chatblockResponse(jsonStringResponse) {
// if we have received a response
if (jsonStringResponse != "") {
// try and evaluate the response
try {
// can we parse the response?
var messages = eval("(" + jsonStringResponse + ")");
}
catch(e) {
// if not, use an empty array
var messages = new Array();
}
// if we have any message responses, check to make sure we haven't seen them already
for (var timestamp in messages) {
if (timestamp == 0) {
// update the last timestamp
// we have to remove the m added to provide Opera support because of a bug in how Opera handles json Response text with large integers
document.getElementById("chatblocklastmessage").innerHTML = messages[timestamp].replace('m', '');
}
else {
if (_chatblock_response_timestamps.indexOf(timestamp) > -1 ) {
// do nothing, this is a message that has been added already
}
else {
// add the message to the display window
$("#chatblock_block").children("br").before('<div style="width: 100%; display: block; height:28px; padding-top:5px; padding-bottom:10px; background-image: url(sites/all/themes/BDC/chatbubblebg.png);"><span style="color: red">' + messages[timestamp]['username'] + ': </span> ' + messages[timestamp]['message'] + '</div>');
// keep track of the current messages
_chatblock_response_timestamps.push(timestamp);
}
}
}
// if we have any messages, make sure to scroll to the bottom of the div
chatboxInitScroll();
}
document.getElementById("edit-chatblocksubmit").disabled = false;
return;
}
/**
* This function is called when the user wants to send a message to the database
* It expects the server to response with any new messages (including the users message, filtered)
*/
function chatblockSend(el) {
// disable the submit button so the user can't submit twice
el.disabled = true;
// get the current timestamp
// we could use a jQuery selector here, but why bother?
var timestamp = document.getElementById("chatblocklastmessage").innerHTML;
// build the message to send to the database, make sure to use a random token to prevent IE from caching the response
var message = "×tamp=" + timestamp + "&chatboxtoken=" + Math.random() + "&message=" + document.getElementById("edit-chatblocktext").value;
// empty out the value of the textfield the user sent his message from
document.getElementById("edit-chatblocktext").value = "";
// send the message
$.ajax({ type: "POST", url: chatBlockUpdateURL, data: message, success: function(text) { chatblockResponse(text); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.error(XMLHttpRequest.status); } });
// don't submit the form regularly
return false;
}
/**
* IE sucks - need to add indexOf method for arrays
*/
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj) {
return i;
}
}
return -1;
}
}As you can see, i've added
height:28px; padding-top:5px; padding-bottom:10px; background-image: url(sites/all/themes/BDC/chatbubblebg.png);" to be outputted to the browser.
I need help with this one please!
Jon.
Didn't quite finish off that
Didn't quite finish off that post. My problem is, that even when I've added that to the javascript file, it still isn't outputted, and continues to output as (1). I can't style this with css because I need to be able to add a background image behind each new chat/ message, and it wouldn't be possible because they don't have their own identifiers.
Silly question
I've not read through all that code - but the first thing to ask is have you cleared your browser's cache? Most browsers will cache javascript files locally - so even if you have changed the file your browser might still be using an old version ...
Mike,
Computerminds offer Drupal development, consulting and training
yup several times. After
yup several times. After staring at the code for a few more hours, I'm beginning to think that this is why it's not working.
It executes in these steps:
1) first gets and stores the block:95 % from some other location.
2) upon form submittal, it replaces that with the new block info, added in the code
3) once all this is done, and people are viewing it normally (as if they were anoymously) it just retrieves the stored info.. which perhaps it's getting from another file even..?
I'm not too sure, but I'm beginning to think that's what's going on here. So, what I might just up end up doing is trying to get it to output just 1 new line of code rather than the 5 statements I've added. Even outputting 1 new div would work...
Jon.
bump
*BUMP