[Proto-Scripty] Re: Using onEnd event to perform external procedure
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: > > > > > > > >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > > > > > http://www.w3.org/1999/xhtml";> > > > > > > > > > > > > > > > > > > http://tsg/UnmannedScale/ > > > > > > maindispatch.asp"> > > > > > > > Untitled Document > > > > > > > > > > > > > src="scripts/scriptaculous.js"> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > cellspacing="1"> > > > > > > > > > > > > Aggregate Hauler Tracking > > > > > > Thelen Sand & Gravel > > > > > > Thursday, September 11, > > > > > > 2008 11:06:04 AM > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > cellspacing="1"> > > > > > > > > > > > > > width="88" > > > > > > height="30" > > > > > > src="images/button59496350.jpg" > > > > > > onmouseover = 'document.getElement
[Proto-Scripty] Re: Using onEnd event to perform external procedure
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:
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> http://www.w3.org/1999/xhtml";>
>
>
> http://tsg/UnmannedScale/
> maindispatch.asp">
>
> Untitled Document
>
>
>
>
>
>
>
>
>
> cellspacing="1">
>
> Aggregate Hauler Tracking
> Thelen Sand & Gravel
> Thursday, September 11,
> 2008 11:06:04 AM
>
>
>
>
>
>
>
>
>
> cellspacing="1">
>
> 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'";>
>
>
>
> bordercolor="#CC" bgcolor="#FF" id="maindispatch1">
>
>
> Truck #
>
> class="style1">
> Loading
>
>
> Ticketed
>
>
> To Job
>
>
> On Job
>
>
> Returning
>
>
> In Yard
>
>
>
>
> href="truck_ticket_detail.asp" class="style5">608 : 462254 td>
>
>
>
> align="center">
> new Draggable('42', { revert: false, snap: [133, 0] });
> 608
>
>
>
> Droppables.add('droppable3', {
> accept: '2',
> onDrop:
> });
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> 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:
>
> >
> >
> >
> >
> > Apples
> > Grapes
> > Strawberries
> >
> >
> >
> > Fish
> > Chicken
> >
> >
> >
>
> >
> > 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: $(dragName).id+"_" }))
> > $($(dragName).id+"_").innerHTML = $(dragName).innerHTML
> > Sortable.destroy("fList")
> > Sortable.create("fList", {constraint:false})
>
> > }
>
> >
>
> > On Sep 11, 10:46 am, mskrodzki <[EMAIL PROTECTED]> wrote:
>
> > > I have a asp page that displays the results of a DB query in a table.
> > > There are certain parts of the table that I have successfully made
> > > into draggable elements. The purpose of this table is to act like a
> > > status display for vehicles. The top of the table shows the status
> > > names and the left
[Proto-Scripty] Re: Using onEnd event to perform external procedure
Here is the code I have so far:
http://www.w3.org/1999/xhtml";>
http://tsg/UnmannedScale/
maindispatch.asp">
Untitled Document
Aggregate Hauler Tracking
Thelen Sand & Gravel
Thursday, September 11,
2008 11:06:04 AM
Truck #
Loading
Ticketed
To Job
On Job
Returning
In Yard
608 : 462254
new Draggable('42', { revert: false, snap: [133, 0] });
608
Droppables.add('droppable3', {
accept: '2',
onDrop:
});
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:
>
>
>
>
>
> Apples
> Grapes
> Strawberries
>
>
>
> Fish
> Chicken
>
>
>
>
>
> 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: $(dragName).id+"_" }))
> $($(dragName).id+"_").innerHTML = $(dragName).innerHTML
> Sortable.destroy("fList")
> Sortable.create("fList", {constraint:false})
>
> }
>
>
>
> On Sep 11, 10:46 am, mskrodzki <[EMAIL PROTECTED]> wrote:
>
>
>
> > I have a asp page that displays the results of a DB query in a table.
> > There are certain parts of the table that I have successfully made
> > into draggable elements. The purpose of this table is to act like a
> > status display for vehicles. The top of the table shows the status
> > names and the left of the table shows each vehicle from the query.
> > Within the body of the table, each vehicle will have its current
> > status displayed in the appropriate status column with a colored box
> > and the vehicle number. Each box is draggable only in the horizontal
> > direction and has a snap set to each column position. When a user
> > viewing that page drags a vehicle from one status to another, I need
> > the status of the dragged element to be changed to its new status
> > depending on which column it was dropped into. Then that page is to be
> > refeshed showing the new and updated statuses. This has been quite a
> > challenge for me to figure out...and unfortunately without much
> > success. Any help would be greatly appreciated!
>
> > Mark- Hide quoted text -
>
> - Show quoted text -
--~--~-~--~~~---~--~~
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
[Proto-Scripty] Re: Using onEnd event to perform external procedure
Here's an example you can easily modify:
Apples
Grapes
Strawberries
Fish
Chicken
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: $(dragName).id+"_" }))
$($(dragName).id+"_").innerHTML = $(dragName).innerHTML
Sortable.destroy("fList")
Sortable.create("fList", {constraint:false})
}
On Sep 11, 10:46 am, mskrodzki <[EMAIL PROTECTED]> wrote:
> I have a asp page that displays the results of a DB query in a table.
> There are certain parts of the table that I have successfully made
> into draggable elements. The purpose of this table is to act like a
> status display for vehicles. The top of the table shows the status
> names and the left of the table shows each vehicle from the query.
> Within the body of the table, each vehicle will have its current
> status displayed in the appropriate status column with a colored box
> and the vehicle number. Each box is draggable only in the horizontal
> direction and has a snap set to each column position. When a user
> viewing that page drags a vehicle from one status to another, I need
> the status of the dragged element to be changed to its new status
> depending on which column it was dropped into. Then that page is to be
> refeshed showing the new and updated statuses. This has been quite a
> challenge for me to figure out...and unfortunately without much
> success. Any help would be greatly appreciated!
>
> Mark
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
