[naash]

My attachment is a timetable where names can be dropped to any of the white cells.

It has got 3 buttons :

1) NEXT - Takes user to next week

2) CURRENT - Takes user to present week

3) RESET ALL FIELDS - All the white cells should be emptied of the dragged names.

I have made following function for RESET ALL FIELDS ( the last function in script header)

 function resetPage(){
   document.getElementById("userForm").reset();
 }

It is called in the last part of the body.

The problem is that RESET ALL FIELDS doesn't work.

My 2nd problem is that the 3 buttons don't come in one single line.

Attached File(s)

•  Report_ns_try.zip (5.81K)
  Number of downloads: 35

[roudard]

Hi,

the rest problem
looking at your code, the form you are resetting contains :

<form id="userForm" >
	   <a href="#">
		  <input type="button" value="RESET ALL FIELDS" onclick="resetPage();return false;">
	   </a>
</form>

unless you fill it up some other way that i can't find in what you posted.

the next button's tag should be 'input'

the position of the form tag proabbly causes the mis-alignement - stick the buttons in a small <table> if you want to make sure they are aligned

Hope this helps

[naash]

roudard, on 12 Mar, 2009 - 03:18 AM, said:

Hi,

the rest problem
looking at your code, the form you are resetting contains :

<form id="userForm" >
	   <a href="#">
		  <input type="button" value="RESET ALL FIELDS" onclick="resetPage();return false;">
	   </a>
</form>

unless you fill it up some other way that i can't find in what you posted.

the next button's tag should be 'input'

the position of the form tag proabbly causes the mis-alignement - stick the buttons in a small <table> if you want to make sure they are aligned

Hope this helps

I am sorry but I didn't follow your correction !

[roudard]

let me try and be clearer ( and remove the typos)

The button alignment problem :
You open a <form> tag after the second button. This is a block element and will automatically create a new line.
You could put the 3 buttons in a small <table> just for them you're pretty much guaranteed they will be aligned.

<table>
	<tr>
		 <td>
<input type=button value='button1'>
		 </td>
		 <td>
<input type=button value='button2'>
		 </td>
		 <td>
<input type=button value='button3'>
		 </td>
	</tr>
</table>

