New Topic/Question
Reply
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.
16 Replies - 553 Views - Last Post: 01 January 2013 - 08:19 AM
Rate Topic:
MultiQuoteReplies To: How to refresh just one side of the page
#4
gregwhitworth
- Tired.
-
Reputation: 200
- Posts: 1,561
- Joined: 20-January 09
Re: How to refresh just one side of the page
Posted 27 December 2012 - 11:26 AM
This post has been edited by gregwhitworth: 27 December 2012 - 11:29 AM
Was This Post Helpful?
1
#5
makamo66
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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/
http://www.dreaminco...-in-javascript/
Was This Post Helpful?
0
#6
gregwhitworth
- Tired.
-
Reputation: 200
- Posts: 1,561
- 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
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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
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.
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
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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
#11
makamo66
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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
- D.I.C Lover
-
Reputation: 2486
- Posts: 8,528
- 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:
some.js:
layout.css:
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
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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
- D.I.C Lover
-
Reputation: 2486
- Posts: 8,528
- 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
- New D.I.C Head
Reputation: -5
- Posts: 34
- 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
|
|
| 