www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: How to refresh just one side of the page

  1. #1
    Join Date
    Dec 2012
    Posts
    32

    How to refresh just one side of the page

    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.

  2. #2
    Join Date
    Dec 2012
    Posts
    32

    Multiple Ajax Requests with CakePHP

    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.

  3. #3
    Join Date
    Dec 2012
    Posts
    32
    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.

  4. #4
    Join Date
    Dec 2012
    Posts
    32
    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?

  5. #5
    Join Date
    Dec 2012
    Posts
    32
    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.

  6. #6
    Join Date
    Dec 2012
    Posts
    32
    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.

  7. #7
    Join Date
    Nov 2010
    Posts
    978
    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?

  8. #8
    Join Date
    Dec 2012
    Posts
    32
    I don't understand that at all. How would that work?

  9. #9
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,645
    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
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. #10
    Join Date
    Nov 2010
    Posts
    978
    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>

  11. #11
    Join Date
    Dec 2012
    Posts
    32
    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.

  12. #12
    Join Date
    Nov 2010
    Posts
    978
    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

  13. #13
    Join Date
    Dec 2012
    Posts
    32
    In my cakephp version the draggable divs come from the database so there's that to think about too. Thanks for your solution.

  14. #14
    Join Date
    Dec 2012
    Posts
    32
    The small peppermint mocha div can't be dragged. Maybe the show/hide functionality won't work after all.

  15. #15
    Join Date
    Dec 2012
    Posts
    32
    Never mind. Just needed to add $( "#draggable8" ).draggable(); in the jquery so that the peppermint mocha could be dragged after all.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles