Yeah, think about it, you drop something then everything goes blank and you wait while the page is reloaded, it just seems that interface model would make for a jarring experience. Recreating that state could be a PIA by itself where if you just sent your data via an XHR your state would be solid and the user would be able to freely make more actions while the data is crossing the wire.
On Sep 11, 5:15 pm, "Hector Virgen" <[EMAIL PROTECTED]> wrote: > You mean drag and drop with refreshes, right? :) > > On Thu, Sep 11, 2008 at 1:56 PM, Matt Foster <[EMAIL PROTECTED]> wrote: > > > I agree with Diodeus, avoid a page refresh if possible, drag and drop > > and pages refreshes doesn't make for a very smooth UI. > > > Good luck > > > On Sep 11, 3:29 pm, Diodeus <[EMAIL PROTECTED]> wrote: > > > In the function were you handle the drop event you can perform a Ajax > > > request where you perform your database update. You don't need to > > > refresh the screen. > > > >http://www.prototypejs.org/api/ajax/request > > > > On Sep 11, 1:19 pm, mskrodzki <[EMAIL PROTECTED]> wrote: > > > > > The "external event" would be like this...when a user draggs one of > > > > the elements onto another cell in the table, the onEnd event would > > > > trigger an update to a db record status field then refresh the page. > > > > So if the status of a vehicle on the original page load was 1 and the > > > > user moved the box from the column for status 1 to the column for > > > > status 2, the db would also be updated reflecting the new status. The > > > > page then refreshes with the new data. I hope that makes sense.... > > > > > Mark > > > > > On Sep 11, 11:29 am, Matt Foster <[EMAIL PROTECTED]> wrote:> Code > > looks ok, but what do you mean by an external event, please > > > > > define that more clearly. > > > > > > On Sep 11, 12:08 pm, mskrodzki <[EMAIL PROTECTED]> wrote: > > > > > > > Here is the code I have so far: > > > > > > > <!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" /> > > > > > > <meta http-equiv="Refresh" content="30;url= > >http://tsg/UnmannedScale/ > > > > > > maindispatch.asp"> > > > > > > > <title>Untitled Document</title> > > > > > > <script language="JavaScript" src="scripts/prototype.js"></script> > > > > > > <script language="JavaScript" > > src="scripts/scriptaculous.js"></script> > > > > > > <script language="JavaScript" src="scripts/unittest.js"></script> > > > > > > <style type="text/css"> > > > > > > <!-- > > > > > > .style1 {color: #FFFFFF} > > > > > > .style4 { > > > > > > font-size: 24px; > > > > > > color: #0000FF;} > > > > > > > .style5 {color: #000000} > > > > > > .style6 {color: #0000FF} > > > > > > .status1 { > > > > > > font-family: "Times New Roman", Times, serif; > > > > > > font-size: 18px; > > > > > > background-color: #999999; > > > > > > height: 30px; > > > > > > width: auto; > > > > > > font-weight: bold; > > > > > > text-align: center; > > > > > > background-position: center center; > > > > > > left: auto; > > > > > > top: auto; > > > > > > right: auto; > > > > > > bottom: auto;} > > > > > > > .status2 { > > > > > > font-family: "Times New Roman", Times, serif; > > > > > > font-size: 18px; > > > > > > font-weight: bold; > > > > > > background-color: #00FF00; > > > > > > height: 30px; > > > > > > width: auto;} > > > > > > > .status3 { > > > > > > font-family: "Times New Roman", Times, serif; > > > > > > font-size: 18px; > > > > > > font-weight: bold; > > > > > > background-color: #999933; > > > > > > height: 30px; > > > > > > width: auto;} > > > > > > > .status4 { > > > > > > font-family: "Times New Roman", Times, serif; > > > > > > font-size: 18px; > > > > > > font-weight: bold; > > > > > > background-color: #CC9999; > > > > > > height: 30px; > > > > > > width: auto;} > > > > > > > .status5 { > > > > > > font-family: "Times New Roman", Times, serif; > > > > > > font-size: 18px; > > > > > > font-weight: bold; > > > > > > background-color: #99FFFF; > > > > > > height: 30px; > > > > > > width: auto;} > > > > > > > .status6 { > > > > > > font-family: "Times New Roman", Times, serif; > > > > > > font-size: 18px; > > > > > > font-weight: bold; > > > > > > background-color: #FF0000; > > > > > > height: 30px; > > > > > > width: auto;} > > > > > > > --> > > > > > > </style> > > > > > > </head> > > > > > > > <body> > > > > > > <table width="100%" height="40" border="0" cellpadding="0" > > > > > > cellspacing="1"> > > > > > > <tr> > > > > > > <td><span class="style4">Aggregate Hauler Tracking </span></td> > > > > > > <td>Thelen Sand & Gravel </td> > > > > > > <td><div align="center" class="style6">Thursday, September 11, > > > > > > 2008 11:06:04 AM</div></td> > > > > > > <td> </td> > > > > > > </tr> > > > > > > </table> > > > > > > <table width="100%" border="0" cellspacing="0" cellpadding="0"> > > > > > > <tr> > > > > > > <td bgcolor="#0000FF"> </td> > > > > > > </tr> > > > > > > </table> > > > > > > <center> > > > > > > <table width="90%" height="40" border="0" cellpadding="0" > > > > > > cellspacing="1"> > > > > > > <tr> > > > > > > <td><div align="right"><img border="0" id='button845' > > width="88" > > > > > > height="30" > > > > > > src="images/button59496350.jpg" > > > > > > onmouseover = 'document.getElementById("button845").src = "images/ > > > > > > button52833578.jpg"' > > > > > > onmouseout = 'document.getElementById("button845").src = "images/ > > > > > > button59496350.jpg"' > > > > > > onClick="window.location='maindispatch.asp'";></div></td> > > > > > > </tr> > > > > > > </table> > > > > > > > <table width="1000" border="1" cellpadding="0" cellspacing="1" > > > > > > bordercolor="#CCCCCC" bgcolor="#FFFFFF" id="maindispatch1"> > > > > > > <tr bgcolor="#0000FF"> > > > > > > <td width="200" height="40" ><div align="center" > > class="style1"> > > > > > > <div align="center">Truck #</div> > > > > > > </div></td> > > > > > > <td width="130" height="40" align="center"><div align="center" > > > > > > class="style1"> > > > > > > <div align="center">Loading</div> > > > > > > </div></td> > > > > > > <td width="130" height="40" ><div align="center" > > class="style1"> > > > > > > <div align="center">Ticketed</div> > > > > > > </div></td> > > > > > > <td width="130" height="40" ><div align="center" > > class="style1"> > > > > > > <div align="center">To Job </div> > > > > > > </div></td> > > > > > > <td width="130" height="40" ><div align="center" > > class="style1"> > > > > > > <div align="center">On Job </div> > > > > > > </div></td> > > > > > > <td width="130" height="40" ><div align="center" > > class="style1"> > > > > > > <div align="center">Returning</div> > > > > > > </div></td> > > > > > > <td width="130" height="40" ><div align="center" > > class="style1"> > > > > > > <div align="center">In Yard </div> > > > > > > </div></td> > > > > > > </tr> > > > > > > > <tr> > > > > > > <td height="30"><div align="center"><a > > > > > > href="truck_ticket_detail.asp" class="style5">608 : > > 462254</a></div></ > > > > > > td> > > > > > > > <td height="30"><div align="center"> > > > > > > </div></td> > > > > > > <td height="30"><div id="42" class="status2" > > > > > > align="center"><script type="text/javascript"> > > > > > > new Draggable('42', { revert: false, snap: [133, 0] }); > > > > > > </script>608</div></td> > > > > > > > <td height="30"><div id="droppable3" align="center"> > > > > > > <script type="text/javascript"> > > > > > > Droppables.add('droppable3', { > > > > > > accept: '2', > > > > > > onDrop: > > > > > > }); > > > > > > </script> > > > > > > </div></td> > > > > > > > <td height="30"><div id="droppable4" > > align="center"></div></td> > > > > > > > <td height="30"><div id="droppable5" > > align="center"></div></td> > > > > > > > <td height="30"><div id="droppable6" > > align="center"></div></td> > > > > > > > </tr> > > > > > > > </table> > > > > > > </center> > > > > > > </body> > > > > > > </html> > > > > > > > Would you be able to look thru this code to see if what I am trying > > to > > > > > > do is doable?? Your example is great but is not showing me how to > > use > > > > > > an external event to update or insert data into DB and refresh the > > > > > > page. I do appreciate your responses!! > > > > > > > Mark > > > > > > > On Sep 11, 10:51 am, Diodeus <[EMAIL PROTECTED]> wrote: > > > > > > > > Here's an example you can easily modify: > > > > > > > > <table border="1" cellpadding="5"> > > > > > > > <tr> > > > > > > > <td valign="top"> > > > > > > > <ul id='fList'> > > > > > > > <li>Apples</li> > > > > > > > <li>Grapes</li> > > > > > > > <li>Strawberries</li> > > > > > > > </ul> > > > > > > > </td> > > > > > > > <td valign="top"> > > > > > > > <div id='fish' class='meat'>Fish</div> > > > > > > > <div id='chicken' > > class='meat'>Chicken</div> > > > > > > > </td> > > > > > > > </tr> > > > > > > > </table> > > > > > > > > <script type="text/javascript"> > > > > > > > Sortable.create("fList", {constraint:false}) > > > > > > > new Draggable('fish',{revert:true}) > > > > > > > new Draggable('chicken',{revert:true}) > > > > > > > Droppables.add('fList', > > > > > > > {accept:'meat',onDrop:function(dragName,dropName) > > > > > > > {placeFood(dragName,dropName)}}) > > > > > > > > function placeFood(dragName,dropName) { > > > > > > > $("fList").insert(new Element("li", { id: > > ... > > read more » --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
