How to refresh just one side of the page

**makamo66** · 12-26-2012, 11:35 AM

See http://myownmealplanner.com/mealplans/add/5 for the example
If you drag a meal tile to the right side of the page then it should stay there after you click on <a href="/mealplans/add">Go back to list of meal tiles</a> but of course it doesn't because the entire page gets refreshed. I tried adding an anchor for just the mealplan tiles (like a back to top button) but still the entire page gets refreshed. I can't think of any way to do this with jquery, javascript or php. Any ideas? You're supposed to be able to add tiles from the 500 calorie list and then for example the 300 cal list. Right now I only have 500 calorie tiles but you can see how it's supposed to work. This was made with the cakephp framework but it's principally the same as for a normal website.

**makamo66** · 12-28-2012, 03:01 PM

If you start with http://myownmealplanner.com/mealplans/add/5 and click on the "100 cal tiles" div you get the ajax message "Request successful
MEAL TILES" because of

Code:

<div id="clickMe">100 cal tiles</div>
<div id="result"></div>
<script type="text/javascript">
$("#clickMe").click(function() {
  $('#result').load('test');
});
</script>

The problem with Cakephp though is that it seems to have only one ajax.ctp file for all of the loads so I can't make 8 separate messages, one for each tile collection. How do I load for example the CTP called test without using the same ajax.ctp file as for the other ones? I need a separate ajax.ctp for every callback.

**makamo66** · 12-29-2012, 09:02 AM

I took the advice of Rasmus Lindström at http://www.devppl.com/forum/post71111.html#p71111 and used a GET variable to get different code for each ajax page but now the meal tiles aren't in the view source and thus aren't draggable.

**makamo66** · 12-29-2012, 01:40 PM

I was thinking maybe if I loaded an XML file with ajax I might be able to see it in view source but now I keep getting the error "failed to load external entity tiles.xml" Should I keep trying to create draggable divs with xml or am I on the wrong path here anyway?

**makamo66** · 12-30-2012, 10:08 AM

I got it to load the XML file but the XML doesn't show up in View Source either so I won't be able to use it.

**makamo66** · 12-30-2012, 04:01 PM

Here is the dilemma. If I use Ajax and even Ajax with an external XML source it doesn't show up in the view source so there's nothing to drag. If I use an iframe the draggable divs aren't on the same page as the droppable box. The last possibility would be sessions but how can I make sessions in the jquery drop function? The user would have to push some sort of button to get to the PHP.

**xelawho** · 12-30-2012, 04:10 PM

maybe a dumb question but:
can't you just put the tiles and the list in hidden divs so that when you go "back" to the list of meal tiles you're not changing pages at all?

**makamo66** · 12-31-2012, 08:54 AM

I don't understand that at all. How would that work?

**vwphillips** · 12-31-2012, 11:31 AM

you can change the content of the tile using AJAX not the tile its self

if you change the whole Tile using AJAX it will not form part of the DOM and cannot be dragged

**xelawho** · 12-31-2012, 11:37 AM

I only did the 800 cal one, but you get the idea...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="meal planning, meals" />
<meta name="description" content="recipes, cooking" />
<meta name="robots" content="noindex,nofollow" />
<title></title>
	<link rel="stylesheet" type="text/css" href="http://myownmealplanner.com/css/myownmealplanner.css" />
	<link rel="stylesheet" type="text/css" href="http://myownmealplanner.com/css/fullcalendar.css" />
	<script type="text/javascript" src="http://myownmealplanner.com/js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="http://myownmealplanner.com/js/ui-1.9.1-jquery-ui.js"></script>
 <style>
 .plans{
 text-decoration:underline;
 color:blue;
 cursor:pointer;
 }
 .meals{
 display:none;
 }
 .back{
  text-decoration:underline;
 color:blue;
 cursor:pointer;
 float:right
 }
 </style>
