?
Solved

drag and drop and cfdiv

Posted on 2012-08-23
13
Medium Priority
?
732 Views
Last Modified: 2012-08-30
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
Comment
  • 7
  • 6
13 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 38327348
did you do this on purpose:

$.().ready(function(){

Open in new window


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

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38328136
it is same
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38328138
i know there is an extra dot, i have removed it, still same issue
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 43

Expert Comment

by:Rob
ID: 38328181
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
 
LVL 43

Expert Comment

by:Rob
ID: 38328182
note the 2 lines that destroy each element before it is created.
0
 
LVL 43

Expert Comment

by:Rob
ID: 38328186
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38328219
ok so it works first time, when i navigate to the other set of 4 records, then dragging stops,

there lies the issue
0
 
LVL 43

Expert Comment

by:Rob
ID: 38328256
and you tried destroying the elements?
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38328345
so, it did not worked with destroy option, it just does not drag it

now why on document load yu have destroy
0
 
LVL 43

Expert Comment

by:Rob
ID: 38328429
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
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 38328599
sohow we here now then ?
0
 
LVL 43

Accepted Solution

by:
Rob earned 1500 total points
ID: 38331352
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
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 38349133
still not resolved but accepting thanks for the help
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month9 days, 7 hours left to enroll

621 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