The form reset problem :
The element you are resetting with document.getElementById("userForm").reset(); is the "userForm" element. which is what included between
<form id="userForm" > and </form> and whatever you assigned to it dynamically (the part I can't see in your code).
So basically when clicking the button you are resetting .. the button..
add the following :

<form id="userForm" >
//add the following line
	   <input type='text' size=3> 
[indent]<a href="#">
		  <input type="button" value="RESET ALL FIELDS" onclick="resetPage();return false;">
	   </a>
</form>

now add a value in the field you just created and click on the clear all button ...
ta dah it resets the field because it IS contained in the "userForm" Element

is this clearer ?

This post has been edited by roudard: 12 March 2009 - 05:37 AM

[naash]

roudard, on 12 Mar, 2009 - 04:29 AM, said:

let me try and be clearer ( and remove the typos)

The button alignment problem :
You open a <form> tag after the second button. This is a block element and will automatically create a new line.
You could put the 3 buttons in a small <table> just for them you're pretty much guaranteed they will be aligned.

<table>
	<tr>
		 <td>
<input type=button value='button1'>
		 </td>
		 <td>
<input type=button value='button2'>
		 </td>
		 <td>
<input type=button value='button3'>
		 </td>
	</tr>
</table>

The form reset problem :
The element you are resetting with document.getElementById("userForm").reset(); is the "userForm" element. which is what included between
<form id="userForm" > and </form> and whatever you assigned to it dynamically (the part I can't see in your code).
So basically when clicking the button you are resetting .. the button..
add the following :

<form id="userForm" >
//add the following line
	   <input type='text' size=3> 
[indent]<a href="#">
		  <input type="button" value="RESET ALL FIELDS" onclick="resetPage();return false;">
	   </a>
</form>

now add a value in the field you just created and click on the clear all button ...
ta dah it resets the field because it IS contained in the "userForm" Element

is this clearer ?

Okay, so now I get it !
You are asking me to enclose those fields between <form id="userForm" > and </form>

My fields to be reset are between line no. 124 to 132 (in my current attachment)

Here is my textfield function. (All functions with name #dhtmlgoodies_mainContainer pertains to white cells )

#dhtmlgoodies_mainContainer ul{	/* White cells in table ,i.e <ul> */
		width:90px;
		height:90px;	
		border:0px;	
		margin-bottom:0px;
		overflow:hidden;
		background-color:#FFFFFF;	
		
	}

Now my problem is how to include them infact call them in form fields ?

Attached File(s)

•  Report_ns_try.zip (5.81K)
  Number of downloads: 28

This post has been edited by naash: 12 March 2009 - 08:47 AM

[roudard]

The thing is, you're not trying to reset a real form
You're trying to reset all the drag n drop events that have been going on.

if you check the function saveDragDropNodes (line 429 in your latest attachement) you'll probably understand my point.
upon save, this function should be called and basically transforming all the <li> elements that have been dragged around into a string

Quote

Format: ID of ul |(pipe) ID of li;(semicolon)
You can put these values into a hidden form fields, post it to the server and explode the submitted value there

tells you what you need to do to save act on that stuff

So your button shouldn't really reset a <form>, but clear out all the <ul> elements that are drop zones ...

[naash]

roudard, on 12 Mar, 2009 - 09:06 AM, said:

The thing is, you're not trying to reset a real form
You're trying to reset all the drag n drop events that have been going on.

if you check the function saveDragDropNodes (line 429 in your latest attachement) you'll probably understand my point.
upon save, this function should be called and basically transforming all the <li> elements that have been dragged around into a string

Quote

Format: ID of ul |(pipe) ID of li;(semicolon)
You can put these values into a hidden form fields, post it to the server and explode the submitted value there

tells you what you need to do to save act on that stuff

So your button shouldn't really reset a <form>, but clear out all the <ul> elements that are drop zones ...

I have again tried to design a function dragDropResetForm for resetting (starts at line no. 447 in my latest attachment)

	function dragDropResetForm()
	{
		var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
		var uls = mainContainer.getElementsByTagName('UL');
		for(var no=0;no<uls.length;no++)
			dhtmlgoodies_listOfItems.appendChild(uls[no]);			
	
	}

dhtmlgoodies_mainContainer ---> white cells
dhtmlgoodies_listOfItems ---> name list (last column)

Obviously, it doesn't run.
Plz help !

Attached File(s)

•  Report_ns_try123.zip (5.79K)
  Number of downloads: 29

[roudard]

function dragDropResetForm()
	{
		var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
		var uls = mainContainer.getElementsByTagName('UL');
		for(var no=0;no<uls.length;no++)
			dhtmlgoodies_listOfItems.appendChild(uls[no]);			
	
	}

A few things wrong with this..
each of your cells (dhtmlgoodies_mainContainer ---> white cells) have the same id.
so this line :
var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
will not return anything interesting - i believe mainContainer will be the last rendered div with this id ... but you can't count on it -
dhtmlgoodies_listOfItems is not defined in the function and i can't see it defined anywhere in the script

but you are going down the right path ... find all cells, in each cell find the <ul> elements and empty them all

there is a lot to do on variable scope that look all over the place to me...

have you thought of using a framework like prototype or something ?

[naash]

roudard, on 13 Mar, 2009 - 02:44 AM, said:

function dragDropResetForm()
	{
		var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
		var uls = mainContainer.getElementsByTagName('UL');
		for(var no=0;no<uls.length;no++)
			dhtmlgoodies_listOfItems.appendChild(uls[no]);			
	
	}

A few things wrong with this..
each of your cells (dhtmlgoodies_mainContainer ---> white cells) have the same id.
so this line :
var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
will not return anything interesting - i believe mainContainer will be the last rendered div with this id ... but you can't count on it -
dhtmlgoodies_listOfItems is not defined in the function and i can't see it defined anywhere in the script

but you are going down the right path ... find all cells, in each cell find the <ul> elements and empty them all

there is a lot to do on variable scope that look all over the place to me...

have you thought of using a framework like prototype or something ?

1)[b] There is something more that I have to add to my drag and drop attachment.
My attachment has NEXT button, when clicked generates next week day and dates.

Now here I have added an alert option. When a name is dragged and dropped to any of the white cells, an alert comes that should show following details :

1) Name
2) Day & Date
3) Time (the one in the leftmost column)

My coding does generates the alert with above details.

But there's one problem. When I click NEXT button, the day and date of the previous week is generated.

2) I have also created a back button that takes user to previous pages. But again it doesn't work !

<INPUT TYPE="button" onclick="history.go(-1);return true;" VALUE="BACK">

Help !

Attached File(s)

•  Report_fresh.html (35.05K)
  Number of downloads: 43

This post has been edited by naash: 25 March 2009 - 07:11 AM

[roudard]

hey

2- when clicking next, you don't load a new page, you just modify it, you made your back button to act like the back button of the browser and will load which ever page was accessed before.

1- it seems like the next button is working and giving the next week's dates ... what's not working there ?

[naash]

roudard, on 25 Mar, 2009 - 01:15 PM, said:

hey

2- when clicking next, you don't load a new page, you just modify it, you made your back button to act like the back button of the browser and will load which ever page was accessed before.

1- it seems like the next button is working and giving the next week's dates ... what's not working there ?

What about alert ???
How can I correct that so that it shows correct date ( that date where the name is dropped ) and not previous week's date.

[roudard]

check the other thread where we did all the dates calculations.
use the global variable we set to store the first day of the week. Output this value in the alert, you should be ok then