</head>
<body>
<div id="container">
<div id="header">
<a href="/users"><img src="http://myownmealplanner.com/img/layout/indian_wedding.jpg" alt="My Own Meal Planner" id="main_pic" /></a></div>
<div id="top_bar">
<span class="top_tabs">
<a href="/pages/home" class="menu_link">Steps</a></span>
<span class="top_tabs">
<a href="/mealplans/add" class="menu_link">Your Meal Planner</a></span>
<span class="top_tabs">
<a href="/mealplans" class="menu_link">Your Meal Plans</a></span>
<span class="top_tabs">
<a href="/calendars/navigate" class="menu_link">Your Meal Calendar</a></span>
<span class="top_tabs">
<a href="/users" class="menu_link">Register or Log In</a></span>
</div>
<div id="home_page">
<div id="meal_planner">
<script type="text/javascript">
$(document).ready(function() {
	var selectedBoxes = new Array();
	var total = 0;	
	var userId = parseInt($('#MealplanUserId').val());
	
	for (var i=1;i<100;i++){
        $( "#draggable" + i ).draggable();
		}
    $("#droppable_box").droppable({
        drop: function(event, ui) {
			
			var data = $(ui.draggable).attr('id');
			selectedBoxes.push($(ui.draggable).attr('id'));
	
			for (var i=1;i<100;i++){
		    if(data == "draggable" + i){
			var myInt = parseInt($('#MealplanCalsPerServing' + i).val());
			}
			}
	
		if ( typeof myInt === 'undefined' || !myInt) {
		myInt = parseInt(0);
		}

		total += parseFloat(myInt);
		$('#response').text(total);
        },
       // Dropped out, remove it
       out: function( event, ui ) {
           var data = $(ui.draggable).attr('id');
           var sub;
           sub = $.inArray(data , selectedBoxes )
           if (sub >= 0) {
               selectedBoxes.splice(sub, 1);
			   
			for (var i=1;i<100;i++){
		    if(data == "draggable" + i){
			var myInt = -($('#MealplanCalsPerServing' + i).val());
			}
			}
			
		if ( typeof myInt === 'undefined' || !myInt) {
		myInt = parseInt(0);
		}

		total += parseFloat(myInt);
		$('#response').text(total);
		
           }
		       }
    });
	$('#myId').click(function(event) {
        $.post("/mealplans/view", ({ data: selectedBoxes, userId: userId, total: total}), function(data, status) {
		window.location = "/mealplans/view"
        });
    });
	
	$('.plans').click(function() {
	    $("#tab").hide();
		$("#meals"+$(this).attr("id").substr(-3)).show();
    });
	$('.back').click(function() {
	    $(this).parent().hide();
		$("#tab").show();
    });
});
</script>	
<h1>Meal Planner</h1>
<br />
<form action="/mealplans/view" id="MealplanViewForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<br />
<div id="draggables_box">
<table id="tab" border="1" width="100%"><tr>
<td><span class="plans" id="pl100">100 cal tiles</span></td>
<td><span class="plans" id="pl200">200 cal tiles</span></td>
<td><span class="plans" id="pl300">300 cal tiles</span></td>
<td><span class="plans" id="pl400">400 cal tiles</span></td>
</tr>
<td><span class="plans" id="pl500">500 cal tiles</span></td>
<td><span class="plans" id="pl600">600 cal tiles</span></td>
<td><span class="plans" id="pl700">700 cal tiles</span></td>
<td><span class="plans" id="pl800">800 cal tiles</span></td>
</tr>
</table>
<!-- begin of draggable div-->
<div id="meals800" class ="meals">
800 Cal meals
<div id="draggable8" class="draggable_meal">
<div class="calorie_icon">200 CALS</div>
<span>Small Peppermint Mocha</span>
<input type="hidden" name="data[Mealplan][cals_per_serving8]" multiple="multiple" value="200" id="MealplanCalsPerServing8"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<h2></h2>
<div style="float:right; margin-right: 6px;"><a href="javascript:location.reload(true)">RESET</a></div>
<br style="clear: both;" />
</div><!--end div for draggables_box -->
<div id="droppable_box">
<p>Drop a meal tile here.</p>
</div>
<br style="clear: both;" />
<div style="margin: 0px auto; width: 622px;">
<p><b style="color: red;"></b></p>
<br style="clear: both;" />
<input type="hidden" name="data[Mealplan][user_id]" value="1" id="MealplanUserId"/>
<input type="button" id="myId" name="myButton" value="Send Data" />
</form><br />
<a href="/users/logout">Logout</a></div>
<br />
</div><!--end div for meal_planner -->
</div><!-- end of div home_page-->
<br style="clear: both;" />
<div id="footer">&copy; 2012 Maureen Moore</div>
</div><!--end of container div-->
</body>
</html>

**makamo66** · 12-31-2012, 11:55 AM

That looks like the best way to solve the problem but it involves a lot of work and I'm not ready to do it yet.

**xelawho** · 12-31-2012, 11:59 AM

it's not very much work at all - the functions are all in place, there's nothing else to add to the javascript. all you have to do is add the divs to the html with their correct classnames and IDs