Ajax

[i23098]

I believe that a great feature that is missing is AJAX support... dhtmlgoodies.com has one, but it isn't nearly as cool as BoxOver. Maybe someone could grab some ideas from their code and implement AJAX support in BoxOver

[keul]

Originally Posted by i23098

I believe that a great feature that is missing is AJAX support... dhtmlgoodies.com has one, but it isn't nearly as cool as BoxOver. Maybe someone could grab some ideas from their code and implement AJAX support in BoxOver

Ajax support for what exactly?

[BoxOverFan]

Q: Ajax support for what exactly?

A: I currently have a need to use AJAX to dynamically update the content of the BoxOver content. In the box, I have a list of files with their current statuses base on a process that is running in the background. I would like the users to be able to mouse over the <div> tag element and see the statuses being updated in real-time.

However, if there is a way to see the content being dynamically updated while the mouse is kept over the <div> tag element would be very helpful.

Any suggestion would be greatly appreciated.

[Oddsen84]

Hopfuly you read this HH I need your help. You explain that its possible to update the boxovers but not how you make the "call". If you would pleas help my by posting here or elswere on this forum explaining how you did it that would be much appreciated.

Originally Posted by HenryHartley

Warning: Long Reply

The two (boxover and AJAX) overlap and I have a boxover that is modified by the results of an AJAX call. In my case, I think I found the perfect storm of all the big problems. I have an application used by reporters to submit data from hospitals which contains a select list that isn't quit your standard select list. I need my reporters to pick from a list of about 15,000 substances. They start typing in a text box and the two select boxes (which are initially empty) are populated with substances beginning with the string they type. In the first attached image (see below) you can see what they would see if they type the three letters "coc". If they put their mouse over the question mark next to a substance (see the second attached image) an AJAX request goes back to the server and gets information about that substance which then appears in a boxover box.

This could, obviously, all be loaded into the same array that holds the list of substances and IDs but that array is big enough as it is. They do need the entire list of IDs to be immediately available but the detail on a substance is something they look up relatively infrequently -- at least compared to loading the entire list of 15,000 each time they load the page.

There's a lot going on here. In the underlying HTML code there is a table around the two select boxes that adds the question mark images next to each select option line. Each image tag looks something like this:

<img id="qm01" src="qm.gif" width="13" height="14" alt="" class="drug-qm" TITLE="header=[] delay=[500] drug_id=[] body=[] coverselects=[on]">

Note that there isn't anything in the header, drug_id, or body fields. As a side issue, I first did this directly in the select option tags. It worked well in Firefox but unfortunately in I.E. boxover will not work on the options in a select list. As far as I know, there isn't a fix for that. Using the little question marks seems to get around it well enough.

Also, I had to work around the way Microsoft puts select objects on top of all other objects. That led me to develop the coverselect version of boxover, which a few others added to. You can read about that here.

There is an OnKeyup event that watches for typing in the yellow box. As each letter is typed, some Javascript looks for the first entry in an array that matches what has been typed. In then updates the contents of the select option elements to contain that and the 17 following substances in the two select boxes. The TITLE code for each option is also changed so it contains something like this (with drug name, drug id, and offSetX being set by the code):

header=[Codafed] drug_id=[14054] body=[...getting information about Codafed.] delay=[700] offsetx=[400] coverselects=[on]

So far, so good, we've updated the value of HEADER but at this point, boxover doesn't know about it. So, I made a new function in boxover.js that's similar to scanBO() which I called reScanBO().

function reScanBO(curNode) {
	curNode.boBDY = getParam('body',curNode.title);
	curNode.DrugID = getParam('drug_id',curNode.title)
	curNode.boHDR = getParam('header',curNode.title);
	curNode.IEbugfixcover = (getParam('coverselects',curNode.title)=='on')?true:false;
	curNode.offX = (getParam('offsetx',curNode.title) != '' ) ? parseInt(getParam('offsetx',curNode.title)) : 10;
	curNode.title='';
	curNode.hasbox=1;
}

That gets fired after the HEADER contents are updated so that the boxover will have the new, updated contents. But, we haven't done any AJAX yet. That happens next. In the moveMouse() function (boxover.js) I modified and added a few lines that set the visibility of the boxover box.

IDPopup = setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);
IDAjax  = setTimeout("makeRequest("+CSE.DrugID+")",CBE.delay);
/* snip */
IDPopup = setTimeout("oDv.style.visibility='visible';IDPopup=null;",CBE.delay);
IDAjax  = setTimeout("makeRequest("+CSE.DrugID+")",CBE.delay);

Naturally it wasn't quite as simple as that since I'd renamed ID to IDPopup and added IDAjax so I needed to change and insert some other lines accordingly. I'll leave that as an exercise for the reader. As you can see on the two IDAjax lines, I call a Javascript function called makeRequest() which takes a single parameter, the drug ID. There are lots of examples of AJAX code around so I won't go into that but suffice it to say that I send that ID to a script on the server which returns a short bit of XML containing information about the substance. The data in the XML are formatted into whatever HTML I want and put into a variable called newBody. Finally, the content newBody is put into drug_info_box, the body of my boxover box, replacing the ...getting information about... text. That's done with the following code (Firefox vs I.E.):

if ( document.getElementById('drug_info_box') != null ) {
	document.getElementById('drug_info_box').innerHTML = newBody ;
} else if ( document.all.drug_info_box != null ) {
	document.all.drug_info_box.innerHTML = newBody ;
}

So, can boxover and AJAX play together? Absolutely. It's a little more involved that what I've described. There are changes to the init() function, for instance. Some of my solutions are implementation specific and could probably be made more generic. But it works. Note also that my client specifically wanted the very basic, non-fancy boxes but they could be dressed up if that was desired.

Enjoy.

-- Henry

[HenryHartley]

Originally Posted by Oddsen84

Hopfuly you read this HH I need your help. You explain that its possible to update the boxovers but not how you make the "call". If you would pleas help my by posting here or elswere on this forum explaining how you did it that would be much appreciated.

First, you don't really need to quote my entire message in your reply. Second, since I wrote up what I did in reasonable detail, it isn't clear from your message what is missing. If you have a specific question, I'd be happy to see what I can do.

[DBone]

I think he has the same problem.

I´m loading Data with Ajax for an Item-Tooltip (Like the ones in Games).
So I´m loading the Data with Ajax in this way:

function loadTooltip(file) {
gid = file;
if (http != null) {
http.open("GET", "item_"+ file + ".txt", true);
http.onreadystatechange = output;
http.send(null);
}

function output() {
if (http.readyState == 4) {
document.getElementById("output" + gid).title = http.responseText;
} else {
document.getElementById("output" + gid).title = "header=[Loading...] body=[please wait...]";
}
}

But if I mouseover the Item, the "Loading... please wait" text apears and not the tooltip. But if I stay over, the normal title function from Firefox or any other Browser appears and the text, which is loaded through Ajax, is shown.

Screenshot

How can I make that work, so the Loading text appears when it is loading, and the Item-Text is shown when loading is done ?

I think it´s just a simple refreshing function after I set the title to the Item-Text, but I don´t know how I do that.


I´ve read the text above, but it is too specific for your site, I don´t get it work.


Can anyone help ?