I have a problem in accessing server side value into my jQuery function. I gave my localhost path (NewsRecord.php) as the AJAX URL (it is working) but if I give server path it is not working... I don't know what is the problem -- the server URL prints the JSON data properly. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>News Letter</h1>
</div>
<div data-role="content" id="level" ></div>
<div data-role="footer"></div>
<h4>Powered by Handigital</h4>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$.ajax({
url:'NewsRecord.php',
dataType:'json',
success:function(output) {
for(var u=0;u < output.length;u++)
{
$('#level').append('<div>Title :'+output[u].Title+'<br>Source :<a href='+output[u].links+'>'+output[u].Source+'</a><br>Category :'+output[u].Category+'</div><hr>');
}}
);
});
</script>
</body>
</html>
You need to place your for() loop in a function. This function can be given to the success property of the ajax method, where it will be called when the ajax call is complete (and is successful):
$(document).ready(function () {
$.ajax({
url: 'NewsRecord.php',
dataType: 'json',
success: function(output){
for (var u = 0; u < output.length; u++) {
$('#level').append('<div>Title :' + output[u].Title + '<br>Source :<a href=' + output[u].links + '>' + output[u].Source + '</a><br>Category :' + output[u].Category + '</div><hr>');
}
}
});
});
Related
Thanks for you all.
I am new in coding MVC, and I am trying to code a page that will create and as parent and child loop, using data from JSON (MenuHandler.ashx), the JSON data is tested and it's ok, but the Ajax was not working.
for your kind note: the Alert working before and after Ajax
this is my VIEW page:
<script type="text/javascript">
$(document).ready(function () {
$("#testaj1").click(function () {
alert ("test22")
$.ajax({
url: 'MenuHandler.ashx',
method: 'get',
dataType: 'json',
success: function (data) {
buildMenu($('#menu'), data)
$('#menu').menu();
}
});
alert("test33")
});
function buildMenu(parent, items) {
$.each(items, function () {
var li = $('<li>' + this.Name + '</li>');
li.appendTo(parent);
if (this.List && this.List.length > 0) {
var ul = $('<ul></ul>');
ul.appendTo(li);
buildMenu(ul, this.List);
}
})
}
})
</script>
<link href="~/Content/MyCSS/MyCSS.css" rel="stylesheet" />
#model IEnumerable<pedigree.Models.pedigree1>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="~/Scripts/jquery-3.5.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<title>Index</title>
</head>
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<form>
<button id="testaj1" type="button" >test</button>
<div class="tree">
<ul id="menu">
</ul>
</div>
</form>
Thanks for everyone as Alejandro Coronado said, the issue was in the handler.ashx file, I don’t now why wasn’t worked, but when I use instead json result action
The Ajax worked and the results came according to my expectations
Thanks everyone
The most common reason is the controller that you are pointing, maybe the controler uri is not correct, also be sure that your controller is returning a JSON.
iam working on mobile app. in my controller i created a json array and iam trying to display the array values into a list in my html page. i want show the list when html page is automatically loaded.
actually my json array contains 'category_id' $ 'category_name' and iam looking forward to next page when click on the 'category_name'
nextPage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<center>
<body id="category_id">
<div data-role="page" id="catlist">
<div id="loading" > </div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>category</h1>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="category">
<li></li>
</ul>
</div>
</div>
</body>
</center>
</html>
nextPage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
//do something pls
},
error: function()
{
alert("error");
}
});
});
categorylist.php
function get_categorylist()
{
$cat=$this->categorylist_model->get_cat();
echo json_encode($cat);
}
my json array
[{"category_id":"1","category_name":"Academic Analysis"}, {"category_id":"2","category_name":"Teaching Analysis"},{"category_id":"3","category_name":"Skill Analysis"}]
You need to use the response in the $.ajax success function. This response object should be your json object and can therefore easily be accessed via the specified properties category_name and category_id.
$.ajax({
// ...
success: function(response){
// do something with the json response! E.g. generate a new list item and append it to the list.
var categoryList = $('#category');
var category;
for(var i = 0, len = response.length; i < len; i++){
category = response[i];
categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
}
},
});
i am working on mobile app using phonegap.Here i am trying to display my database values into a list in my html page called nextpage.html.But i couldn't insert it as a links. could you pls help me to insert it as a links. when i click on those links it will display the details of that partcular data into a new page.
nextPage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<center>
<body id="category_id">
<div data-role="page" id="catlist">
<div id="loading" > </div>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>category</h1>
</div>
<div data-role="main" class="ui-content">
<form id="nextForm" >
<ul data-role="listview" data-inset="true" id="category">
<li>
</li>
</ul>
</form>
</div>
</div>
</body>
</center>
</html>
nextPage.js
var base_url="http://dev.edfutura.com/nithin/jps/edfuturaMob/";
$(document).on("pageinit","#catlist", function() {
var submitUrl = base_url+"categorylist/get_categorylist";
//$("#loading").css("display", "block");
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response)
{
var categoryList = $('#category');
var category;
for(var i = 0, len = response.length; i < len; i++)
{
//pls do something
category = response[i];
categoryList.append($('<li>').attr('id', category.category_id).html(category.category_name));
}
},
error: function()
{
alert("error");
}
});
});
category_id and category_name are my db values. i want the details of category_name by clicking on it. i failled to do so. pls help me...
my output is
You could add the anchor tag inside the li element:
var a = $('<a>').attr('href', '#').html(category.category_name);
categoryList.append($('<li>').attr('id', category.category_id).append(a));
replace your append with this:
$('#category').append('<li id="' + category.category_id + '">' + category.category_name + '</li>');
not the cleanest solution but will work
<pages>
<link>
<title>HTML a tag</title>
<url>http://www.w3schools.com/tags/tag_a.asp</url>
</link>
<link>
<title>HTML br tag</title>
<url>http://www.w3schools.com/tags/tag_br.asp</url>
</link>
<link>
<title>CSS background Property</title>
<url>http://www.w3schools.com/cssref/css3_pr_background.asp</url>
</link>
<link>
<title>CSS border Property</title>
<url>http://www.w3schools.com/cssref/pr_border.asp</url>
</link>
<link>
<title>JavaScript Date Object</title>
<url>http://www.w3schools.com/jsref/jsref_obj_date.asp</url>
</link>
<link>
<title>JavaScript Array Object</title>
<url>http://www.w3schools.com/jsref/jsref_obj_array.asp</url>
</link>
</pages>
this is the sample xml data which i am parsing and getting the output from
SEARCH.HTML
<!DOCTYPE html>
<html>
<head>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script>
$(document).ready(function () {
var myArr = [];
$.ajax({
type: "GET",
url: "http://localhost/category/links.xml",
dataType: "xml",
success: parseXml,
complete: setupAC,
failure: function (data) {
alert("XML File could not be found");
}
});
function parseXml(xml) {
//find every query value
$(xml).find("link").each(function () {
myArr.push($(this).find('title').text());
});
}
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 3,
select: function (event, ui) {
$("input#searchBox").val(ui.item.value);
$("#searchForm").submit();
}
});
}
});
</script>
</head>
<body style="font-size: 62.5%;">
<form name="search_form" id="searchForm" method="GET" action="http://localhost/search_result1.html">
<label for="searchBox">Keyword Search</label>
<input type="text" id="searchBox" name="searchString" />
<button name="searchKeyword" id="searchKeyword">Sumbit</button>
</form>
</body>
</html>
and this my search bar with auto complete feature. In it i first parse the above xml and then store the title in an array which i can use it for auto completeion feature. and on clicking the submit i redirect the page to another html page where i show all the results.
the code for the second html page is as given below..
RESULT.HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="1.7.2.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#dvContent").append("<div></div>");
$.ajax({
type: "GET",
url: "http://localhost/category/link.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('link').each(function () {
var stitle = $(this).find('title').text();
var surl = $(this).find('url').text();
$("<li></li>").html(stitle + ", " + surl).appendTo("#dvContent div");
});
},
error: function () {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvContent">
</div>
</form>
</body>
</html>
but what i want is to show only the title and url of the searched term. In this i am getting the entire xml as output. So in there a way by which i can show only the title and url of the searched term.
that is i get the output in result.html as
. HTML a tag, http://www.w3schools.com/tags/tag_a.asp
. HTML br tag, http://www.w3schools.com/tags/tag_br.asp
on searching for the term HTML in the search in search.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="1.7.2.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#dvContent").append("<div></div>");
var searchValue = $('#searchBox').val(); // Here you get the search text
$.ajax({
type: "GET",
url: "http://localhost/category/link.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('link').each(function () {
var stitle = $(this).find('title').text();
var surl = $(this).find('url').text();
if (searchValue === stitle) { // Only append those if search text matches with title
$("<li></li>").html(stitle + ", " + surl).appendTo("#dvContent div");
}
});
},
error: function () {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvContent">
</div>
</form>
</body>
</html>
Here is my exact _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Scripts/Tweets.js")
#RenderSection("Scripts",false)
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script src="../../Scripts/Tweets.js" type="text/javascript"></script>
</head>
<body>
#{
if (ViewBag.IsAdmin ?? false)
{
<div class="controlPanel">
New Post
#Html.ActionLink("Sign Out", "DeAuth", "Account")
</div>
}
else
{
<div class="controlPanel">
#Html.ActionLink("Log In", "Login", "Account")
</div>
}
}
<header>
<img src="#Href("~/Content/Images/gizmologo.png")" alt="Gizmo | Blog Solutions" title="Gizmo | Blog Solutions"/>
</header>
<section>
<div id="topSep" class="sep"></div>
<aside>
<img id="picture" width="100" height="100" src="#Href("~/Content/Images/dsykes.jpg")" alt="Picture" title=":P" />
<div id="twitterHeader">D.Sykes on Twitter</div>
<div id="tweets">
</div>
<div id="feedLink">RSS Feed</div>
</aside>
<div id="main">
#RenderBody()
</div>
<div id="bottomSep" class="sep"></div>
</section>
<footer>
<div id="copyright">Copyright © 2013, Gizmo Bloging</div>
</footer>
</body>
</html>
And here is the Tweets.js Script that wont load...
$(document).ready(function () {
//$.getJSON("https://twitter.com/statuses/user_timeline.json?screen_name=ninanet&count=5&callback=?", // this is the OLD Twitter json call!
$.getJSON("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ninanet&count=5&callback=?",
function (data) {
$.each(data, function (i, item) {
ct = item.text;
mytime = item.created_at;
var strtime = mytime.replace(/(\+\S+) (.*)/, '$2 $1')
var mydate = new Date(Date.parse(strtime)).toLocaleDateString();
var mytime = new Date(Date.parse(strtime)).toLocaleTimeString();
$("#tweets").append('<div>' + ct + " <small><i>(" + mydate + " at " + mytime + ")</i></small></div>");
});
});
});
I dont know what could be the problem, my Jquery is initialized properly and so is the script but i dnt get anything.. Can someone pleeease help!?
Working demo: http://jsfiddle.net/JTrs7/
Cool, if you are trying to fetch data cross domain try using JSONP
Helpful links: (JSONP vs JSON)
What are the differences between JSON and JSONP?
Sending JSONP vs. JSON data?
http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
Hope it fits your needs :)
Sample code
$(document).ready(function () {
var k = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Twitter&include_rts=1&count=5&jsoncallback=";
$.ajax({
dataType: 'jsonp',
url: k,
success: function (data) {
console.log(data);
$.each(data, function (i, item) {
$("#tweetFeed").append("<div class='tweetCloud'><div id='tweetArrow'></div><div id='tweetText'>" + item.text + "</div></div>");
})
}
});
});