How to refresh just one side of the page

See http://myownmealplanner.com/mealplans/add/5 for the demo
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 the principles are the same as for a normal website.

 

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>

Code (markup):

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.

 

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.

 

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?

 

Have you thought about using 2 iframes and changing the targets of the links to one of the iframes?

 

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.

 

Best to stay away from frames best to load php or xml into the page using ajax, this is the whole point of ajax to load external data without a full page refresh.

 

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.

 

Something tells me that you're trying to use AJAX without having to write AJAX. Cake is what's causing your problems, so forget it and write the code yourself. For each AJAX call, set a variable to indicate what function you're calling, then in PHP use a switch or if to jump to the function the variable indicates.

Writing your own code is always better than letting a program write code it wasn't actually designed to write.

 

I've written my own AJAX and the loaded data doesn't show up in the view source.

 

I tried to load an XML file without cakephp and it still didn't write the ajax to the view source.

 

If I write

<?php 
            $i = 7;
            $this->requestAction('/mealplans/createsessions/'. $i);
            ?>

Code (markup):

in my jquery function it echos back the 7 because requestAction goes to a method in the controller that creates a session with that value. How do I get the jquery index instead of the one I'm using as a placeholder? In jquery I have a definition for i as well but I can't get it to go to the php.

 

The solution at http://www.webdeveloper.com/forum/s...st-one-side-of-the-page&p=1242625#post1242625 by xelawho shows how I can hide and show my navigation and draggables with javascript. I will probably use his solution but it will take a lot of work and I'm not ready to get started with it yet.

 

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.

 

You're developing the site by writing code. Develop the site by writing the program first, then code it. You can't successfully code what you haven't written yet. (You don't have to flow-chart a program, but at least write it in an outline form, so you have some idea of what goes where when you write the code.)

 

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:

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

Code (markup):

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 at http://www.webdeveloper.com/forum/s...st-one-side-of-the-page&p=1242743#post1242743 suggested I use $(ui.draggable).appendTo($(this)); to keep the divs on the right side and now they don't hide when I toggle. It's pretty much working as desired now.

 

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

 

If I use the load function then the html it creates isn't visible in the view source and is thus not draggable. But thanks anyway. It works now anyway so I don't need any more input. Xelawho solved a lot of it for me already.