www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 27 of 27

Thread: How to refresh just one side of the page

  1. #16
    Join Date
    Nov 2010
    Posts
    1,090
    you would think that this code:
    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:
    Code:
    $(ui.draggable).appendTo($(this));
    $(ui.draggable).css("position","");

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

  3. #18
    Join Date
    Nov 2010
    Posts
    1,090
    I can't see that happening. This code seems to work OK (only has the 300, 500 and 800 divs)...

    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());
    	
        $(".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>

  4. #19
    Join Date
    Dec 2012
    Posts
    32

    Right side div doesn't obey jquery command

    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();
        });
    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.

  5. #20
    Join Date
    Nov 2010
    Posts
    1,090
    I haven't looked at your code, but it sounds like you didn't read my advice back in post #16

    Quote Originally Posted by xelawho View Post
    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:
    Code:
    $(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.

  6. #21
    Join Date
    Dec 2012
    Posts
    32
    I added those two lines above so now it works but I still need to figure out why it works. This new code is a mystery to me.

  7. #22
    Join Date
    Nov 2010
    Posts
    1,090
    Code:
    $(ui.draggable).appendTo($(this));
    removes the draggable div from its original div on the left side and attaches it to the div on the right side (so that when the left hand div is hidden, the newly dropped div remains visible - because before, even though you dragged the div, it kept its position in the DOM)

    Code:
    $(ui.draggable).css("position","");
    removes the weird inline css styling that you had for those divs - I think you changed it now, but before it was making them go way over to the right. You could probably remove this line.

  8. #23
    Join Date
    Dec 2012
    Posts
    32
    xelawho at http://www.webdeveloper.com/forum/sh...43#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.

  9. #24
    Join Date
    Dec 2012
    Posts
    32

    Thanks

    Thanks for all of the useful input xelawho.

  10. #25
    Join Date
    Nov 2010
    Posts
    1,090
    You're very welcome. Glad you got it working. FWIW, I don't really like the way that the "previous" tiles remain visible when you click to see a new set, but I guess that's up to you.

  11. #26
    Join Date
    Dec 2012
    Posts
    32
    You have to click on the link again to make them disappear. Maybe I will change that some time so it's more intuitive but now I'm stuck on the calendar code. http://myownmealplanner.com/calendars/navigate If I delete the calendar css the right side of Saturdays seems to be the normal width but if it's there then the Saturdays are all squeezed together in one narrow column. I tried deleting css in steps to find out which css code is making it so narrow but I couldn't find it. I'm still working on it.

  12. #27
    Join Date
    Dec 2012
    Posts
    32
    The calendar was fixed by overwriting the jquery file with a newer one so that's taken care of now.

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