problem loading content within same div tag.....

237 views
Skip to first unread message

alto

unread,
Jul 4, 2012, 5:21:02 AM7/4/12
to mootool...@googlegroups.com
i m having the same problem as in the below code.... 
when user clicks on the links in the left hand column it opens link page in new 
tab, instead in the content section, 

i want the content of  the link, which user has clicked should appear in the right hand side content area....

also what link is clicked should appear in the url 

it is possible through AJAX and JAVASCRIPT but i m not getting how to do that...


html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Paul Sorvino Foods Products</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Paul Sorvino Foods Product offering page. This page shows all of t oe products offered by Paul Sorvino Foods." />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="masthead">
    <center>
        <h3 class="normal">Product Listing</h3>
    </center>
</div>
<div id="top_nav" >
    <a href="index.htm" target="_top">PSF HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="SauSpec.htm" target="_top">SAUSAGE PACKAGING SPECS</a>&nbsp;&nbsp;
    <a href="contact_us.htm" target="_top">INFORMATION REQUEST</a>&nbsp;&nbsp;
    <a href="Sausage_2.ppt" target="_top">SAUSAGE MARKETING PPT</a>
</div>
<div id="container" ">
    <div id= "left_col" > 
        <center>
            <h6>Gourmet <i>Pork Sausage</i></h6>
        </center>
        <ul>
            <li><a href="pdb_reading11.php">Gourmet Broccoli Rabe &amp; Romano Cheese Pork Sausage</a></li>
            <li><a href="GarlicHerb_1.htm">Gourmet Garlic, Herb &amp; Sun Dried Tomato Pork Sausage</a></li>
            <li><a href="SweetItalian_1.htm">Gourmet Sweet Italian Style Pork Sausage</a></li>
            <li><a href="HotItalian_1.htm">Gourmet Hot Italian Style Pork Sausage</a></li>
        </ul>
        <center>
            <h6><i>Seafood Items</i></h6>
        </center>
        <ul>
            <li><a href="JumboLumpCrabCakes_1.htm">Gourmet Maryland Style Jumbo Lump Crab Cakes</a></li>
            <li><a href="SauteShrimp-1.htm">Premium Wild American Sautéing Shrimp</a></li>
            <li><a href="StuffedShrimp_1.htm">Premium Wild American Shrimp Stuffed with Jumbo Lump Crabmeat</a></li>
        </ul>
    </div>
    <div id="page_content">
        <p>This is my page content</p>
    </div>
</div>
<div id="footer">
    
</div>

</body>

</html>

css code

