geeksprogrammings: jquery ajax

Showing posts with label jquery ajax. Show all posts

Thursday 12 May 2016

Create News Feed In PHP

12:39 Posted by Unknown 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 Posted by Unknown 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 Posted by Unknown 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>

geeksprogrammings

Categories

Thursday 12 May 2016

Create News Feed In PHP

Code To Create A Simple News Feed In PHP

Saturday 30 April 2016

Parse Json file In Jquery Ajax

Parse Json file In Jquery Ajax With Object Under Object

Facebook

Followers

Popular Posts