|
JavaScript - Stop Multiple Onclicks From Firing On Layerd Divs
I'm writing a GUI css/html editor in JavaScript which is a litte ambitious considering I just started with js like a month ago. Here's my first hurdle:
Users can add divs simply by clicking on the div or element in which they want the new div to reside. The creation of a new div is in the onclick event. However, when I click on a div, I'm getting an onclick events from it and all the divs positions below it, so it's creating multiple new divs and all I want is one! Is there any way to make the onclick even fire for just the top layer div? Maybe using the z-index or something? Please help if you can - I couldn't find anything related to this at all. Thanks Similar TutorialsHello all, I have a question regarding onmouseover on "a" tag. I currently have a list of "img" thumbnails which have onMouseOver attached to the "a" tag which wraps the "img". When the mouse is over the image, a "preview" of the image will load in another div via a javascript function, this javascript function has a jquery fadeto effect so the preview will fade into view. The problem now is if a user hover over multiple thumbnails quickly, the onMouseOver event is registered multiple times, so when the user finally stop hovering over multiple thumbnails quickly, the last thumbnail will receive the event multiple times and fades in not only once. Below is my code: function previewimage(loadimg){ jloadimg='<img src="../images/'+loadimg+'.png" />'; //stimulate a fade in effect by making the image has 0.7 opacity first $(#largeimage).fadeTo('fast', 0.7, function() { }); $(#largeimage).fadeTo('slow', 1, function() { }); document.getElementById('largeimage').innerHTML=jloadimg; } for the list of thumbnail images, I have: <a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a> <a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a> <a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a> How do I cancel multiple event from running continuosly if the previous one is still in queue? Hello all, First I apologize if this has been answered. I did a quick search on the forums but found nothing that related entirely to this issue, also did a google search and found no entirely relevant posts. For those posts I did come across I tried various hacks (including holly hacks and setting background-colors) but nothing worked. I'm not a web guru, so please feel free to pick apart and make suggestions for my code. I have a table style div. Now I'm aware that table-style divs are in no way supported by any IE yet, so I have a CC that implements similar layout for all the IEs. My issue is that this div is generated by javascript on jQuery's document ready. The div has a bunch of row divs, and below that it has cell divs. The cell divs are generated with an onclick attribute before they appended to the row divs. This works in all browsers except IE. This code occurs in a for loop that creates a row and then inserts 7 'day divs' (where the row represents a week). Code: var thisDay = document.createElement('div');
if (curMonth != viewMonth)
{
thisDay.className = 'JSCalViewNCMD';
}
thisDay.innerHTML = curDay.toString();
thisDay.onclick = "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");";
thisDay.setAttribute('onclick', "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");");
//dayDivs.push(thisDay);
curEl.appendChild(thisDay);
curDay++;
if (curDay > curDayLimit)
{
curDay = 1
curMonth++;
if (curMonth === 12)
{
curMonth = 0;
curYear++;
}
curDayLimit = JSCalendarGetMonthLength(curMonth);
if (curMonth === 1 && curYear % 4 === 0)
{
curDayLimit = 29;
}
}
This is the resulting generated HTML that IE developer window reports: Code: <div class="JSCal"> <DIV class=JSCalViewName> <H3>June 2010</H3></DIV> <DIV class=JSCalViewArea> <DIV> <H4>S</H4> <H4>M</H4> <H4>T</H4> <H4>W</H4> <H4>T</H4> <H4>F</H4> <H4>S</H4></DIV> <DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',23,-1);">23</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',24,-1);">24</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',25,-1);">25</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',26,-1);">26</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',27,-1);">27</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',28,-1);">28</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',29,-1);">29</DIV></DIV> <DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',30,-1);">30</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',31,-1);">31</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',1,0);">1</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',2,0);">2</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',3,0);">3</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',4,0);">4</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',5,0);">5</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',6,0);">6</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',7,0);">7</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',8,0);">8</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',9,0);">9</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',10,0);">10</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',11,0);">11</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',12,0);">12</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',13,0);">13</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',14,0);">14</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',15,0);">15</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',16,0);">16</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',17,0);">17</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',18,0);">18</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',19,0);">19</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',20,0);">20</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',21,0);">21</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',22,0);">22</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',23,0);">23</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',24,0);">24</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',25,0);">25</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',26,0);">26</DIV></DIV> <DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',27,0);">27</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',28,0);">28</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',29,0);">29</DIV> <DIV onclick="javascript:JSCalendarHandleSelection(this,'cal1',30,0);">30</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',1,1);">1</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',2,1);">2</DIV> <DIV class=JSCalViewNCMD onclick="javascript:JSCalendarHandleSelection(this,'cal1',3,1);">3</DIV></DIV></DIV> However the onclicks do not fire! No errors are generated by my code in any of the browsers. The code works in the most up to date firefox, chrome, opera, and safari for windows. I'm at a loss at what to do now... I have 5 divs fading in a slideshow with the crossfade js. This basically fades the opacity of each div and loops the 5 divs so that it continues to fade from the 5th to the first and so on... Is there a way for me to end the fade at the 5th div so that it does not loop? Here is the code for the JS: // JavaScript Document // CrossFader var x; if (x) { if (typeof(cf) == "undefined") var cf; } else { var cf = this; } cf.fader = function (obj, fadetime, delay) { this.el2 = -1; this.id = obj; for (i=0; i<obj.length; i++) { var s = document.getElementById(obj[i]).style; s.position = "absolute"; s.visibility = "hidden"; s.opacity = 0; s.filter = "alpha(opacity=0)"; } this.dur = fadetime; this.delay = delay; this.fade2(); } cf.fader.prototype.fade1 = function() { this.time += this.interval; var ieop = Math.round(this.fade(this.time, 0, 1, this.dur) * 100); var op = ieop / 100; var s = document.getElementById(this.id[this.el2]).style; s.opacity = op; s.filter = "alpha(opacity="+ieop+")"; if (this.el1 > -1) { var s = document.getElementById(this.id[this.el1]).style; s.opacity = 1 - op; s.filter = "alpha(opacity="+(100 - ieop)+")"; } if (this.time == this.dur) { clearInterval(this.id1); if (this.el1 > -1) document.getElementById(this.id[this.el1]).style.visibility = "hidden"; var t=this; this.id2 = setInterval(function() {t.fade2()}, this.delay); } } cf.fader.prototype.fade2 = function() { if (this.id2) clearInterval(this.id2); this.el1 = this.el2; this.el2++; if (!this.id[this.el2]) this.el2 = 0; if (this.el2 == this.el1) return false; document.getElementById(this.id[this.el2]).style.visibility = "visible"; this.interval = 50; this.time = 0; var t=this; this.id1 = setInterval(function() {t.fade1()}, this.interval); } cf.fader.prototype.fade = function(t,b,c,d) { return c/2 * (1 - Math.cos(Math.PI*t/d)) + b; } and here is the html markup: <div id="fader"> <div id="fade1"> <h1>1</h1> </div> <div id="fade2"> <h1>2</h1> </div> <div id="fade3"> <h1>3</h1> </div> <div id="fade4"> <h1>4</h1> </div> <div id="fade5"> <h1>5</h1> </div> </div> <script type="text/javascript"> // ids, fade length, display time var fadeIt = new fader(new Array("fade1", "fade2", "fade3", "fade4", "fade5"), 2000, 4000); </script> Any help on how to end the loop would be greatly appreciated!!! I am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. Hi Experts, I have a fixed size area.called a container tag.And based on selection of no of divs the area should divide into those many no of equal divs.And is there any other techinic to divide area by multiple divs or parts. Thanks in advance Eswaraiah M Hello there !! I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript...... I want to show multiple divs on select of a <option> box. So lets say there are 3 options Code: <select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>
And a javascript function to show the div`s Code: function showDivs(prefix,chooser) {
for(var i=0;i<chooser.options.length;i++) {
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedvalue = chooser.options[chooser.selectedIndex].value;
if(selectedvalue == "a")
{
displayDivs(prefix,"a");
displayDivs(prefix,"c");
displayDivs(prefix,"d");
}
if(selectedvalue == "b")
{
displayDivs(prefix,"b");
displayDivs(prefix,"c");
}
if(selectedvalue == "c")
{
displayDivs(prefix,"d");
}
}
function displayDivs(prefix,suffix) {
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
And some divs to show Code: <div id="diva" style="display:none;">blabla</div> <div id="divb" style="display:none;">blabla</div> <div id="divc" style="display:none;">blabla</div> <div id="divd" style="display:none;">blabla</div> All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good.. Then I choose option 'c' I get only one div. Thats good.. But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'.. Does anybody understand why?? Thanx allot !!! I have a PHP script that automatically increases a div id number by one. An example would be: Code: <div id="globalEventX"> where X is a number from 1 to 1000. I created a couple of javascript functions to show/hide these divs and it looks like this: Code: function hideGlobalEvents()
{
var i;
var gEvent = 'globalEvent';
for(i=1; i<=1000; i++)
{
var globalEvent = gEvent + i;
document.getElementById(globalEvent).style.display='none';
}
}
function showGlobalEvents()
{
var i;
var gEvent = 'globalEvent';
for(i=1; i<=1000; i++)
{
var globalEvent = gEvent + i;
document.getElementById(globalEvent).style.display='block';
}
}
I then created a pair of radio buttons to call the show or hide functions. The code looks like this: Code: <input type="radio" name="GlobalLocal" onClick="javascript:hideGlobalEvents();">Personal</input> <input type="radio" name="GlobalLocal" checked onClick="javascript:showGlobalEvents();">Global</input> But, when I try to use the buttons, they do not suppress the DIVs. Can anyone give me an idea what I'm doing wrong? Thanks in advance! Hi I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose. Anyone know how that can be done? thanks Hi guys ,, I am new here could you please help me in this: I have multiple divs something like this PHP Code: <div id="div1"> <div id="div2"> <div id="div3"> .... </div> </div> I want JavaScript code to print div1 with all nested divs as well I tried using the following code but it only print div1 content PHP Code: var printContent = document.getElementById('div1'); var windowUrl = 'about:blank'; var uniqueName = new Date(); var windowName = 'Print' + uniqueName.getTime(); var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=200,height=200'); printWindow.document.write(printContent.innerHTML); printWindow.document.close(); printWindow.focus(); printWindow.print(); printWindow.close(); so please tell me how to do such operation ?? Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James Hello Guys, Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java. What i need to be able to do is.. When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs. #contentwindow #three I already have jquery running on the page and all css is embeded for now if that is helpful. http://www.bushcottages.co.uk/new.htm Thanks your help is supremely appreciated Peter The very basic onclick code I threw together: Code: function descw()
{
document.getElementById("desc").style.display="block";
}
function descc()
{
document.getElementById("desc").style.display="none";
}
The div that needs a description... Code: <div class="select"><img src="image.jpg" onclick="descw()"></div> ..and the actual description div. Code: <div id="desc"> <img src="close.jpg" onclick="descc"> <p>Description</p> </div> This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error. I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html>
<head>
<title>Show and Hide</title>
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
document.getElementById(tid).style.display = "none";
}
else {
document.getElementById(tid).style.display = "";
}
}
//-->
</script>
These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>
And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! Hi. I've been working on a project for some time now, and just recently I installed Firefox. Now, part of the site (which works perfectly in IE6/7) doesn't work in Firefox. Here is part of the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Meniu de navigare</title> </head> <body bgcolor="#000437"> <table width="119" style="position:relative; top:35%"> <a href="pag_start.html" rel="nofollow" target="continut"><tr><td class="nav_bar" height="24" background="p1.png" valign="center" onmouseover="background='p2.png'" onmouseout="background='p1.png'" onmousedown="background='p3.png'" onmouseup="background='p2.png'">Home</td></tr></a> blah blah blah </table> </body> </html> (I didn't copy all of the code because it's basically the same all the way down) The main problem is with the link (Firefox apparently doesn't recognize table rows as links). The second problem is with the onmouseover/onmouseout etc handlers (absolutely nothing happens). Any ideas how to solve this? Thanks. Bye. PS: just in case you need to know, the code is for a nav bar. This is my class doucmnet :: PHP Code: XMLXHttpRequest = function(name){ this._handle = new XMLHttpRequest(); this._method = ''; this._url = ''; this.readyState = 0; this.responseBody = ''; this.responseText = ''; this.responseXML = ''; this.status = 0; this.statusText = ''; this.className = name; this.onreadystatechange = function(){} this.ontimeout = function(){} this.abort = function(){ this._handle.abort(); } this.getAllResponceHeaders = function(){ return this._handle.getAllResponceHaders; } this.getResponceHeader = function(bstrHeader){ return this._handle.getResponceHeader(bstrHeader); } this._readyStateUpdate = function(){ if(typeof(name) !== "undefined"){ name = this.className; } eval(""+name+".onreadystatechange();"); eval(""+name+".readyState = "+name+"._handle.readyState;"); eval(""+name+".status = "+name+"._handle.status;"); eval(""+name+".statusText = "+name+"._handle.statusText;"); eval(""+name+".responseText = "+name+"._handle.responseText;"); eval(""+name+".responseBody = "+name+"._handle.responseBody;"); eval(""+name+".responseXML = "+name+"._handle.responseXML;"); } this.open = function(sMethod, sUrl){ this._readyStateUpdate(); this._handle.onreadystatechange = this._readyStateUpdate; this._handle.ontimeout = this.ontimeout(); this._url = sUrl; this._method = sMethod; } this.send = function(data){ this._handle.open("GET", "xml.php?url="+ this._url + "&method=" + this._method + "&data=" + urlencode(data)); this._handle.send(null); } this.setRequstHeader = function(sName, sValue){ return this._handle.setRequestHeader(sName, sValue); } } What this is supposed to do :: This is a class that is supposed to allow CrossDomain AJAX(XMLXHttpRequest) in the exact same way the XMLHttpRequest dose all the same handlers other then it uses a php file to get all the data now the PHP File works perfectly post and GET - Without cURL. Now most of the class works it can send the data("POST" or "GET") cross domain the only problem seems to be firing the onreadystatechange PHP Code: this.open = function(sMethod, sUrl){ this._readyStateUpdate(); this._handle.onreadystatechange = this._readyStateUpdate; this._handle.ontimeout = this.ontimeout(); this._url = sUrl; this._method = sMethod; } As you can see i have its set to fire the _readyStateUpdate on the onreadystatechange so why is it not fireing, This is tested in FireFox 3.5, ComitBird(Firefox 3.2 Core), Google Chrome and IE and it dose not work in all of them as i know there is a bug with FireFox 3.5 and Firebug wich im a developer i have got it but thats why im testing in GG and IE Any help would be greatly appreciated |
|||||||