How to refresh just one side of the page

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 895 Views - Last Post: 01 January 2013 - 08:19 AM Rate Topic: -----

#1 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

How to refresh just one side of the page

Posted 26 December 2012 - 10:04 AM

See http://myownmealplan...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 the principles are the same as for a normal website.

Is This A Good Question/Topic? 0
  • +

Replies To: How to refresh just one side of the page

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3458
  • View blog
  • Posts: 11,707
  • Joined: 12-December 12

Re: How to refresh just one side of the page

Posted 26 December 2012 - 11:38 AM

Cross-posted here and here.
Was This Post Helpful? 1
  • +
  • -

#3 no2pencil  Icon User is online

  • Toubabo Koomi
  • member icon

Reputation: 5303
  • View blog
  • Posts: 27,188
  • Joined: 10-May 07

Re: How to refresh just one side of the page

Posted 26 December 2012 - 11:41 AM

Cross posting is fine, as long as he doesn't pull this crap anymore.
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: How to refresh just one side of the page

Posted 27 December 2012 - 11:26 AM

I see that you got the refresh working (unless I'm misunderstanding what your intentions were) Never mind I misunderstood your issue. You'll have to do an ajax load to that URL to get the content returned (it would be best to get a REST API setup, but this can work). One thing that you'll want to work on though is every time I drag it, that item's calorie count continues to get added. I suggest adding a class in so that the item that's already in the box doesn't continue to get added.

Posted Image

This post has been edited by gregwhitworth: 27 December 2012 - 11:29 AM

Was This Post Helpful? 1
  • +
  • -

#5 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 27 December 2012 - 01:32 PM

SpAm101 from dreamincode.net gave me a solution that does just that but I haven't implemented it yet.
http://www.dreaminco...-in-javascript/
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: How to refresh just one side of the page

Posted 27 December 2012 - 04:20 PM

Have you looked at the jQuery load() function yet?
Was This Post Helpful? 0
  • +
  • -

#7 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 28 December 2012 - 01:50 PM

If you start with http://myownmealplan...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.
Was This Post Helpful? 0
  • +
  • -

#8 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 29 December 2012 - 07:59 AM

I took the advice of Rasmus Lindström at http://www.devppl.co...111.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.
Was This Post Helpful? 0
  • +
  • -

#9 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 29 December 2012 - 12:37 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?
Was This Post Helpful? 0
  • +
  • -

#10 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 30 December 2012 - 09:13 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.
Was This Post Helpful? 0
  • +
  • -

#11 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 30 December 2012 - 03:00 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.
Was This Post Helpful? 0
  • +
  • -

#12 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2982
  • View blog
  • Posts: 10,299
  • Joined: 08-August 08

Re: How to refresh just one side of the page

Posted 31 December 2012 - 08:45 AM

I would do this all with HTML, CSS, and Javascript. A basic example you should be able to work from:
thepage.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>example</title>
<script type="text/javascript" src="some.js"></script>
<link href="layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="thehead" class="mycontent" >Header</div>
<div id="leftwrapper">
<div id="one" name="one" class="mycontent" onclick="togglediv('one');">ONE</div>
<div id="two" name="two" class="mycontent" onclick="togglediv('two');">TWO</div>
<div id="three" name="three" class="mycontent" onclick="togglediv('three');">THREE</div>
<div id="four" name="four" class="mycontent" onclick="togglediv('four');">FOUR</div>
</div>
<div id="rightwrapper">
</div>
</body>
</html>



some.js:
function togglediv(id)
{
	var par = parent.document.getElementById(id).parentNode.id;
	if(par=='leftwrapper') {
		document.getElementById('rightwrapper').appendChild(document.getElementById(id));
	} else {
		document.getElementById('leftwrapper').appendChild(document.getElementById(id));
	}
}

layout.css:
@charset "UTF-8";

#thehead {
	position: absolute;
	top: 0px;
	left: 10px;
	height: 100px;
	width: 445px;
	background-color: #FFEEBB;
	padding: 20px;
	border-radius: 15px;
}

#leftwrapper {
	position: absolute;
	top: 155px;
	left: 10px;
	width: 200px;
	height: 100%;
	background-color: #AAAAAA;
	padding: 20px;
	border-radius: 15px;
}

#rightwrapper {
	position: absolute;
	top: 155px;
	left: 255px;
	width: 200px;
	height: 100%;
	background-color: #CCCCCC;
	padding: 20px;
	border-radius: 15px;
}

.mycontent {
	position: relative;
	height: 55px;
	background-color: #EEAAAA;
	margin-top: 10px;
}

Was This Post Helpful? 1
  • +
  • -

#13 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 31 December 2012 - 09:21 AM

Thanks for your efforts but when I refresh the page the divs go back to the left side of the page. They're supposed to stay on the right side when I refresh the page. I think I need sessions.
Was This Post Helpful? 0
  • +
  • -

#14 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2982
  • View blog
  • Posts: 10,299
  • Joined: 08-August 08

Re: How to refresh just one side of the page

Posted 31 December 2012 - 09:53 AM

You could set the togglediv() function to make an Ajax call to a PHP script that would store the positions of each div in a session variable. Then when the page is loaded another PHP script would decide where to place them using that variable. If you tend to mix PHP and HTML in the same file this will be very tricky. See this link about separating these languages.
Was This Post Helpful? 0
  • +
  • -

#15 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to refresh just one side of the page

Posted 31 December 2012 - 02:13 PM

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.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2