JS: only display certain div

#1
Root23

Posted 19 January 2011 - 12:20 PM

Programmer

Members
144 posts

I have a layout that has a column on the right that will display the 'latest news'. The person I'm making this for doesn't' want it to show all the posts ever made in that section.. probably just the 1-3 most recent news updates.

I'm wondering if I could have one html page that contains all the news updates, each in their own div to separate each news update, but on the main page have Javascript pull out the the first few divs from that html page, and display them the div for news on the main page.

I'm just starting to learn some JS related programming, so I'm not sure of the full capabilities of what can, and can't, be done.

Basically the home page for the website will shows the 3 most recent news updates, pulled from a separate html page on the same server. Then, if the person wants to see more of the news updates I'll have a 'view all' link that just open up the html page that had all the news updates.

Maybe there's a better way to do this? I'm guessing there might be some PHP style 'blog' type scripts for this sort of thing, but I don't know anything about PHP. Plus I was wanting to use this as way to practice some JS.

What do you guys/gals think?

#2
DarkLordofthePenguins

Posted 21 January 2011 - 02:17 PM

Programming Expert

Members
409 posts

This is not something Javascript can do, but rather something done on the server end, with a server scripting language like PHP.

Programming is a journey, not a destination.

#3
xx3004

Posted 28 February 2011 - 07:49 PM

Newbie

Members
13 posts

Obviously you can, let's use Ajax. In this case, I will use jQuery Ajax.

[Information about jQuery if you don't know] Put this between <head> and </head>

<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>

Next, assume that the page that contains the news name news.html, the news in that page are contained in the div with id respectively <div id="news_1"> <div id="news_2"> <div id="news_3">. Insert this code whenever you want the news appear, must be after jQuery the code above (NOTE THAT THIS IS THE SIMPLIFY VERSION, IDEA ONLY, YOU STILL HAVE TO WORK ON IT):


for(i=0; i<=3; i++)//Let receive the news from the first 3 div news_1 news_2 and news_3

	{

	xx.ajax(

		{

		url: "news.html#news_"+i,

		dataType: "html",

		type: "POST",

		data: "action=updateTemplate&data="+newTemplate+"&user=<?php echo $_SESSION['user_id'] ?>",

		success: function(data, textStatus, jqXHR){document.write(data+"<br>");},

		error: document.write("Error occurs");}

		});

	}

I hope that help,
xx3004,

#4
Root23

Posted 03 April 2011 - 09:53 PM

Programmer

Members
144 posts

Thanks xx,

I ended up scrapping that project after the guy decided he wasn't ready to redesign his site yet, but I do appreciate the help. I'm sure I'll be able to use it in the future.

Hope you're enjoying that Pensacola weather! (My brother lived in Pensacola for a few years, and I was just down there last month (well PCB / Gulf Breeze) on vacation.. weather was so nice compared to up here!)

-root