Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need hep with inputiing json

    I already have my script running on my website, however I would like to give it a sleeker look using javascript. But every time I add my json script to the new layout it ends up not working.

    (this is my json script )

    <script type="text/Javascript">
    $(window).load(function() {
    $('#splashscreen').fadeOut('3000,swing');
    $('#rss-title').hide();
    var rss_title;
    });

    $('#rssdata').ready(function()
    {
    var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=fc72a48bf0bb735150279edca4ef4563&_render=json&_callback=?';
    $.getJSON(pipe_url,function(data)
    {
    $(data.value.items).each(function(index,item)
    {
    var item_html = '<a href="'+item.link+'" target="_blank"><font color="#f50">&nbsp;&#187;&nbsp;</font>'+item.title+'<\/a>';
    $('#rssdata ul.rss-items').append(item_html);
    });
    $('#rssdata ul.rss-items').fadeIn('3000,swing');
    });
    });
    </script>








    This is my where i want to add it within the new page ...

    <div class="rss-title">
    <strong> &#187;Newscop</strong>
    </div>
    <div id="tabs">
    <script>
    $(function() {
    $( "#tabs" ).tabs();
    });
    </script>
    <ul>
    <li><a href="#tabs-1">News cop</a></li>
    <li><a href="#tabs-2">Corrections</a></li>
    <li><a href="#tabs-3">Login</a></li>
    </ul>
    <div id="tabs-1">
    ------!!!! ADDING MY JSON HERE!!!!!!!-----
    </div>
    <div id="tabs-2">
    <p>Paragraph</p>
    </div>
    <div id="tabs-3">
    <h2>Login Page</h2>
    <form name="loginform" action="login.php" method="post" />
    <fieldset>

    <center>
    <label>Username: <input type="text" name="Username"/></label>
    <br> <br>
    <label>Password: <input type="text" name="PassWord"/></label>
    </br>
    </center>
    <br>
    <center>
    <input class="placebuttons" type="reset" class="resetbutton"/>
    <input class="placebuttons"type="submit" value="Login" class="submitbutton"/>
    </center>
    </br>
    </fieldset>
    </form>

    I don't know why its not working like my current site ... if anyone has any suggestions it would be greatly appreciated.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    try this out and
    maybe get a nudge
    in the right direction ...

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <script src="htpp://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript">
    
     $(window).load(function() {
      var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=fc72a48bf0bb735150279edca4ef4563&_render=json&_callback=?';
      $.getJSON(pipe_url,function(data) {
      $(data.value.items).each(function(index,item) {
        var item_html = '<li><a href="'+item.link+'" target="_blank"><font color="#f50">&nbsp;»&nbsp;</font>'+item.title+'<\/a>';
        $('#tabs-1 ul').append(item_html);
       });
      });
     });
     
    </script>
    </head><body>
    <div class="rss-title">
     <strong> »Newscop</strong>
     </div>
     <div id="tabs">
     
     <ul>
     <li><a href="#tabs-1">News cop</a></li>
     <li><a href="#tabs-2">Corrections</a></li>
     <li><a href="#tabs-3">Login</a></li>
     </ul>
     <div id="tabs-1">
     <ul></ul>
     </div>
     <div id="tabs-2">
     <p>Paragraph</p>
     </div>
     <div id="tabs-3">
     <h2>Login Page</h2> 
     <form name="loginform" action="login.php" method="post" />
     <fieldset>
     <center>
     <label>Username: <input type="text" name="Username"/></label>
     <br> <br> 
     <label>Password: <input type="text" name="PassWord"/></label>
     </br>
     </center>
     <br>
     <center>
     <input class="placebuttons" type="reset" class="resetbutton"/> 
     <input class="placebuttons"type="submit" value="Login" class="submitbutton"/>
     </center>
     </br>
     </fieldset>
     </form>
    </body>
    </html>
    Last edited by DaveyErwin; 04-28-2014 at 04:49 AM.

  • Users who have thanked DaveyErwin for this post:

    xer0o1 (04-28-2014)

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks it Worked

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I Have one more question. How would i go about making it only load like 5-10 results and then make it add more by clicking a button?

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by xer0o1 View Post
    I Have one more question. How would i go about making it only load like 5-10 results and then make it add more by clicking a button?
    it seems like the ajax call gives you hundreds of items. that makes it easy to grab them all once, and then server them up 10 at a time in js. that allows dozens of "more" clicks without re-hitting the server.

    basically, you need two more variables somewhere: pageNumber and pageLength
    you can hard-code the length, but you need the user to be able to adjust the pageNumber variable.
    you then move the paint routine out of the callback so that it can be called on its own.


    with items outside of the callback and a stand-alone renderer, a more button can be as simple as <input type=button onclick="pageNumber++; render()" value=more >

    once you have the html adjusting the pageNumber, the following should render 10 item chunks. you might want to add a $('#tabs-1 ul').html("") to the top of render() to clear out old items before adding new ones, depends on the format of your site.


    Code:
    <script type="text/javascript">
    
    var pageLength=10,
      pageNumber=0,
      items=[];
    
    function render(){
         $(items).slice(pageNumber * pageLength, (pageNumber+1) * pageLength )
         .each(function(index,item) {
                      $('#tabs-1 ul').append('<li><a href="'+item.link+'" target="_blank"><font color="#f50">&nbsp;»&nbsp;</font>'+item.title+'<\/a>');
        });
    }
    
    
    $(window).load(function() {
          $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=fc72a48bf0bb735150279edca4ef4563&_render=json&_callback=?', function(data) {
               items=data.value.items;
               render();
          });
    });
     
    </script>
    this is a quick code job and can be improved with bounds protection, updating navigation indicators in render(), a counter, building pagination html in the pipes callback based on how many items there are, etc.
    Last edited by rnd me; 04-28-2014 at 06:28 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    xer0o1 (04-29-2014)

  • #6
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Will I need to place this in a specific area in my code?

  • #7
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Nevermind... stupid question thank you !!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •