How to refresh just one side of the page

This site is best viewed in a modern browser with JavaScript enabled.

How to refresh just one side of the page

makamo66

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

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

<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

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

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

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

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

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

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

vwphillips

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

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

<!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

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

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

makamo66

In my cakephp version the draggable divs come from the database so there's that to think about too. Thanks for your solution.

makamo66

The small peppermint mocha div can't be dragged. Maybe the show/hide functionality won't work after all.

makamo66

Never mind. Just needed to add $( "#draggable8" ).draggable(); in the jquery so that the peppermint mocha could be dragged after all.

xelawho

you would think that this code:

for (var i=1;i<100;i++){
        $( "#draggable" + i ).draggable();
		}

would have taken care of that

something I noticed: "clicking on the back to list" link hides the draggable divs (because they still "belong" to the divs on the left, even though they have been dragged. you may want to add these two lines to the drop function:

$(ui.draggable).appendTo($(this));
$(ui.draggable).css("position","");

makamo66

I tried implementing the jquery toggle function for 300, 400, and 800 meal tiles but there is a problem when you toggle back and forth. If you try clicking on for example the 300 cal tiles and then dragging the tile to the right side you will see that if you click on it again that it will disappear from the right side as well.

xelawho

I can't see that happening. This code seems to work OK (only has the 300, 500 and 800 divs)...

<!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());

$(".draggable_meal").draggable();
$("#droppable_box").droppable({
    drop: function(event, ui) {

		var data = $(ui.draggable).attr('id');
		selectedBoxes.push($(ui.draggable).attr('id'));
        $(ui.draggable).appendTo($(this));
		$(ui.draggable).css("position","");
		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>
<div id="meals300" class ="meals">
300 cal meals
<!-- begin of draggable div-->
<div id="draggable5" class="draggable_meal">
<div class="calorie_icon">330 CALS</div>
<span>McDonald's cheeseburger</span>
<input type="hidden" name="data[Mealplan][cals_per_serving5]" multiple="multiple" value="330" id="MealplanCalsPerServing5"/></div><!-- end of draggable div-->

<!-- begin of draggable div-->
<div id="draggable6" class="draggable_meal">
<div class="calorie_icon">320 CALS</div>
<span>large fries</span>
<input type="hidden" name="data[Mealplan][cals_per_serving6]" multiple="multiple" value="320" id="MealplanCalsPerServing6"/></div><!-- end of draggable div-->

<!-- begin of draggable div-->
<div id="draggable7" class="draggable_meal">
<div class="calorie_icon">280 CALS</div>
<span>1/2 a bagel with cream cheese and jam</span>
<input type="hidden" name="data[Mealplan][cals_per_serving7]" multiple="multiple" value="280" id="MealplanCalsPerServing7"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>

<div id="meals500" class ="meals">
500 cal meals
<!-- begin of draggable div-->
<div id="draggable3" class="draggable_meal">
<div class="calorie_icon">540 CALS</div>
<span>Oatmeal with raisins, walnuts, and whole milk</span>
<input type="hidden" name="data[Mealplan][cals_per_serving3]" multiple="multiple" value="540" id="MealplanCalsPerServing3"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable2" class="draggable_meal">
<div class="calorie_icon">510 CALS</div>
<span>1 bag <em>Pop Secret Butter Popcorn</em></span>
<input type="hidden" name="data[Mealplan][cals_per_serving2]" multiple="multiple" value="510" id="MealplanCalsPerServing2"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable4" class="draggable_meal">
<div class="calorie_icon">500 CALS</div>
<span>4 dried figs (235 cals) + 15 macadamia nuts (265 cals)</span>
<input type="hidden" name="data[Mealplan][cals_per_serving4]" multiple="multiple" value="500" id="MealplanCalsPerServing4"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>

<div id="meals800" class ="meals">
800 Cal meals
<!-- begin of draggable div-->
<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

I gave the draggable divs a new class called rightSide when they're dragged to the right side. You can see that the class has changed because the background color turns to pink. Now that it's a new class I can ask it to show instead of toggle like this:

[CODE]	$("#clickMe3").click(function() {
	$(".rightSide").show();
	$("#showMe3").toggle();
});[/CODE]

But instead of showing the right side divs, it toggles back to hide just like the left side divs do. At http://myownmealplanner.com/mealplans/add you can click on the 300, 400, 800 tiles to try it out.

xelawho

I haven't looked at your code, but it sounds like you didn't read my advice back in post #16

xelawho;1242651 wrote:
something I noticed: "clicking on the back to list" link hides the draggable divs (because they still "belong" to the divs on the left, even though they have been dragged. you may want to add these two lines to the drop function:
$(ui.draggable).appendTo($(this));
$(ui.draggable).css("position","");

you seem to be creating near identical functions for every element. You should be aware that the real beauty of jQuery is that you can apply the same function to various elements using their class name.

I'll say it once again: the code posted in 18 works fine. You seem to be trying to solve problems that don't actually exist.