www.webdeveloper.com
Results 1 to 12 of 12

Thread: onclick display variable content

  1. #1
    Join Date
    Nov 2010
    Posts
    6

    onclick display variable content

    I'm trying to make a basic rss reader with a google reader-esque functionality of clicking on article names and being able to expand/collapse that article. I'm working on the expand part and am going crazy. I am having no trouble getting content and displaying it without the onclick function but when I try to integrate onclick I can just get the titles.


    here's the snippet. any help?



    Code:
    
    
    
    <!-- HTML -->
    <body>
    <div id="feeddiv"></div>
    
    
    
    <script type="text/javascript">
    
    
    
    
    //	feed stuff using Google Feed API
    
    
    
        function feedLoaded(result)
    	{
          if (!result.error)
    	   {
            // Grab the container we will put the results into
            var container = document.getElementById('feeddiv');
            container.innerHTML = '';
            // Loop through the feeds, putting the titles onto the page.
            for (var i = 0; i < result.feed.entries.length; i++)
    		 {
    		  var entry = result.feed.entries[i];
    		  var content = entry.content;
    		  var title = entry.title;
    		  var url = entry.link;
    		  var div = document.createElement('div'); //parentDiv for articles
    		 
    		  var articleTitle = document.createElement('div');
    		  articleTitle.setAttribute('name', i); //set articleTitle name to article's place in array
    		  articleTitle.setAttribute('style', 'font-weight:bold;font-size:15px;');  
    		  articleTitle.innerText = title;
    		  articleTitle.onclick  = function() {populate(content, title, url, i);};
    		 
    		  div.appendChild(articleTitle); //adds title to div
    
    		  container.appendChild(div); //adds div to the container
            }
          }
        }
    	
        
        function populate(content,title, url, i)
        {
        
        var article = document.getElementByName(i); //gets articleTitle
       
         	//clickable title
    	  var a = document.createElement('a'); //creating title link
    	  var href = document.createElement('href'); 
    	  a.setAttribute('href', url); //putting actual url into html
    	  a.setAttribute('style', 'font-size:25px;');
    	  a.innerText = title;//still puts into html
    
    	//Text
        var snippet = document.createElement('p'); //creates <p> to throw articles in
        snippet.innerHTML = content; //renders the article
        
        article.appendChild(a);
        article.appendChild(snippet);
        
        }
    </script>
    </body>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    		  articleTitle.setAttribute('id', 'div'+i); // (name is invalid for div, numeric value is invalid) set articleTitle name to article's place in array
    		  articleTitle.style.cssText = 'font-weight:bold;font-size:15px;';  // x-browser version. Better to set this in the css
    		  articleTitle.innerHTML = title; // x-browser
    		  articleTitle.count  =  'div'+i; // set a variable
    		  articleTitle.onclick  = function() {populate(content, title, url, this.count);};  // pass a variable
    Code:
        function populate(content,title, url, i)
        {
        
        var article = document.getElementById(i); //gets articleTitle
       
         	//clickable title
    	  var a = document.createElement('a'); //creating title link
    	  // var href = document.createElement('href'); no such element 
    	  a.setAttribute('href', url); //putting actual url into html
    	  a.style.cssText = 'font-size:25px;'; // set in css
    	  a.appendChild(document.createTextNode(title)); // dom method
    
    	//Text
        var snippet = document.createElement('p'); //creates <p> to throw articles in
        snippet.innerHTML = content; //renders the article
        
        article.appendChild(a);
        article.appendChild(snippet);
        
        }
    Last edited by Fang; 11-06-2010 at 06:11 AM.

  3. #3
    Join Date
    Nov 2010
    Posts
    6
    Thanks, but now it's only opening the last feed entry no matter what entry title you click

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Can you give a link?

  5. #5
    Join Date
    Nov 2010
    Posts
    6
    deliverss.com/log.php

    username: a
    pass: a

    it looks like its only assigning the id of the last entry
    i'm working on making it collapsible so right now you can only open 1 at a time but you can see the problem

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    login not working

  7. #7
    Join Date
    Nov 2010
    Posts
    6
    login.php, my bad

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Off line?

  9. #9
    Join Date
    Nov 2010
    Posts
    6

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Getting "Server not found" message

  11. #11
    Join Date
    Nov 2010
    Posts
    6
    thats really weird, link works perfectly for me

    I was getting a problem where every time i clicked an article it would populate underneath where i clicked every time I clicked so I took care of that. right now it will only open 1 article at a time but still, only opens the last article
    here's what the code looks like now
    Code:
    
    <?php
    include 'header.php'
    ?>
    <!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>Home</title>
    <style type="text/css">
    li { list-style-type: none;}
    #feeddiv {width:850px; height:600px; overflow-y:scroll; overflow-x:hidden; position:fixed; left:400px;}
    </style>
    <script type="text/javascript"  
    src="http://www.google.com/jsapi?key=ABQIAAAAT-M_AWbUnFMLr3WF4tCRAxTdanatGijD95EU6zFhHL5RfrvmKxTeLSJA69GoXkiHiwl5yo0GOYCtlA">
    </script>
    
    <script type="text/javascript">
    
    
    
    //*******************************************************************
    //onclick clear add text field
    function clearText(field)
    {
        if (field.defaultValue == field.value) field.value = '';
        else if (field.value == '') field.value = field.defaultValue;
    }
    //*******************************************************************
    
    
    //*******************************************************************
    //makes feed names pop
    function mouseover(id) 
    { 
    document.getElementById(id).style.backgroundColor='orange'; 
    } 
    function mouseout(id) 
    { 
    document.getElementById(id).style.backgroundColor='white'; 
    }
    //*******************************************************************
    
    //Load Google Ajax Feed API (version 1)
    google.load("feeds", "1")
    
    //*******************************************************************
    //search for feed url of website
        function OnLoad()
    	 {
          // The page to lookup a feed on.
    	        var url = addFeed.value;
          // Call lookupDone when the search is complete.
          google.feeds.lookupFeed(url, lookupDone);
        }
        
        function lookupDone(result)
    	 {
          // Make sure we didn't get an error.
          if (!result.error && result.url != null) {
            var content = document.getElementById('content');
            var url = result.url;
    		var site = url;
    		var variable = "?feed=";
    		var final = variable+site;
    		var realUrl = document.location.href;
    		realUrl += final;
    		location.replace(realUrl);		
          }
        }
        google.setOnLoadCallback(OnLoad);
    //*******************************************************************
    </script>
    </head>
    
    
    <body>
    <?php
    
    if($_SESSION['entered'] == false)
    {
    	echo "<meta http-equiv='refresh' content='0; url=login.php'>";
    	exit();
    }
    
    ?>
    
    <h4>You're Logged In</h4>
    <h6>Hello, <?php echo $_SESSION['user'];?> </h6>
    
    
       <form method="post" action="home.php" name="home" id="home"> 
    	     <input type="text" name="addFeed" id="addFeed" size="28" value="Enter Site Url ex: digg.com" onFocus="clearText(this)" onBlur="clearText(this)"/>
        	 <input type="button" name="askedFeed" id="askedFeed" value="Add Feed" onclick="OnLoad();" />
    
         </form>
         <div id="content"></div>
         <div id="feeddiv"></div>
         <a href="./Twitter/clearsessions.php">Sign Out</a>
         
         
    <?php
    
    
    $username = $_SESSION['user'];
    $newFeed = $_GET['feed'];
    
    //grab feedList in order to check for duplicates
    $grabFeedList = mysql_query("SELECT feedList FROM users WHERE username = '$username'");
    while($row = mysql_fetch_array($grabFeedList))
    {
    	$feedList = $row['feedList'];
    }
    $explodedList = explode("&", $feedList);
    
    for($c=0; $c<=count($explodedList)-1; $c++)
    {
    	$check = 0;
    	if($explodedList[$c] == $newFeed)
    	{
    	$check = 1;
    	}
    }
    if($check>0)
    {
    
    if($newFeed=='')
    {
    echo "Add Your Feeds Here";
    }
    else
    {
    echo "$newFeed Has Already Been Added";
    $newFeed = '';
    echo '<META HTTP-EQUIV=Refresh CONTENT="2;url=home.php">';
    }
    }
    
    
    
    
    //if user has pressed Add Feed button
    if($newFeed != '')
    {
    
    echo 
    '<script type="text/javascript">
    location.replace("home.php");
    </script>';
    
    //gets the feedList from the DB
    $grabFeedList = mysql_query("SELECT feedList FROM users WHERE username = '$username'");
    while($row = mysql_fetch_array($grabFeedList))
    {
    	$feedList = $row['feedList'];
    
    }
    
    
    //if user has not added a feed yet feedList will = "". FeedNames will also be "" in this case
    if($feedList == "")
    {
    
    //create an array to store feeds in
    $newFeedList = array($newFeed);
    
    //implode string for futureproofing
    $finishedList = implode("&", $newFeedList);
    
    mysql_query("UPDATE users
    			SET `feedList` = '$finishedList'
    				WHERE username = '$username'")
    				or die(mysql_error());
    }
    
    else
    
    {
    //if the add feed button has been pressed
    
    $newFeedList = array($feedList);
    array_push($newFeedList, $newFeed);
    
    
    //implode array to prep for DB entry
    $finishedList = implode("&", $newFeedList);
    
    mysql_query("UPDATE users
    		SET `feedList` = '$finishedList'
    			WHERE username = '$username'")
    			or die(mysql_error());
    			
    }		
    
    //Grab all the feeds for the user and make text for each feed
    $grabFeedList = mysql_query("SELECT feedList FROM users WHERE username = '$username'");
    
    
    while($row = mysql_fetch_array($grabFeedList))
    {
    	$feedList = $row['feedList'];
    }
    
    $explodedList = explode("&", $feedList);
    
    
    for($c=0; $c<=count($explodedList)-1; $c++)
    {
    	$rss = $explodedList[$c];
    	$feedName = $explodedList[$c];
    	//clean up site name
        $omit = array('www.', 'com', 'net', 'org', 'edu', 'http', ':', 'rss', 'feeds.feedburner' ,'.', '.com/', '//', '/news', '/index', 'xml', '/', 'content', 'feed', 'proxygoogle');
        $cleanedFeed = str_replace($omit, "", $feedName);
    	$finalFeed = ucfirst($cleanedFeed);
    	echo "<div id=$c width=20px onmouseover=mouseover($c) onmouseout=mouseout($c) onclick=loadF('$rss') style=width:250px>";
    	echo $finalFeed;
    	echo "</div>";
    }
    }
    
    //Grab FeedList When They Have Not Added Feed
    
    else
    {
    	
    	
    //Grab all the feeds for the user and make text for each feed
    $grabFeedList = mysql_query("SELECT feedList FROM users WHERE username = '$username'");
    
    
    while($row = mysql_fetch_array($grabFeedList))
    {
    	$feedList = $row['feedList'];
    }
    
    
    $explodedList = explode("&", $feedList);
    
    
    for($c=0; $c<=count($explodedList)-1; $c++)
    {
    	$rss = $explodedList[$c];
    	$feedName = $explodedList[$c];
    	//clean up site name
        $omit = array('www.', 'com', 'net', 'org', 'edu', 'http', ':', 'rss', 'feeds.feedburner' ,'.', '.com/', '//', '/news', '/index', 'xml', '/', 'content', 'feed', 'proxygoogle');
        $cleanedFeed = str_replace($omit, "", $feedName);
    	$finalFeed = ucfirst($cleanedFeed);
    	echo "<div id=$c width=20px onmouseover=mouseover($c) onmouseout=mouseout($c) onclick=loadF('$rss') style=width:250px>";
    	echo $finalFeed;
    	echo "</div>";
    }
    	
    }
    ?>  
    
    
    <script type="text/javascript">
    //	feed stuff using Google Feed API
    
     function loadF(string) 
     {
          // Create a feed instance that will grab feeds
          var feed = new google.feeds.Feed(string);
          feed.setNumEntries(10);
          
          // Calling load sends the request off.  It requires a callback function.
          feed.load(feedLoaded);
     }
     
        google.setloadFCallback(loadF);
           function feedLoaded(result)
    	{
    
          if (!result.error)
    	   {
            // Grab the container we will put the results into
            var container = document.getElementById('feeddiv');
            container.innerHTML = '';
    		
            // Loop through the feeds, putting the titles onto the page.
            for (var i = 0; i < result.feed.entries.length; i++)
    		 {
    		  var entry = result.feed.entries[i];
    		  var content = entry.content;
    		  var title = entry.title;
    		  var url = entry.link;
    		  
    		  var div = document.createElement('div'); //parentDiv for articles
    		  var set = document.createElement('fieldset');
    		  var articleTitle = document.createElement('div');
    		  articleTitle.setAttribute('id', 'div'+i); // set articleTitle name to article's place in array
    		  var titleText = document.createElement('div');
    		  titleText.innerHTML = title;
    		  titleText.style.cssText = 'font-weight:bold;font-size:15px;';
    		  articleTitle.count  =  'div'+i; // set a variable
    		  articleTitle.onclick  = function() {populate(content, title, url, this.count);};  // pass a variable
    		  
    		  articleTitle.appendChild(titleText);
    		  set.appendChild(articleTitle);
    		  div.appendChild(set); //adds title to div
    		  container.appendChild(div); //adds div to the container
            }
          }
        }
        
        
         function populate(content,title, url, i)
        { 
        	if(document.getElementById(title))
        	{
        	 var article = document.getElementById(i); //gets articleTitle
    	 article.removeChild(br);
    	 article.removeChild(a);
    	 article.removeChild(snippet);
    	  }
    	  else
    	  {
    	   var article = document.getElementById(i); //gets articleTitle
              var br = document.createElement("br");
         	  article.appendChild(br);
    	//clickable title
    	  var a = document.createElement('a'); //creating title link
    	  a.setAttribute('href', url); //putting actual url into html
    	  a.style.cssText = 'font-size:25px;'; // set in css
    	  a.setAttribute('id', title);
    	  a.appendChild(document.createTextNode(title)); // dom method
    	//Text
       	  var snippet = document.createElement('p'); //creates <p> to throw articles in
       	  snippet.style.cssText = 'font-size:none;';
    	  snippet.innerHTML = content; //renders the article
       	  article.appendChild(a);
    	  article.appendChild(snippet);
    	  }
        }
       	
    </script>
    </body>
    </html>

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    These variables are undefined:
    Code:
         function populate(content,title, url, i)
        { 
        	if(document.getElementById(title))
        	{
        	 var article = document.getElementById(i); //gets articleTitle
    	 article.removeChild(br);
    	 article.removeChild(a);
    	 article.removeChild(snippet);
    	  }
    	  else
    Without seeing the live document I can't see the problem.
    I can see your Apache placeholder page when using your IP address, so there is a configuration error somewhere.

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