jquery ajax
Showing posts with label jquery ajax. Show all posts
Showing posts with label jquery 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>");








}
























            

          

          

        

Saturday, 30 April 2016


          

        









Parse Json file In Jquery Ajax 






21:23


No
Comments












See Running Demo Here -Demo For Parsing Json File In Jquery





Json File Data


 [

    {

        "alignment1": "TM"

    },

    {

        "alignment2": "TLBR"

    },

    {

        "alignment3": "BL"

    },

    {

        "ruleTimer": "6"

    },

    {

        "music": "Enable"

    },

    {

        "rule1": "Rule 1"

    },

    {

        "rule2": "Rule 2"

    },

    {

        "rule3": "Rule 3"

    },

    {

        "rule4": "Rule 4"

    },

    {

        "ID1": "p7ZsBPK656s"

    },

    {

        "name1": "Disfigure - Blank [NCS Release]"

    },

    {

        "ID2": "__CRWE-L45k"

    },

    {

        "name2": "Electro-Light - Symbolism [NCS Release]"

    },

    {

        "ID3": "J2X5mJ3HDYE"

    },

    {

        "name3": "DEAF KEV - Invincible [NCS Release]"

    },

    {

        "color1": ""

    },

    {

        "color2": ""

    },

    {

        "color3": ""

    },

    {

        "color4": ""

    },

    {

        "color5": ""

    }



]






Index.html Code 


 <!doctype html>

<html>

<head>


    <title>How to Parse a JSON file using jQuery</title>

   

    <style>

        body{

            text-align: center;

            font-family: arial;

        }


        .button{

            margin:20px;

            font-size:16px;

            font-weight: bold;

            padding:5px 10px;

        }

    </style>



</head>

<body>

    <a href="data.json" target="_blank">Open JSON file</a><br />

    <input type="button" value="Get and parse JSON" class="button" />

    <br />

    <span id="results"></span>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


    <script>


        //When DOM loaded we attach click event to button

        $(document).ready(function() {

           

            //after button is clicked we download the data

            $('.button').click(function(){


                //start ajax request

                $.ajax({

                    url: "data.json",

                    //force to handle it as text

                    dataType: "text",

                    success: function(data) {

                       

                        //data downloaded so we call parseJSON function

                        //and pass downloaded data

                        var json = $.parseJSON(data);

                        //now json variable contains data in json format

                        //let's display a few itemscons

                        console.log("data is - "+json);

                       

                       // $.each(json, function(idx, obj) {

 

 //$.each(obj, function(idx, obj) {

 //console.log("one-"+obj+" "+idx);

 //$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");

 //});

//});



function Iterate(data)

{

    jQuery.each(data, function (index, value) {

        if (typeof value == 'object') {

            //alert("Object " + index);

            Iterate(value);

        }

        else {

             alert(index + "   :   " + value);

             $('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");

        }

    });


};


Iterate(json);

                       

                      //  $('#results').html('Plugin name: ' + json.alignment1);

                    }

                });

            });

        });

    </script>


</body>



</html>




































Parse Json file In Jquery Ajax With Object Under Object






21:18


No
Comments












See Running Demo Here -Demo For Parsing Json File In Jquery 





Json File Data



 [

    {

        "alignment1": "TM"

    },

    {

        "alignment2": "TLBR"

    },

    {

        "alignment3": "BL"

    },

    {

        "ruleTimer": "6"

    },

    {

        "music": "Enable"

    },

    {

        "rule1": "Rule 1"

    },

    {

        "rule2": "Rule 2"

    },

    {

        "rule3": "Rule 3"

    },

    {

        "rule4": "Rule 4"

    },

    {

        "ID1": "p7ZsBPK656s"

    },

    {

        "name1": "Disfigure - Blank [NCS Release]"

    },

    {

        "ID2": "__CRWE-L45k"

    },

    {

        "name2": "Electro-Light - Symbolism [NCS Release]"

    },

    {

        "ID3": "J2X5mJ3HDYE"

    },

    {

        "name3": "DEAF KEV - Invincible [NCS Release]"

    },

    {

        "color1": ""

    },

    {

        "color2": ""

    },

    {

        "color3": ""

    },

    {

        "color4": ""

    },

    {

        "color5": ""

    }



]







Index.html Code 



 <!doctype html>

<html>

<head>



    <title>How to Parse a JSON file using jQuery</title>

    

    <style>

        body{

            text-align: center;

            font-family: arial;

        }



        .button{

            margin:20px;

            font-size:16px;

            font-weight: bold;

            padding:5px 10px;

        }

    </style>





</head>

<body>

    <a href="data.json" target="_blank">Open JSON file</a><br />

    <input type="button" value="Get and parse JSON" class="button" />

    <br />

    <span id="results"></span>



    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>



    <script>



        //When DOM loaded we attach click event to button

        $(document).ready(function() {

            

            //after button is clicked we download the data

            $('.button').click(function(){



                //start ajax request

                $.ajax({

                    url: "data.json",

                    //force to handle it as text

                    dataType: "text",

                    success: function(data) {

                        

                        //data downloaded so we call parseJSON function 

                        //and pass downloaded data

                        var json = $.parseJSON(data);

                        //now json variable contains data in json format

                        //let's display a few itemscons

                        console.log("data is - "+json);

                        

                       // $.each(json, function(idx, obj) {

 

 //$.each(obj, function(idx, obj) {

 //console.log("one-"+obj+" "+idx);

 //$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");

 //});

//});





function Iterate(data)

{

    jQuery.each(data, function (index, value) {

        if (typeof value == 'object') {

            //alert("Object " + index);

            Iterate(value);

        }

        else {

             alert(index + "   :   " + value);

             $('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");

        }

    });



};



Iterate(json);

                        

                      //  $('#results').html('Plugin name: ' + json.alignment1);

                    }

                });

            });

        });

    </script>



</body>



</html>
























        

      












Subscribe to:
Posts (Atom)