Solved

My classic asp Jquery UI drag and drop is  working 90% correct please help me out to finish it

Posted on 2014-09-03
11
584 Views
Last Modified: 2014-09-04
Hi Experts,

I would like to complete my simple document generator. It is a page with two columns. The one on the left contains all form fields that not have been placed on to the document. And the column on the right contains the fields that are placed on the document. The form allows you to drag and drop the fields from the left to the right and is updates my database tables accordingly And you can also drag them in the right order in the right sight column.

I think there will be a simple solution to my problem but I can't find it until now.

The problem is:  It does not update my database when it is in these two specific states:

It does not allow me to remove the last form field from a document (see demo movie).  

It only works after the first form field has been manually put in the database(see demo movie).  


It is hard to explain so that's why I've recorded a demo with audio:

This is the link to it.

The code of both files is below:

The front end called "documentbeheer.asp"
<!--#INCLUDE FILE="../config.asp"-->
<%
SQL = "select documentname from jaargesprek_Forms where formID='"&Request.QueryString("formID")&"'"
Set RS = Server.CreateObject("ADODB.Recordset")
RS.Open SQL, cs ,3,3
documentname=RS("documentname")

RS.close
%>
<html lang="en">
<head>
<SCRIPT LANGUAGE="javascript"> 
{ 
self.name="BODY"; 
} 
function requotepopup(lnk, size) { 
window.open(lnk, "requote",size)
} 
</SCRIPT>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Handle empty lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <!--<link rel="stylesheet" href="/resources/demos/style.css">-->
  <style>
  #sortable1, #sortable2{ list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 620px;}
  #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 600px; }

  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
        update : function () {
            //var order = $('#sortable2').sortable('toArray').toString();
			var order = $('#sortable2').sortable('serialize'); 
		
            //alert(order);
			$("#info").load("documentbeheer_post.asp?"+order+"&formID=<%= Request.QueryString("formID") %>");
				}
    }).disableSelection();
  });
  </script>
</head>
<body>
<p>De document velden/items in de twee onderstaande kolommen zijn versleepbaar. Document items vanuit de linker kolom kunnen worden toegevoegd aan de rechter kolom en vice versa. Bovendien kun je in de rechter kolom de volgorde wijzigen door ze in de juiste volgorde te slepen.<br><br><b> LET OP!</b> De wijzigingen worden wel direct doorgevoerd in de webformulieren.</p>

