Using .draggable tag break safari select form elements
I have to admit I am a newbie to this.
I am developing an Ajax Page for a sheet music library.
I am returning a big load of InnerHTML back from the Ajax script.
If I Comment out the .draggable part of my InnerHTML works fine but with .draggable switched on it effectively disables the Select Boxes if Safari, FF works fine. also I am on a mac so I dont know if it works in IE Yet.
I am still a long way from completing this page at the moment but this draggable issue is holding me back. I think it has to do with addressing the certain area of the page but i just don't know.
the Page
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>My Music Media Library -Welcome</title>
<link href="WebOne.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' type='text/css' href='quickmenu.css'/>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.draggable.js"></script>
<script src="http://ui.jquery.com/testing/ui/ui.resizable.js"></script>
<script type='text/javascript'>
function getDownload(MIID){
document.downloader.FileID.value = MIID;
document.downloader.submit();
}
function RetrieveInformation(theScript, spinner, icon, id){
// console.log(theScript + " " + spinner +" " + icon + " " + id);
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if(window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
toggle_visibility(spinner+id);
toggle_visibility(icon+id);
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("POST", theScript, true);
XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var sendData = 'SSID=23b04af9fd6ebce1f672a653625e6002&id=' + id;
//alert(sendData);
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){
var xmlDocument, keydatanodes, infonodes;
xmlDocument = XMLHttpRequestObject.responseXML;
infonodes = xmlDocument.getElementsByTagName("theData");
// alert("infonodes.length = :" + infonodes.length);
for(var i=0; i<infonodes.length; i++){
if(infonodes[i].attributes.getNamedItem("theType").nodeValue =='AlertBox'){
alert(infonodes[i].firstChild.nodeValue);
}
if(infonodes[i].attributes.getNamedItem("theType").nodeValue =='replace'){
document.getElementById(infonodes[i].attributes.getNamedItem("id").nodeValue).innerHTML = infonodes[i].firstChild.nodeValue;
}
if(infonodes[i].attributes.getNamedItem("theType").nodeValue =='append'){
document.getElementById(infonodes[i].attributes.getNamedItem("id").nodeValue).innerHTML = document.getElementById(infonodes[i].attributes.getNamedItem("id").nodeValue).innerHTML+infonodes[i].firstChild.nodeValue;
}
if(infonodes[i].attributes.getNamedItem("theType").nodeValue =='showID'){
document.getElementById(infonodes[i].attributes.getNamedItem("id").nodeValue).style.display = 'block';
}
if(infonodes[i].attributes.getNamedItem("theType").nodeValue =='hideID'){
document.getElementById(infonodes[i].attributes.getNamedItem("id").nodeValue).style.display = 'none';
}
}
toggle_visibility(spinner+id);
toggle_visibility(icon+id);
}
}
XMLHttpRequestObject.send(sendData);
}
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
function getInformation(id){
alert(document.getElementById('EditTable_' + id).scrollTop);
}
function SelTemplateOpts(val){
alert(val);
}
$(document).ready(function(){
$(".FloatInfoBox").draggable();
$(".FloatEditBox").draggable({ handle: "span.TopDragBar" });
//$(".EditTable").disableSelection();
//$(".FloatEditBox").draggable({ cancel: "div.EditTable" });
//$(".FloatEditBox").draggable({ cancel: "table.instrumentationEditor" });
//$("#FloatEditBlock_5").resizable();
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="/MMMLibrary/index.php">
<input type="hidden" name="SortCol" value="ID|ASC"/>
<input type="hidden" name="PageNum" value="1"/>
<table class="whole">
<tr>
<td><div align="center" class="Banner"> My Music Media Library (Version 1)</div></td>
</tr>
.. More Code
<tr>
<td>
<table>
... More Code deleted
<tr class="even"><td class="DetailCell"><div class="MI_ID">1</div></td><td class="DetailCell"><div class="Title">1237 On A Saturday Afternoon</div></td><td class="DetailCell"></td><td class="DetailCell"></td><td class="DetailCell"><div class="arranger">Gary Persons</div></td><td class="DetailCell"></td><td class="DetailCell"></td><td class="DetailCell"><div class="NumPages">72</div></td><td><div class="FloatInfoBox" id="TextBlock_1" style="display: none;"></div><div id='example' class="ui-wrapper example"><div class="FloatEditBox" id="FloatEditBlock_1" style="display: none;"></div></div></td><td class="DetailCell"><span class = "spinner" id="spinI_1" style="display: none;"><img border="0"
src="WebAssets/Spinner_16.gif" alt="Process Proof" width="16" height="16" border="0"/></span><span id="infobutton_1" style="display: block;"><img src="./WebAssets/log-info.gif" alt="information" onClick="javascript:RetrieveInformation('AJ_Information.php', 'spinI_','infobutton_', '1');" /></span></td><td><span class = "varlinks"><span class = "spinner" id="spinE_1" style="display: none;"><img border="0"
src="WebAssets/Spinner_16.gif" alt="Process Proof" width="16" height="16" border="0"/></span><span id="EditButton_1" style="display: block;"><img src="./WebAssets/stock_edit-16.png" alt="phpMyAdmin" id="imgpmalogo" onClick="javascript:RetrieveInformation('AJ_UpdateMusic.php', 'spinE_','EditButton_', '1');"/> </span></td><td><div class="dlb"><span><a class="downloadbutton" href="javascript: getDownload('1');"><b>Download</b> <i>3.431 MB</i></a></div> </td></tr>
<tr class="odd"><td class="DetailCell"><div class="MI_ID">2</div></td><td class="DetailCell"><div class="Title">20 Nickels</div></td><td class="DetailCell"></td><td class="DetailCell"></td><td class="DetailCell"><div class="arranger">Doug Beech</div></td><td class="DetailCell"></td><td class="DetailCell"></td><td class="DetailCell"><div class="NumPages">46</div></td><td><div class="FloatInfoBox" id="TextBlock_2" style="display: none;"></div><div id='example' class="ui-wrapper example"><div class="FloatEditBox" id="FloatEditBlock_2" style="display: none;"></div></div></td><td class="DetailCell"><span class = "spinner" id="spinI_2" style="display: none;"><img border="0"
src="WebAssets/Spinner_16.gif" alt="Process Proof" width="16" height="16" border="0"/></span><span id="infobutton_2" style="display: block;"><img src="./WebAssets/log-info.gif" alt="information" onClick="javascript:RetrieveInformation('AJ_Information.php', 'spinI_','infobutton_', '2');" /></span></td><td><span class = "varlinks"><span class = "spinner" id="spinE_2" style="display: none;"><img border="0"
src="WebAssets/Spinner_16.gif" alt="Process Proof" width="16" height="16" border="0"/></span><span id="EditButton_2" style="display: block;"><img src="./WebAssets/stock_edit-16.png" alt="phpMyAdmin" id="imgpmalogo" onClick="javascript:RetrieveInformation('AJ_UpdateMusic.php', 'spinE_','EditButton_', '2');"/> </span></td><td><div class="dlb"><span><a class="downloadbutton" href="javascript: getDownload('2');"><b>Download</b> <i>2.391 MB</i></a></div> </td></tr>
<tr class="even"><td class="DetailCell"><div class="MI_ID">3</div></td><td class="DetailCell"><div class="Title">2002 Zarathustrevisited</div></td><td class="DetailCell"></td><td class="DetailCell"></td><td class="DetailCell"><div class="arranger">Dale Devoe</div></td><td class="DetailCell"></td><td class="DetailCell"></td><td class="DetailCell"><div class="NumPages">62</div></td><td><div class="FloatInfoBox" id="TextBlock_3" style="display: none;"></div><div id='example' class="ui-wrapper example"><div class="FloatEditBox" id="FloatEditBlock_3" style="display: none;"></div></div></td><td class="DetailCell"><span class = "spinner" id="spinI_3" style="display: none;"><img border="0"
src="WebAssets/Spinner_16.gif" alt="Process Proof" width="16" height="16" border="0"/></span><span id="infobutton_3" style="display: block;"><img src="./WebAssets/log-info.gif" alt="information" onClick="javascript:RetrieveInformation('AJ_Information.php', 'spinI_','infobutton_', '3');" /></span></td><td><span class = "varlinks"><span class = "spinner" id="spinE_3" style="display: none;"><img border="0"
src="WebAssets/Spinner_16.gif" alt="Process Proof" width="16" height="16" border="0"/></span><span id="EditButton_3" style="display: block;"><img src="./WebAssets/stock_edit-16.png" alt="phpMyAdmin" id="imgpmalogo" onClick="javascript:RetrieveInformation('AJ_UpdateMusic.php', 'spinE_','EditButton_', '3');"/> </span></td><td><div class="dlb"><span><a class="downloadbutton" href="javascript: getDownload('3');"><b>Download</b> <i>6.211 MB</i></a></div> </td></tr>
....
</table>
</td>
</tr>
</table>
</form>
<form name="downloader" method="post" action="DownloadMMMLibraryFile.php" target="_blank">
<input type="hidden" name="FileID" value=""/>
</form>
</body>
</html>
Returned XML From the AJAX Query
-
<?xml version="1.0" ?>
<updateconfirmation>
<theData theType="append" id="FloatEditBlock_90"><span class="TopDragBar"><img
src="WebAssets/LittleGreyBlueX.jpg" alt="Close Me" width="16" height="16" border="0" onmouseup="javascript: document.getElementById('FloatEditBlock_90').style.display = 'none';" style="position: absolute; top: 2px; right: 3px;"/>
Ain't Misbehavin'</span><div class="EditTable" id="EditTable_90"><table>
<tr><td class="infofield">MI_ID</td><td class="valuefield"><input type="text" name="MI_ID" value="90" disabled="disabled"/></td><td class="infofield">MusicCategory</td><td class="valuefield"><input type="text" name="MusicCategory" value="Big Band"/></td></tr><tr><td class="infofield">MI_Title</td><td class="valuefield" colspan="3"><input type="text" name="MI_Title" value="Ain't Misbehavin'" maxlength="100" size="60"/></td></tr><tr><td class="infofield">MI_GroupOwnerID</td><td class="valuefield"><input type="text" name="MI_GroupOwnerID" value="1" disabled="disabled"/></td><td class="infofield">MI_CompArrLinked</td><td class="valuefield"><input type="text" name="MI_CompArrLinked" value="No"/></td></tr><tr><td class="infofield">MI_Lyricist</td><td class="valuefield"><input type="text" name="MI_Lyricist" value="" /></td><td class="infofield">MI_SizeBytes</td><td class="valuefield"><input type="text" name="MI_SizeBytes" value="1692036"/></td></tr><tr><td class="infofield">MI_Composer</td><td class="valuefield"><input type="text" name="MI_Composer" value="" /></td><td class="infofield">MI_NumPages</td><td class="valuefield"><input type="text" name="MI_NumPages" value="23"/></td></tr><tr><td class="infofield">MI_Arranger</td><td class="valuefield"><input type="text" name="MI_Arranger" value="Rusty Dedrick"/></td><td class="infofield">MI_PageWidth</td><td class="valuefield"><input type="text" name="MI_PageWidth" value="613.44"/></td></tr><tr><td class="infofield">MI_Transcriber</td><td class="valuefield"><input type="text" name="MI_Transcriber" value="" /></td><td class="infofield">MI_PageHeight</td><td class="valuefield"><input type="text" name="MI_PageHeight" value="842.88"/></td></tr><tr><td class="infofield">MI_OriginalArtist</td><td class="valuefield" colspan="3"><input type="text" name="MI_OriginalArtist" value="" /></td></tr><tr><td class="infofield">MI_PDFFilePath</td><td class="valuefield" colspan="3"><input type="text" name="MI_PDFFilePath" value="/A/Ain't Misbehavin' -Rusty Dedrick.pdf" maxlength="100" size="60"/></td></tr><tr><td class="infofield">MI_MP3FilePath</td><td class="valuefield" colspan="3"><input type="text" name="MI_MP3FilePath" value="" maxlength="100" size="60" /></td></tr><tr><td class="infofield">MI_Notes</td><td class="valuefield" colspan="3"><textarea rows="10" cols="80" name="MI_Notes"></textarea></td></tr></table>
<table class="instrumentationEditor">
<tr ><td colspan="5" class="instrumentationHeader">Instrumentation</td></tr><tr><td class="InstrumentationSelect">Instrumentation</td><td class="OrderAndFlushButtons">&nbsp;</td><td class="ColSpacer">&nbsp;</td><td class="TemplateFlushButtons">&nbsp;</td><td class="TemplateSelect">TemplateSelect</td></tr>
<tr><td><select name="Instrumentation" onChange="javascript:void(0);" size="30"><option value="316">1st Baritone Saxophone in Bb</option>
<option value="315">1st Baritone Saxophone in Bb</option>
<option value="166">1st Baritone Saxophone in Bb</option></select></td><td class="OrderAndFlushButtons"><a href="#" ><span class="buttonIMG"><img src="WebAssets/go-up.png" /></span></a><br /><a href="#" ><span class="buttonIMG"><img src="WebAssets/doubleArrowRight.png" /></span></a><br /><a href="#" ><span class="buttonIMG"><img src="WebAssets/go-down.png" /></span></a><br /></td><td>&nbsp;</td><td><a href="#" ><span class="buttonIMG"><img src="WebAssets/doubleArrowLeft.png" /></span></a></td><td><select name="OrchTemplates" onchange="SelTemplateOpts(this.value);"><option value="1">--</option>
<option value="aa">Instrument List</option><option value="bb">Standard Quintet</option></select><select multiple="multiple" name="TemplateItems" size="28" ><option value="1">Instrument 1</option><option value="2">Instrument 2</option><option value="3">Instrument 3</option><option value="4">Instrument 4</option><option value="5">Instrument 5</option><option value="6">Instrument 6</option><option value="7">Instrument 7</option></select></td></tr></table>
<br /><a href="javascript:void(0);" onmouseup="getInformation('90');" ><span class="button" >DebugInfo</span></a><a href="#" ><span class="button" >Submit &amp; Close</span></a><a href="#" ><span class="button">Submit</span></a></div></theData>
<theData theType="showID" id="FloatEditBlock_90">!!!</theData>
</updateconfirmation>
This Code as the innerHTML Looks like this
-
<span class="TopDragBar"><img src="WebAssets/LittleGreyBlueX.jpg" alt="Close Me" width="16" height="16" border="0" onmouseup="javascript: document.getElementById('FloatEditBlock_90').style.display = 'none';" style="position: absolute; top: 2px; right: 3px;"/> Ain't Misbehavin'</span><div class="EditTable" id="EditTable_90"><table> <tr><td class="infofield">MI_ID</td><td class="valuefield"><input type="text" name="MI_ID" value="90" disabled="disabled"/></td><td class="infofield">MusicCategory</td><td class="valuefield"><input type="text" name="MusicCategory" value="Big Band"/></td></tr><tr><td class="infofield">MI_Title</td><td class="valuefield" colspan="3"><input type="text" name="MI_Title" value="Ain't Misbehavin'" maxlength="100" size="60"/></td></tr><tr><td class="infofield">MI_GroupOwnerID</td><td class="valuefield"><input type="text" name="MI_GroupOwnerID" value="1" disabled="disabled"/></td><td class="infofield">MI_CompArrLinked</td><td class="valuefield"><input type="text" name="MI_CompArrLinked" value="No"/></td></tr><tr><td class="infofield">MI_Lyricist</td><td class="valuefield"><input type="text" name="MI_Lyricist" value="" /></td><td class="infofield">MI_SizeBytes</td><td class="valuefield"><input type="text" name="MI_SizeBytes" value="1692036"/></td></tr><tr><td class="infofield">MI_Composer</td><td class="valuefield"><input type="text" name="MI_Composer" value="" /></td><td class="infofield">MI_NumPages</td><td class="valuefield"><input type="text" name="MI_NumPages" value="23"/></td></tr><tr><td class="infofield">MI_Arranger</td><td class="valuefield"><input type="text" name="MI_Arranger" value="Rusty Dedrick"/></td><td class="infofield">MI_PageWidth</td><td class="valuefield"><input type="text" name="MI_PageWidth" value="613.44"/></td></tr><tr><td class="infofield">MI_Transcriber</td><td class="valuefield"><input type="text" name="MI_Transcriber" value="" /></td><td class="infofield">MI_PageHeight</td><td class="valuefield"><input type="text" name="MI_PageHeight" value="842.88"/></td></tr><tr><td class="infofield">MI_OriginalArtist</td><td class="valuefield" colspan="3"><input type="text" name="MI_OriginalArtist" value="" /></td></tr><tr><td class="infofield">MI_PDFFilePath</td><td class="valuefield" colspan="3"><input type="text" name="MI_PDFFilePath" value="/A/Ain't Misbehavin' -Rusty Dedrick.pdf" maxlength="100" size="60"/></td></tr><tr><td class="infofield">MI_MP3FilePath</td><td class="valuefield" colspan="3"><input type="text" name="MI_MP3FilePath" value="" maxlength="100" size="60" /></td></tr><tr><td class="infofield">MI_Notes</td><td class="valuefield" colspan="3"><textarea rows="10" cols="80" name="MI_Notes"></textarea></td></tr></table> <table class="instrumentationEditor"> <tr ><td colspan="5" class="instrumentationHeader">Instrumentation</td></tr><tr><td class="InstrumentationSelect">Instrumentation</td><td class="OrderAndFlushButtons"> </td><td class="ColSpacer"> </td><td class="TemplateFlushButtons"> </td><td class="TemplateSelect">TemplateSelect</td></tr> <tr><td><select name="Instrumentation" onChange="javascript:void(0);" size="30"><option value="316">1st Baritone Saxophone in Bb</option> <option value="315">1st Baritone Saxophone in Bb</option> <option value="166">1st Baritone Saxophone in Bb</option></select></td><td class="OrderAndFlushButtons"><a href="#" ><span class="buttonIMG"><img src="WebAssets/go-up.png" /></span></a><br /><a href="#" ><span class="buttonIMG"><img src="WebAssets/doubleArrowRight.png" /></span></a><br /><a href="#" ><span class="buttonIMG"><img src="WebAssets/go-down.png" /></span></a><br /></td><td> </td><td><a href="#" ><span class="buttonIMG"><img src="WebAssets/doubleArrowLeft.png" /></span></a></td><td><select name="OrchTemplates" onchange="SelTemplateOpts(this.value);"><option value="1">--</option> <option value="aa">Instrument List</option><option value="bb">Standard Quintet</option></select><select multiple="multiple" name="TemplateItems" size="28" ><option value="1">Instrument 1</option><option value="2">Instrument 2</option><option value="3">Instrument 3</option><option value="4">Instrument 4</option><option value="5">Instrument 5</option><option value="6">Instrument 6</option><option value="7">Instrument 7</option></select></td></tr></table> <br /><a href="javascript:void(0);" onmouseup="getInformation('90');" ><span class="button" >DebugInfo</span></a><a href="#" ><span class="button" >Submit & Close</span></a><a href="#" ><span class="button">Submit</span></a></div>
All this code Works Fine In FF but not in Safari.
If you click into the Select Box you get ignored
I could put it online if you need to take a look at what is going on!
Thanks again (maybe!)