Ajax
Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts

Thursday, 12 May 2016

Create News Feed In PHP

12:39 No Comments

Code To Create A Simple News Feed In PHP


Use Ajax & Jquery To Fetch & Populate News Feed . Make Ajax Call From Page Control Will go to specified PHP page through ajax call then fetch data in that PHP page and send data to callback to Ajax Call

See A simple Example below :-

HTML PAGE CODE 


<html>


<head>


//Required CSS  / JSS Files


</head>


<body>


<div id="news"></div>


//Click Button Below To Fetch News Feeds


<input type="button" onclick="GetNews()" value="Get News Feed" />


<script>


    function GetNews()


    {


        $("#news").load("path_to/AjaxFetchData.php")


    }


</script>


</body>


</html>





AjaxFetchData.php File Code






//Sql Query To Fetch News Feed From Database


$con= Initialize it with connection Details for database


$sql = "Select Top 50 from TblNews";


$result = $result=mysqli_query($con,$sql);


while($row =  $result->fetch_assoc())


{


    echo("<div class='NewsFeed'>");


    echo("<div class='title'>" . $row['title'] . "</div>");


    echo("<div class='body'>" . $row['body'] . "</div>");


    echo("</div>");








}
























            

          

          

        

Tuesday, 26 April 2016


          

        









How To Use Progress Bar With Ajax Request Jquery






10:40


No
Comments














Use The Code Below To Have Progress Bar with %age Complete For Fetching Data









Preview Of Jquery Ajax Loader

HTML CODE 




<div id="progressbar">

    <div class="progress-label">Loading...</div>



</div>






CSS CODE



.progress-label {

    float: left;

    margin-left: 50%;

    margin-top: 5px;

    font-weight: bold;

    text-shadow: 1px 1px 0 #fff;



}



Javascript / Jquery Code



  $(function () {

      var progressbar = $("#progressbar"),

          progressLabel = $(".progress-label");



      progressbar.progressbar({

          value: false,

          change: function () {

              progressLabel.text(progressbar.progressbar("value") + "%");

          },

          complete: function () {

              progressLabel.text("Complete!");

          }

      });



      function progress() {

          var val = progressbar.progressbar("value") || 0;



          progressbar.progressbar("value", val + 1);



          if (val < 99) {

              setTimeout(progress, 100);

          }

      }



      setTimeout(progress, 3000);



  });























        

      












Subscribe to:
Posts (Atom)