<div id="sortable" >
<table><tr><td align="center" width="620px"><h3>Hieronder alle beschikbare document velden</h3></td><td  align="center"  width="620px"><H3>Hieronder de reeds toegewezen velden van het document<br><%= documenttype %></h3></td></tr>
<tr><td align="center"><input type="submit" name="sdtlbut" value="Een documentveld aan onderstaande lijst met beschikbare velden toevoegen" onClick="requotepopup('vraag_add.asp','height=300,width=1000,scrollbars=no')"></td><td></td><tr>
</table>
<ul id="sortable1" class="connectedSortable">
<%
SQL = "SELECT FieldID, fieldtypeID, label FROM jaargesprek_Fields where FieldID not in (select FieldID from jaargesprek_FieldsPerForm WHERE FormID='"&Request.QueryString("formID")&"') order by label ;"
Set RS = Server.CreateObject("ADODB.Recordset")
RS.Open SQL, cs ,3,3
Do While Not RS.EOF
	SQL1 = "SELECT count(FieldID) AS aantal from jaargesprek_FieldsPerForm where FieldID='"&RS("FieldID")&"';"
	Set RS1 = Server.CreateObject("ADODB.Recordset")
	RS1.Open SQL1, cs ,3,3
	if RS1("aantal")=0 then
		response.write "<li class=""ui-state-default"" id='field_"&RS("FieldID")&"'>"& RS("label") & "<a href=""vraag_del.asp?fieldID=" & RS("FieldID") & "&formID=" & Request.QueryString("formID") & """ Title=""Hiermee kunt je de vraag weer verwijderen indien deze geheel niet gebruikt wordt in alle formulieren""  ><img align=""right"" src='../images/delete.gif'style=""border-style: none""></a><a href=""#"" Title=""Hiermee kunt je de vraag nog wijzigen indien deze niet ergens in een formulier gebruikt wordt."" onClick=""requotepopup('vraag_edit.asp?fieldID=" & RS("FieldID") &"&soort="& RS("fieldtypeID") &"','height=800,width=1000,scrollbars=no')""><img align=""right"" src='../images/edit.png'style=""border-style: none""></a></li>"& vbcrlf 
	else		
		response.write "<li class=""ui-state-default"" id='field_"&RS("FieldID")&"'>"& RS("label") & "</li>"& vbcrlf 
	end if	
	RS.MoveNext 
LOOP
%>
</ul>
 
<ul id="sortable2" class="connectedSortable">
<%
SQL = "SELECT jaargesprek_FieldsPerForm.FieldID, jaargesprek_Fields.label FROM jaargesprek_FieldsPerForm inner join jaargesprek_Fields ON jaargesprek_Fields.FieldID=jaargesprek_FieldsPerForm.FieldID WHERE FormID='"&Request.QueryString("formID")&"' ORDER BY sorting"
Set RS = Server.CreateObject("ADODB.Recordset")
RS.Open SQL, cs ,3,3
Do While Not RS.EOF
	response.write "<li class=""ui-state-highlight"" id='field_"&RS("FieldID")&"'>" & RS("label")&" </li>" & vbcrlf 

	RS.MoveNext 
LOOP
%>
</ul>
</div> 
<br style="clear:both">
<div id="info"></div> <!--This receives the message from the ASP page -->
</div>
</body>
</html>

Open in new window


And the back end file called "documentbeheer_post.asp":
<!--#INCLUDE FILE="../config.asp"-->
<%
dim sql : sql = "SELECT FieldID FROM jaargesprek_FieldsPerForm WHERE formID='"&Request.QueryString("formID")&"' ORDER BY sorting"

set rs = cs.execute(SQL)
dim arr : arr = rs.GetRows()
dim FromArray

FUNCTION amDate(varDate)
    IF isNull(varDate) OR Trim(varDate) = "" OR varDate = "Null" THEN
       amDate = "Null"
    ELSE
       amDate = "'" & Month(DateValue(varDate)) & "/" & Day(DateValue(varDate)) & "/" & Year(DateValue(varDate)) & " " & TimeValue(varDate) & "'"
    END IF 
END FUNCTION



getFields = Request.QueryString("field[]")
formID = Request.QueryString("formID")
getFields = Split(getFields, ",")

FOR y = LBound(arr,2) TO ubound(arr,2) 
	FromArray = 1
		FOR i = LBound(getFields) TO UBound(getFields)
        if Trim(getFields(i)) = Trim(arr(0,y)) then 
			FromArray = 0
		end if
	next
	if FromArray = 1 then
		sql_delete = "DELETE FROM [jaargesprek_FieldsPerForm] WHERE FormID ='"&formID&"' AND FieldID='" & Trim(arr(0,y)) & "'"
		'response.write sql_delete & "<br>"
		Set RS = Server.CreateObject("ADODB.Connection")
		RS.Open CS
        RS.Execute sql_delete
        RS.Close
	end if
Next

FOR i = LBound(getFields) TO UBound(getFields)
	InArray = 0
	dim y
	FOR y = 0 TO ubound(arr,2)
        if Trim(getFields(i)) = Trim(arr(0,y)) then 
			InArray = 1 
		end if
	next
	
	if InArray = 1 then 
		sql_update = "UPDATE [jaargesprek_FieldsPerForm] SET sorting='" & i & "', datetime=" & amDate(NOW()) & " WHERE FormID ='"&formID&"' AND FieldID='" & Trim(getFields(i)) & "'"
		else
		sql_update = "INSERT INTO [jaargesprek_FieldsPerForm] (FormID,FieldID,required,sorting, datetime) VALUES('"&formID&"','"&getFields(i)&"','0','"&i&"'," & amDate(NOW()) & ")"
	end if
	response.write sql_update & "<br>"
	Set RS = Server.CreateObject("ADODB.Connection")
	RS.Open CS
    RS.Execute sql_update
    RS.Close
Next


%>
<script>
        window.onunload = refreshParent;
        function refreshParent() {
            window.opener.location.reload();
        }
</script>

Open in new window

0
Comment
Question by:Steynsk
  • 6
  • 5
11 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
The movie does not help see what is going on.   Please provide a link to your sample page.  If it is not on a public server or contains private information, you will need to create an example page and just use callbacks similar to the movie.  You can place the rendered html on jsbin.com or jsfiddle.com or use your own server.
0
 
LVL 1

Author Comment

by:Steynsk
Comment Utility
Hello Scott,

Thanks but I don't have an external IIS server and database available.

And I don't quite know how i should
create an example page and just use callbacks similar to the movie
. because I don't understand the working of the jquery in the code completely.

I will try to add some more logging en try to find out what goes wrong. I think it will have something to do with the conditions put on the values stored in the both arrays I compare.

Thanks anyway,

Steynsk
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
Since jquery /  javascript only requires front end coding and not your back end (asp), you can recreate  your code in jsbin.com.  You first need to render your code.  (Display the page and view source).  Then copy and paste the rendered html to jsbin.com.  

I have started one for you http://jsbin.com/xotare/1/edit  You just need to update the html and add the appropriate javascript.  I have added jquery ui for you.  You will need to add your other external css and js.  One way to do this is add code to pastebin and use that as your external source.  

This will take some work on your part to set up.  It would be easier to  just make what you have public. But that is up to you.  

Once you can recreate your sample code, we can help you.
0
 
LVL 1

Author Comment

by:Steynsk
Comment Utility
Hi Scott,

Now I understand....

This is my URL:

http://jsbin.com/mijimatumemo/1/edit

Hope you can help me out. The back-end part of the page compares two arrays. One "arr" contains the fields found in my database.
The second one is the array "getFields" that receives its fields from the front-end of the page. But when I remove the last field the array "getfields"is empty and is not receiving any value. It looks like because there is no value in the array the back-end part is not triggered at all so that's nothing is happening.

But I don't know why.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
for items like
$("#info").load("documentbeheer_post.asp?"+order+"&formID=2");

We need to simulate this.  Either inject some fake data or render some fake data frin another jsbin.

$("#info").html("<div>foo</div>");

or

$("#info").load("/fromjsbin/1.js");
Notice http://jsbin.com/jecon/1/edit?html,js,output and http://jsbin.com/jecon/1.js
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 1

Author Comment

by:Steynsk
Comment Utility
Yes....

I've changed
$("#info").load("documentbeheer_post.asp?"+order+"&formID=<%= Request.QueryString("formID") %>");
into
$("#info").load("documentbeheer_post.asp?formID=<%= Request.QueryString("formID") %>&"+order+"");

and it solved half of problem. I now can remove the last item from the right column.

Thanks a lot.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Great.  Sometimes forcing to make a sample example helps clear up issues.

Once you get this working, make sure you have documentbeheer_post.asp protected from any type of sql injection.
0
 
LVL 1

Author Comment

by:Steynsk
Comment Utility
Thanks Scott,

For the advice but the page is to be used by administrator that depend its working. But in other cases I should absolutely protect the script for that. Can you point me out in the right direction where I can find a method to protect it?

The last part is solved as well. This is the final code that is working.



<!--#INCLUDE FILE="../config.asp"-->
<%

FUNCTION amDate(varDate)
    IF isNull(varDate) OR Trim(varDate) = "" OR varDate = "Null" THEN
       amDate = "Null"
    ELSE
       amDate = "'" & Month(DateValue(varDate)) & "/" & Day(DateValue(varDate)) & "/" & Year(DateValue(varDate)) & " " & TimeValue(varDate) & "'"
    END IF 
END FUNCTION

dim sql : sql = "SELECT FieldID FROM jaargesprek_FieldsPerForm WHERE formID='"&Request.QueryString("formID")&"' ORDER BY sorting" 

set rs = cs.execute(SQL)         'haal alle veld id's op van velden die in dit formulier staan.
if rs.eof then
		sql_update = "INSERT INTO [jaargesprek_FieldsPerForm] (FormID,FieldID,required,sorting, datetime) VALUES('"&Request.QueryString("formID")&"','"&Request.QueryString("field[]")&"','0','"&i&"'," & amDate(NOW()) & ")"
		Set RS = Server.CreateObject("ADODB.Connection")
		RS.Open CS
		RS.Execute sql_update
		RS.Close
else
	dim arr : arr = rs.GetRows()	 'schrijf ze weg naar de arr array	
end if

dim delete
getFields = Request.QueryString("field[]") 'shrijf alle velden die volgens de interface in de rechter kolom staan
formID = Request.QueryString("formID")
getFields = Split(getFields, ",")

FOR y = LBound(arr,2) TO ubound(arr,2)                    	'van het eerste record t/m het laatste record doorlopen we de waarden die in de database staan
	delete = True                                      		'we gaan er van uit de variable standaard waar is. Op basis hiervan verwijderen we straks wel of niet records True is verwijderen
		FOR i = LBound(getFields) TO UBound(getFields) 	  	'van het eerste record t/m het laatste record doorlopen we de waarden die nu in de interface staan.
        if Trim(getFields(i)) = Trim(arr(0,y)) then       	'als er een overeenkomst tussen tussen beide velden is dan besluiten we dat die niet verwijderd moet worden.
			delete = False                                  'door verwjderen fout te 
		end if
	next
	if delete = True then
		sql_delete = "DELETE FROM [jaargesprek_FieldsPerForm] WHERE FormID ='"&formID&"' AND FieldID='" & Trim(arr(0,y)) & "'"
		Set RS = Server.CreateObject("ADODB.Connection")
		RS.Open CS
        RS.Execute sql_delete
        RS.Close
	end if
Next

FOR i = LBound(getFields) TO UBound(getFields)
	InArray = 0
	dim y
	FOR y = 0 TO ubound(arr,2)
        if Trim(getFields(i)) = Trim(arr(0,y)) then 
			InArray = 1 
		end if
	next
	
	if InArray = 1 then 
		sql_update = "UPDATE [jaargesprek_FieldsPerForm] SET sorting='" & i & "', datetime=" & amDate(NOW()) & " WHERE FormID ='"&formID&"' AND FieldID='" & Trim(getFields(i)) & "'"
		else
		sql_update = "INSERT INTO [jaargesprek_FieldsPerForm] (FormID,FieldID,required,sorting, datetime) VALUES('"&formID&"','"&getFields(i)&"','0','"&i&"'," & amDate(NOW()) & ")"
	end if
	Set RS = Server.CreateObject("ADODB.Connection")
	RS.Open CS
    RS.Execute sql_update
    RS.Close
Next
%>
<script>
        window.onunload = refreshParent;
        function refreshParent() {
            window.opener.location.reload();
        }
</script>

Open in new window

Thanks a lot.
0
 
LVL 1

Author Closing Comment

by:Steynsk
Comment Utility
Thank you helping me getting there ;-)

Kind regards,

Steynsk
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
If you are expecting a number or date it is easy.

<%
MyVariable = 0 ' set to zero
if request.querystring("formID")<>"" then ' if not empty
     if isnumeric(request.querystring("formID")) then ' the data is a good number
         MyVariable = request.querystring("formID")
    end if
end if
if MyVariable > 0 then
     ' do something
end if

%>
0
 
LVL 1

Author Comment

by:Steynsk
Comment Utility
Thanks you again. I understand just validate what's coming in as a variable.

Kind regards,

Steynsk
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now