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>");
})
}
});
});
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.
I am trying to refresh a page at a interval of 5 seconds which should update the view with latest data from the SQL Server. Below is the code.
#model Test.Data.Domain.ManufacturingCdMachine
#{
ViewBag.Title = "Rimage Details";
ViewBag.JobId = Model.CurrentManufacturingJobId;
}
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
<div class="container">
<div class="navbar-header">
</div>
</div>
</div>
<div id="CdMachineDetails">
#if (#Model.CurrentManufacturingJobId != null)
{
<div>
#{Html.RenderPartial("_CdMachineJob");}
</div>
}
else
{
<div>
#{Html.RenderPartial("_MachineInIdle");}
</div>
}
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 100);
$.ajax({
type: "GET",
url: "/Mobile/CdMachine/Details/" + #Model.ManufacturingCdMachineId,
data: {
},
success: function (result) {
//Sets your content into your div
$('#CdMachineDetails').html(result);
}
});
}, 5000);
});
</script>
The URL of my page is http://localhost:28886/Mobile/CdMachine/Details/1
However the page not seem to be refreshing. What am I doing wrong?
-Alan-
you have syntax error in your JS. I think you are missing bracket at the end of your JS code.
Ajax doesn't refresh page - you just get content which you can of course place on the DOM or can manipulate it as you wish.
URL pointing to your localhost server will not work of course - must be placed public.
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
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>');
}
}
});
});
I wanted to dynamically append a Table/List to HTML page. My code as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lead Manager</title>
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="themes/jquery.mobile.structure-1.2.0.min.css" />
<script src="themes/jquery-1.8.2.min.js"></script>
<script src="themes/jquery.mobile-1.2.0.min.js"></script>
</head>
<body id="body" name="body">
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline">
<h1>Lead Manager</h1>
</div>
<div data-role="content" data-theme="a">
<h2>List of Leads</h2>
</div>
</div>
</body>
<script>
$(document).ready(function(e) {
//var data = Android.getLeads();
var data = [{"status":"1","name":"1","campaign":"1","date":"1"},{"status":"2","name":"2","campaign":"2","date":"2"}];
var items = [];
var date;
var name;
var status;
//eval(" var x = " + data + " ; ");
//var y = JSON.stringify(x);
$.each(data, function(key,val){
items.push('<tr><td>' + val.date + '</tr></td>');
});
var text = $('<table/>', { html: items.join('')});
$('<table/>', {
html: items.join('')
}).appendTo('body');
});
</script>
</html>
The Items[] variable is getting filled with the tr and td values. However, the appendTo, doesnt work. The JSON as you can see doesnt require eval as its already in the format required.
Please can you help?
The issue was mainly because of the jquery.mobile script as it wasnt allowing dynamic addition of html code.