asp.net/jquery - Countdown timer not working - asp.net

Here is the full code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
#import "jquery.countdown.css";
</style>
<script type="text/javascript" src="Scripts/jquery.countdown.js"></script>
<script type="text/javascript">
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
$(document).ready(function () {
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('change', { until: shortly });
});
function liftOff() {
// refresh the page
window.location = window.location;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<span id="shortly"></span>
</form>
</body>
</html>
I've got the jquery.countdown.js in the Scriptsmap of visual studio. Also the stylesheet "jquery.countdown.css" is in the project.
Don't have a clue about what the problem could be. I'm kind of new to jquery and trying to learn it.

I'm not familiar with this countdown plugin, but, try moving the part
$('#shortly').countdown({ until: shortly,
onExpiry: liftOff, layout: "{ps} seconds to go"
});
into the function passed to $(document).ready, replacing $('#shortly').countdown('change', { until: shortly });
Because otherwise the shortly var is not initialized when you're trying to use it.

you have a error in liftOff function with windowwindow.location
function liftOff() {
// refresh the page
window.location = window.location;
}

Related

jstree is not loading icons in MVC5 from css url

I'm trying to use jsTree in AngularJS powered MVC5 school project. To use jsTree in angular app I'm using this directive.
From what I can observe everthing working ok:
- jstree loads correctly data and structure, and fires all events
- jstree loads CSS style (if i change for instance margin in css, it's reflected to jstree, if remove css reference it rendered as ordinary HTML UL)
However it looks like, that rest of layout doesnt work:
- no background change, when i move cursor over node
- no conectors, no node images, no arrows
From what i was able to find it looks like that css is not using images referenced in it:
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
background-image: url("32px.png");
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
So I tried to use:
bundles.Add(new StyleBundle("~/jstree").Include(
"~/Content/jstree/style.css", new CssRewriteUrlTransform()));
Css with images is placed in same folder:
But that also did not worked. Any ideas? Sugestions?
Rest of the code:
angular.module('JosefinaApp', ['ui.layout', 'JosefinaApp.controllers', 'jsTree.directive']);
angular.module('JosefinaApp.controllers', [])
.controller('TreeViewController', ['$scope', '$location', '$http', function ($scope, $location, $http) {
$location.path('/home');
$http({
method: 'GET',
url: '/api/project/gettasks/1',
}).
success(function (data) {
$scope.treeModel = data;
}).
error(function () {
$scope.test = "Error";
});
$scope.treeViewNodeSelected = function (e, data) {
console.log(data.node.id);
};
}])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="models.helloAngular"></title>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"> </script>
<link href="#Url.Content("~/Content/themes/base/all.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Styles.Render("~/jqueryUI")
#Styles.Render("~/uiLayout")
#Styles.Render("~/jstree")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryUI")
<script src="#Url.Content("~/Scripts/angular.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui-router.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-resource.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/angular-ui/ui-layout.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jstree.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jstree/jsTree.directive.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/JosefinaApp.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/LandingPageController.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/Controllers/TreeViewController.js")" type="text/javascript"> </script>
</head>
<body>
<div ng-app="JosefinaApp">
<div ng-controller="TreeViewController">
<js-tree theme="default" tree-events="select_node:treeViewNodeSelected" tree-data="scope" tree-model="treeModel">
</js-tree>
</div>
</div>
#RenderBody()
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Browser stored images, internet explorer was caching empty images and showing them instead of geting them from server.
... kill me please

How to load specific xaml file from a xap file?

I have the following page that references my silverlight application file. This works fine. I was wondering if, instead, I could point to a specific xaml file that is in the .xap file?
Perhaps something like /ClientBin/test.xap?File=SomeXaml.xaml?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.Web.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="silverlightControlHost">
<script type="text/javascript">
Silverlight.createObject(
"ClientBin/test.xap", // source
document.getElementById('silverlightControlHost'), // parent element
"someId", // id for generated object element
{
width: "600px",
height: "600px",
background: "blue",
version: "4.0.60310.0",
autoUpgrade: "true"
},
{ onError: null }, null
);
</script>
</div>
</form>
</body>
</html>
Thanks!
First of all see my answer here to a very similar request that does most of what you need.
All you now need is to get the xaml file name from the query string to the initparams. Your existing code would become:-
Silverlight.createObject(
"ClientBin/test.xap", // source
document.getElementById('silverlightControlHost'), // parent element
"someId", // id for generated object element
{
width: "600px",
height: "600px",
background: "blue",
version: "4.0.60310.0",
autoUpgrade: "true"
},
{ onError: null }, 'StartupPage=<%=Request.QueryString[File]%>'
);

ASP.NET MVC Dynamic Stylesheets

The project I'm working on allows an end-user to modify CSS code to integrate the application as best possible. Most of the CSS values are stored in a database and need to be retrieved and parsed dynamically.
I setup a Style controller, and gave each stylesheet an action, and then passed the configuration data through to the View. I set the ContentType to "text/css" and then generated the stylesheets.
This works fine, but the problem I'm running into is this: none of the code works in the application. I include it in the head code, but it doesn't parse in the code.
An example of what I do is this:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" ContentType="text/css" %>
.element {
background-color: <%= ViewData.Model.BackgroundColor %>;
}
I include it like so:
<link href="/style/Basic" rel="stylesheet" type="text/css" media="all" />
When I include the CSS code in a partial view and include it using the ViewModel (wrapped in style tags) in an action, then everything works fine. It is when I try to parse this as a separate file when it does not work.
Is there something I am doing incorrectly? Or is there some kind of glitch?
Thanks in advance :D
Use a tool such as HTTPWatch to verify that the stylesheet is being sent down and not 404'd
Controller
public ActionResult Basic()
{
Response.ContentType = "text/css";
var basicVM = new BasicVM()
{
BackgroundColor = "Lime",
};
return View(basicVM);
}
And the View
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication3.Controllers.BasicVM>" ContentType="text/css" %>
body {
background-color: <%= ViewData.Model.BackgroundColor %>;
}
and the test page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test</title>
<link href="/Home/Basic" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div>
Test
</div>
</body>
</html>
Turns everything Green

Why isn't uploadify and asp.net mvc 2 playing nice for me?

First of all, I've checked out all the SO threads, and googled my brains out. I must be missing something obvious.
I'd really appreciate some help! This is what I've got.
UploadController.cs
using System.Web;
using System.Web.Mvc;
namespace NIMDocs.Controllers
{
public class UploadController : Controller
{
public ActionResult Index()
{
return View();
}
public string Processed(HttpPostedFileBase FileData)
{
// DO STUFF
return "DUHR I AM SMART";
}
}
}
Index for Upload
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ITS A TITLE </title>
<script src="../../Content/jqueryPlugins/uploadify/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Content/jqueryPlugins/uploadify/swfobject.js" type="text/javascript"></script>
<script src="../../Content/jqueryPlugins/uploadify/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#uploadify').fileUpload({
'uploader': '../../Content/jqueryPlugins/uploadify/uploadify.swf',
'script': '/Upload/Processed',
'folder': '/uploads',
'multi': 'true',
'buttonText': 'Browse',
'displayData': 'speed',
'simUploadLimit': 2,
'cancelImg': '/Content/Images/cancel.png'
});
});
</script>
</head>
<body>
<input type="file" name="uploadify" id="uploadify" />
<p>Cancel All Uploads</p>
</body>
</html>
What am I missing here? I've tried just about every path permutation for uploadify's "uploader" option. Absolute path, '/' prefixed, etc.
This is what I'm seeing.
And here is the directory structure.
You have spelt Processed Procssed and therefore you will not hit 'script': '/Upload/Processed',
Change
public string Procssed(HttpPostedFileBase FileData)
{
// DO STUFF
return "DUHR I AM SMART";
}
to
public string Processed(HttpPostedFileBase FileData)
{
// DO STUFF
return "O SMART ONE HAS SPOKEN";
}
EDIT
Remove your jquery script code block and your html input and use this code instead
<body>
<input id="fileInput" name="fileInput" type="file" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {
$('#fileInput').uploadify({
'uploader': '../../Content/jqueryPlugins/uploadify/uploadify.swf',
'script': '/Upload/Processed',
'cancelImg': 'cancel.png',
'auto': true,
'folder': '/uploads'
});
});
// ]]>
</script>
</body>
Your spelling of "Processed" varies between the javascript call (Processed) and the method definition (Procssed). Is that incidental?
I am not sure, but in classic ASP ASP.net webforms, the form enctype had to be set to
multipart/form-data
<form enctype='multipart/form-data'>
<input type='file'>
<input type='Submit'>
</form>

