• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 738
  • Last Modified:

drag and drop and cfdiv

I know sometimes both does not play wll, but i have a problem here

my Main file:

index.cfm

<html>
<head>
<cfinclude template="jquery.cfm">
</head>
<body>
Contents Start
<div id="loadmain"></div>
<div id="loadchild"></div>
</body>
</html>

Open in new window


now jquery.cfm file

Jquery 1.4.4 included here 
<script type="text/javascript">
$(document).ready(function(e) {
      $("#loadmain").load("firstrun.cfm?ID=1");
      $("#loadchild").load("next.cfm?fk_ID=1");	
});	

Open in new window


now next.cfm file

<cfdiv>
<script type="text/javascript">
	var cost = '0.00';
	$.().ready(function(){
	$('.movie').draggable({
		revert: true
	});
	$("#movie2").droppable({
		 drop: function(event, ui) {
			$(this).html(ui.draggable.html());
			var newcost = $(this).find("img").map(function(){ return this.id;}).get();
			var movieID = $(this).find("img").attr("class");
			cost = parseFloat(cost) + parseFloat(newcost);
			var passcost = newcost;
			var data = "uID=<cfoutput>#session.recID#</cfoutput>&cost=" + cost + '&animationID=' + movieID;
			$.ajax({
				type:"POST",
				url:"upd.cfm",
				cache:false,
				data:data,
				success:function(html) {
					$("#amount").load('amount.cfm?uID=<cfoutput>#session.recID#</cfoutput>&movie=1&animationID=' + movieID);	 // this id is loaded on the index.cfm page and it works
				}			
			});
		}
	});
});
</script>

<cfsavecontent variable="Paging">
	<cfset rowsPerPage = 4>
    <cfparam name="URL.startRow" default="1" type="numeric">
    <cfset totalRows = Recordset1.recordCount>
    <cfset endRow = min(URL.startRow + rowsPerPage - 1, totalRows)>
    <cfset startRowNext = endRow + 1>
    <cfset startRowBack = URL.startRow - rowsPerPage>
</cfsavecontent>
<cfsavecontent variable="Paging2">
	<cfoutput>
    <cfif startRowBack gt 0>
        <a href="#AjaxLink('next.cfm?startRow=#startRowBack#')#">
           <img src="afbeeldingen/Previous.gif" />
        </a>
    </cfif>
    <cfif startRowNext lte totalRows>
        <a href="#AjaxLink('next.cfm?startRow=#startRowNext#')#">      
            <img src="afbeeldingen/Next.gif" />
        </a>  
    </cfif>
    </cfoutput>  
</cfsavecontent>
<cfif Recordset1.recordcount GT 4>
	<cfoutput>#Paging#</cfoutput>
</cfif>
<td>
             <div id="movieframe">
             	<div id="movie" class="movie">
             		<img src="video/fronts/#Recordset1.animation#" id="#Recordset1.animation#" class="#Recordset1.id_animation#"/>
             	</div>
             </div>
             </td>
</cfdiv>

Open in new window


anyone have idea how do i create navigation inside the cfdiv and it should be working with drag and drop too, if i remove navigation, it works fine, i suppose it only has issues with cfdiv ag
0
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
  • 7
  • 6
1 Solution
 
RobOwner (Aidellio)Commented:
did you do this on purpose:

$.().ready(function(){

Open in new window


it should be $(document).ready(function() {

Open in new window

0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
it is same
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
i know there is an extra dot, i have removed it, still same issue
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
RobOwner (Aidellio)Commented:
the paging doesn't work because you are posting back to the next.cfm everytime using ajax.  That file creates the drag and drop.  You should only do this once or as a workaround destroy it and recreate it each time, ie change the top of your next.cfm file to this:

<cfdiv>
<script type="text/javascript">
	var cost = '0.00';
	$(document).ready(function() {

        $('.movie').draggable('destroy');
        $('#movie2").droppable('destroy');

	$('.movie').draggable({
		revert: true
	});
	$("#movie2").droppable({
		 drop: function(event, ui) {
			$(this).html(ui.draggable.html());
			var newcost = $(this).find("img").map(function(){ return this.id;}).get();
			var movieID = $(this).find("img").attr("class");
			cost = parseFloat(cost) + parseFloat(newcost);
			var passcost = newcost;
			var data = "uID=<cfoutput>#session.recID#</cfoutput>&cost=" + cost + '&animationID=' + movieID;
			$.ajax({
				type:"POST",
				url:"upd.cfm",
				cache:false,
				data:data,
				success:function(html) {
					$("#amount").load('amount.cfm?uID=<cfoutput>#session.recID#</cfoutput>&movie=1&animationID=' + movieID);	 // this id is loaded on the index.cfm page and it works
				}			
			});
		}
	});
});
</script>

Open in new window

0
 
RobOwner (Aidellio)Commented:
note the 2 lines that destroy each element before it is created.
0
 
RobOwner (Aidellio)Commented:
Sorry I can't test this I can only point you in the right direction.  

If the above doesn't work it could also be a timing issue between the call to go to the next page and the javascript executing, meaning you may need to destroy and recreate the draggable and droppable elements when the cf paging has finished
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
ok so it works first time, when i navigate to the other set of 4 records, then dragging stops,

there lies the issue
0
 
RobOwner (Aidellio)Commented:
and you tried destroying the elements?
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
so, it did not worked with destroy option, it just does not drag it

now why on document load yu have destroy
0
 
RobOwner (Aidellio)Commented:
because you have ajax setup for paging and it's calling next.cfm over and over.  each time it calls this it runs the document load.  As you're not completely reloading the page you need to remove any jquery configured elements and reinitialise them
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
sohow we here now then ?
0
 
RobOwner (Aidellio)Commented:
what you need to do is separate the javascript from the next.cfm.  It is the recursion that is causing your issue.  You could do this by putting it in the jquery.cfm file.
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
still not resolved but accepting thanks for the help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now