#masthead {border-bottom:3px #FF0000 solid;}
#top_nav {border-bottom: 3px #FF0000 solid; height:25px; padding:5px;}
#container {position: relative;width: 100%; border-bottom:3px ##FF0000 solid;}
#left_col {border-right: 2px #FF0000 solid; width: 200px; position: absolute; left: 0px; top: 0px;}
#page_content {margin-left: 200px;}
#footer {width: 100%;}
body {color: #FF0000; background-color: #000000}
a {color: #FFFFFF;}
a:visited {color: #FF0000;}
a:hover {color: #008000;font-size: 120%;}
h1 {font-size: 350%}
h2 {font-size: 330%}
h3.normal {font-size: 310%}
h3.fancy{font-size:310%; font-family:Old English Text MT}
h4 {font-size:250%}
h4.fancy {font-size:250%; font-family:Old English Text MT}
h5 {font-size:150%}
h6 {font-size:110%}




Sanford Whiteman

unread,
Jul 4, 2012, 3:44:21 PM7/4/12
to alto
Please put this in a jsFiddle and we'll work through it with you.
Runnable, editable code is really essential.

-- Sandy

alto

unread,
Jul 5, 2012, 12:21:38 AM7/5/12
to mootool...@googlegroups.com
here is jsFiddle....

Sanford Whiteman

unread,
Jul 5, 2012, 12:48:21 AM7/5/12
to alto
First, you don't need the HEAD and BODY in jsFiddle -- the content of
the `HTML` pane is automatically wrapped in the <BODY> tag. So
http://jsfiddle.net/DbWhE/1/ is your starting point.

But you don't even have any JS in the `JavaScript` pane? What have you
tried? Have you gone through the MooTorial and the examples on the
Moo site for Request.HTML? I'd like to help, but I don't feel
comfortable doing *all* the work. Is this your first exposure to JS?

Also look at this example: http://jsfiddle.net/zalun/NF2jz/light/#

-- S.

alto

unread,
Jul 5, 2012, 5:00:59 AM7/5/12
to mootool...@googlegroups.com
 i know just basic about the javascript i.... so its new to me... if u help
me how to do it .... or which functions or methods i have to use it it will 
much helpful.... 

Sanford Whiteman

unread,
Jul 5, 2012, 5:54:55 PM7/5/12
to alto
> i know just basic about the javascript i.... so its new to me... if u help
> me how to do it .... or which functions or methods i have to use it it will
> much helpful....

You have looked at the example I linked to?

-- S.

alto

unread,
Jul 9, 2012, 4:11:34 AM7/9/12
to mootool...@googlegroups.com
Sanford Williams.... i have gone through the example you have linked....
but i doesn't gave me any hint of how to relate it to my problem....
further help would be appreciated...

alto

unread,
Jul 10, 2012, 4:54:18 PM7/10/12
to MooTools Users
Sanford Whiteman please help me with this issue.... i got stuck on
this problem since long time....
i have gone through the link you have given... but it doesn't help
me... could you help me with it....
i will be very thankful to you.....plz... my project submission time
is near... and i got stuck on this just one
problem ....so please help me......

Arian Stolwijk

unread,
Jul 10, 2012, 5:11:10 PM7/10/12
to mootool...@googlegroups.com
I don't think you should expect anyone write any code for you from scratch, so you really have to try yourself first!

If I understand correctly you want to load the linked pages with ajax if you click on them.

Lets reverse that sentence to understand the problem better.

  1. Clicking links should do something
    1. It should somehow select the links: http://mootools.net/docs/core/Element/Element#Window:dollars
    2. It if those selected links are clicked something must happen: http://mootools.net/docs/core/Element/Element.Event#Element:addEvent
  2. It should not follow the link: http://mootools.net/docs/core/Types/DOMEvent#DOMEvent:preventDefault
  3. It should load the linked page
    1. Get the url/href attribute of the element: http://mootools.net/docs/core/Element/Element#Element:get
    2. It should load the linked page in the right element:
      1. Select right element: http://mootools.net/docs/core/Element/Element#Window:document-id
      2. load the content: http://mootools.net/docs/core/Request/Request.HTML#Element:load
All those links have examples. You could try to put something together in the JavaScript field in the JSFiddle and post it back so we can help you a bit further. 

As you have not tried any JavaScript yet, I guess you might learn some JavaScript/programming basics first. Good resources can be found all over the internet, for example:

Sanford Whiteman

unread,
Jul 10, 2012, 5:23:18 PM7/10/12
to Arian Stolwijk
Thanks, Arian. Well broken-down, of course.

Alto, there's a disconnect here between your current skills and your
approach to this project -- I think you should be building client (?)
work using full-page loads (non-Ajax) for now and learning JS on the
side. I know it can be very helpful to have a real-world assignment to
force you to learn, but in any case asking us to do it for you isn't
learning.

-- S.

alto

unread,
Jul 11, 2012, 3:27:05 AM7/11/12
to MooTools Users
Arian Stolwijk n Sanford Whiteman ..... its not because i dont want
to learn or i dont want to write the code
by myself.... i have been searching for this problem and at the end i
didnt come with any solution ...and also because of
time limit i have to do it as early as possible....... but thanks for
ur suggestions ....

Tim Wienk

unread,
Jul 11, 2012, 3:50:23 AM7/11/12
to mootool...@googlegroups.com
Look at Arian's elaborate description of your problem. He divided it
in steps and there's links to the related documentation pages. If you
can't work this out, I have agree with Sanford, and you should not
worry about these kinds of things (or use ready-made plugins), before
trying to create this yourself.

I tried to find a way to explain this in an easier way, but really...
the description Arian gave is all there is to it. It's literally one
line of code for each of the steps he mentioned, can't get easier than
that. So, this is against most of my principles, but just to get it
over with:

```
window.addEvent('domready', function(){

var elements = $$('#left_col a'); // Arian's step 1.1.
elements.addEvent('click', function(event){ // Arian's step 1.2.
event.preventDefault(); // Arian's step 2.
var href = this.get('href'); // Arian's step 3.1.
var target = document.id('page_content'); // Arian's step 3.2.1.
target.load(href); // Arian's step 3.2.2.
});

});
```

I hope you'll do more than just copy and paste that, and try to learn
from it. The only change I made was wrapping it inside a "domready"
event handler.

And I hope that the next time you have a question, you'll be able to
show us what you learnt, and give us some javascript to work with.

Dimitar Christoff

unread,
Jul 11, 2012, 3:43:20 PM7/11/12
to mootool...@googlegroups.com
Timmeh!

super nice and probably won't even get appreciated. you are just
feeding the culture of instant gratification through search and the
work of other people instead of doing something from scratch. I
thought arian had gone too far out and nearly spelt it to him

if this were stack overflow, his question would have been closed
before he could refresh the page. I hope when 'next time' comes, he
messages you directly :)

@alto when you can't do something yourself and can't learn how to do
it, you normally pay for a specialist to do it for you. say, your car
had broken down and needed fixing. would you expect somebody from the
car manufacturer to fix it or you because you were in a hurry and
could not learn how to do it yourself in time? just because it's code
and code is 'cheap' in all but time does not invalidate the principle.

my 2 cents anyway.
--
Dimitar Christoff

"JavaScript is to JAVA what hamster is to ham"
http://fragged.org/ - @D_mitar - https://github.com/DimitarChristoff

Sanford Whiteman

unread,
Jul 11, 2012, 4:13:12 PM7/11/12
to Dimitar Christoff
Not disagreeing... but to be as constructive as possible because I
don't like summary executions like on SO... Alto, the thing to put
under the microscope is *why* you promised to deliver a JS solution
when old-school HTML is more in your command.

What is it about delivering _and supporting_ JavaScript that compelled
you to do that? Would the client really notice? You can make some
incredible stuff with just CSS3 and HTML now, and while page refreshes
may seem so old-fashioned, in my experience non-technical clients
rarely audit you at that level. They may appraise the apparent
performance of your site, and sure Ajax *can* (but not always,
certainly) help with that. But if your site can respond snappily
(proper image/stylesheet caching, tight markup) and and looks cool,
well, that's a *big* start, even if you're generating full pages on
the server. And take another note of CSS3 -- learning those built-in
"special effects" can go a long way toward making the client think
you've done "programming" when actually you've done more like
designing and declaring effects. Even concentrating on IE8-compatible
CSS, you can do good stuff (even though you won't get smooth movements
in IE8 without JS, so be it).

FYI, even casually using JS since... a very long time ago... I didn't
promise to build any Ajax-dependent solutions until I had probably 6
months of personal dabbling first, then another 6 months of putting
stuff in production for decorative enhancement but not for drawing the
functional parts of page. Only after that did I start to feel like I
could build a site that depended on JS for mission-critical functions
-- a site where if JS is turned on in the browser, it's going to be
used and there's no way you can reach the users to turn it off. Not
because I didn't think things would work most of the time, but because
I wasn't ready for the support scramble. Remember, bugs happen. Moo
isn't without them, and there are few things as frustrating as trying
to report a bug when you don't know what the proper behavior is.

-- S.

Dimitar Christoff

unread,
Jul 11, 2012, 4:52:32 PM7/11/12
to mootool...@googlegroups.com
On 11 July 2012 21:13, Sanford Whiteman <sa...@figureone.com> wrote:
> Not disagreeing... but to be as constructive as possible because I
> don't like summary executions like on SO... Alto, the thing to put
> under the microscope is *why* you promised to deliver a JS solution
> when old-school HTML is more in your command.
>

I _strongly_ agree with the SO policy on question quality. if it's not
a code question that can be answered by fixing posted/referenced code
or answering on issues relating to code or popular frameworks, there
is no value in it being there. People come in and just lay out their
specs all the time, hoping they get a coding solution.

++ for saying it out loud. he won't be the first nor the last to bite
more than he can chew.

there's a lesson to be learnt here through failure.

Sanford Whiteman

unread,
Jul 11, 2012, 5:07:10 PM7/11/12
to Dimitar Christoff
> I _strongly_ agree with the SO policy on question quality.

I strongly agree with their policy for them, I just find it hard to
enforce here... there may be (longer-winded for us) but more fruitful
ways to non-answer depending on the circumstances. Shouldn't there
still be somewhere to turn for a personalized, indulgent brush-off? ;)

(Alto, don't take it too hard, Dimitar is right. Go back and start
slower. I interviewed a designer last year who said he "knew jQuery"
but didn't know what an XHR was. That turned me off bigtime and he
shouldn't have been hired -- he was hired and then fired, my fault for
not taking the warning sign more seriously. I'd rather have someone
who knew how to design a nice site and flatly admitted they never even
added a <script> tag.)

-- S.




Reply all
Reply to author
Forward
0 new messages