ASP .NET AJAX and JQuery

I'm trying to set up a simple JQuery example in order to make AJAX calls to a .NET webservice. Using the following example below I'm getting AJAX errors that are just saying 0 in the result instead of any meaningful message:
Javascript Call
function QSHelloWorld() {
var options = {
type: "POST",
url: "http://localhost:1087/QueryService.asmx/HelloWorld",
data: "{}",
contentType: "application/json",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
};
$.ajax(options);
}
function AjaxSucceeded(result) {
alert(result.d);
}
function AjaxFailed(result) {
alert("Error: " + result.status + " " + result.statusText);
}
ASP .NET WebSite
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryTest._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script language="javascript" type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js" />
<script language="javascript" type="text/javascript" src="js/qsAJAX.js" />
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="formMain" runat="server">
<div>
<script type="text/javascript">
QSHelloWorld();
</script>
</div>
</form>
</body>
</html>
ASP .NET WebService
using System.Web.Script.Services;
using System.Web.Services;
namespace QueryService
{
/// <summary>
/// Summary description for Service1
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class QueryService : WebService
{
[WebMethod]
[ScriptMethod]
public string HelloWorld()
{
return "Hello World";
}
}
}
When I make a call to the QSHelloWorld I get a messagebox saying Error: 0 with no further information.
I'm currently running this example using Windows 7, do I need to have anything specifically installed besides the .NET Framework 3.5 SP1 in order to get this to run properly?
Thanks,
Daven
Maybe this page will help you out. Their example uses JSON as well.
The issue is that the javascript files were loading file in Chrome, but not in IE. After making the following change in the ASP .NET Default.aspx file, everything seemed to work.
Changing:
<script language="javascript" type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js" />
<script language="javascript" type="text/javascript" src="js/qsAJAX.js" />
to
<script type="text/javascript" language="javascript" src="/js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" language="javascript" src="/js/qsAJAX.js"/></script>
I've had problems when trying to load JQuery directly in the .ASPX page. Instead I have a ProjectBasePage class that in it's PageLoad does this:
Page.ClientScript.RegisterClientScriptInclude(typeof(ProjectBasePage),
"jQuery", ResolveUrl("~/js/jquery-1.3.2.min.js"));
It works for me...

Resources