djp1988 Posted August 11, 2008 Share Posted August 11, 2008 I have the following, and what shoudl happen is you click on the site name, and a textfield appears with that site, you change it and when you click ok the ajax kicks in, updates an entry on the DB, and for the time being, javascript replaces the start value of the text to the new site name, and so when the page is reloaded some time in the futur the entered site will appear anyway through the php sql request, but, 2 problems, 1 when i click in the textfield, the onclick of the span kicks in and repeats a part of the innerhtml, 2nd problem, the ajax doesn't work and replace the previous value with the new one and make the textfield go away. Please play with it: http://www.euroherp.com/AJAX/inplaceEdit.html <html><head><script type="text/javascript" src="xmlhttp.js"></script><script type="text/javascript">window.onload = init;function init(){ listeners(); }function listeners(){ editableVal = document.getElementsByTagName("span"); for(i=0; i <editableVal.length; i++){ if(editableVal[i].className == "editable"){ editableVal[i].onclick = function (){ showTextField(this); } } } }function showTextField(id){ contentValue = id.innerHTML; id.innerHTML = '<input name="textfield" id="txtField" type="text" size="15" value="'+ contentValue +'" maxlength="500" /><input type="button" id="Saveinfo" name="Button" value="OK" />'; document.getElementById("txtField").focus(); document.getElementById("Saveinfo").onclick = function (){var newInfo = document.getElementById("txtField").value; sendinfoIN(this,newInfo);}; }//ajax function sendinfoIN(id, contents){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){ alert ("Your browser does not support AJAX!"); return; } var url="profileUpdate.php"; xmlHttp.onreadystatechange=stateChanged(id); xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); myData = "newSite=" + contents; xmlHttp.send(myData);}function stateChanged(id){ if (xmlHttp.readyState==4){ id.innerHTML=xmlHttp.responseText; }}</script><body><p><strong>Website</strong>: <span class="editable">www.mysite.com</span></p></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 11, 2008 Share Posted August 11, 2008 Read this to learn about how events are handled when child and parent elements have event handlers on the same event:http://www.quirksmode.org/js/events_order.htmlYou want to use bubbling, and once the event handler finishes for the text box you either want to cancel the event so that it doesn't bubble to the container or you want to set a flag that you can check in the container to see if the other element just processed the same event. You might also be able to temporarily remove the event handler from the parent element. But canceling the bubbling would probably be the best, if you can do that. I can't even test the second problem because of the issue with the first problem. Link to comment Share on other sites More sharing options...
djp1988 Posted August 11, 2008 Author Share Posted August 11, 2008 well thanks, try now, that first problem was only so when i had a value in the textbox from the start, now (without it) you can see there isn't a click problem, why the value of value does this i don't know, but you can play with the ajax problem now it's been removed Link to comment Share on other sites More sharing options...
justsomeguy Posted August 11, 2008 Share Posted August 11, 2008 You haven't hooked up the state change handler correctly, you're executing the function immediately instead of when the response comes back. It should be like this:xmlHttp.onreadystatechange=function() { stateChanged(id) }; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.