I m building a website where i need to update project counter whenever its updated in DB. when ever any user add a new project, the project counter should automatically update in browser, but i don't want to send ajax request to server again and again to get count from DB and then update counter in web browser.
I want something similar "how facebook notification updated" automatically without refreshing page or sending any ajax request, i know there are using some PUSH technology but i not sure how it works.
It will be very great if someone provide some Example code to achieve this.
Thanks...
Have you considered using SignalR?
http://www.hanselman.com/blog/AsynchronousScalableWebApplicationsWithRealtimePersistentLongrunningConnectionsWithSignalR.aspx
http://signalr.net/
Here is the sample code based on a quick POC after reading some SO replies and above articles. Hope it helps.
Create a new empty ASP.NET web application project
Add the SignalR package via NuGet
Add a UserCounter.cs with following code. Just need to inherit the class from Hub base class.
using SignalR.Hubs;
public class UserCounter : Hub { }
Add a Default.aspx with following code:
<!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">
</head>
<body>
<form id="form1" runat="server">
<div>
Number of users currently online - <b><span id="noOfUsers">0</span> users</b>
<br />
<a target="_blank" href="UpdateNoOfUsers.aspx">Change number of users</a>
</div>
</form>
</body>
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var usc = $.connection.userCounter;
usc.noOfUsersUpdated = function (message) {
$('#noOfUsers').text(message);
};
$.connection.hub.start();
});
</script>
</html>
Add a UpdateNoOfUsers.aspx with following code:
<!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">
</head>
<body>
<form id="form1" runat="server">
<div>
No. of users: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
</html>
Add an event-handler for button-click for button in UpdateNoOfUsers.aspx
using SignalR;
using SignalR.Infrastructure;
using SignalR.Hosting.AspNet;
protected void Button1_Click(object sender, EventArgs e)
{
IConnectionManager connectionManager = AspNetHost.DependencyResolver.Resolve<IConnectionManager>();
dynamic clients = connectionManager.GetClients<UserCounter>();
clients.noOfUsersUpdated(TextBox1.Text);
}
Run the application after setting "Default.aspx" as the start up page
Click on the "Change number of users" link to open a new browser window
Enter a number in text-box and click on the button to see the value change in base window! Open this page in some other browser and see the same behaviour!
Related
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
I have a site with a user login form shown in a data-rel='dialog' link. Problem is thatthe dialog is appearing in the history when you hit the browser back button. Screen grabs here - a) shows initial not logged in state, b) open dialog after clicking on 'login' button, c) successful login, d) I've hit the back button and get my dialog and e) I've closed the dialog with the default 'x' button, am brought back to my home page, but in a logged out state.
In the code below, the login button/link (to '/php/mobile_login.php' ) is replaced by one's name is login cookies are detected server side.
Also, given that I get back to the home page with data-dom-cache disabled, should it not fetch it from the server again?
Many thanks, Kevin
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
</head>
<body>
<div data-role='page' data-dom-cache='false' id='homepage'>
<div class='header'>
<div class='logo'></div>
<div class='login'><a href='/php/mobile_login.php' data-overlay-theme='b' data-transition='none' data-rel='dialog' data-role='button' data-inline='true' data-icon='arrow-r' data-iconpos='right' data-theme='a' data-mini='false'>Login</a></div>
</div>
<div class='mobile_content'>
content
</div>
</div>
</body>
</html>
Dialog:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
</head>
<body>
<div data-role='dialog' id='member_login_div' data-overlay-theme='b'>
<div data-role='header' data-theme='d'>
<h1>Login</h1>
</div>
<div data-role='content' data-theme='c'>
Login below to apply for jobs with your stored CV (use the desktop version of the site to upload your CV if you have not already done so).
<form data-ajax='false' method='POST' action='/php/mobile_do_login.php'>
<label for='cjloginemail' class='ui-hidden-accessible'>Email Address</label>
<input type='text' name='user_email' id='cjloginemail' value='kevin#solomon.ie' placeholder='Email Address'>
<label for='cjloginpass' class='ui-hidden-accessible'>Password</label>
<input type='password' name='password' id='cjloginpass' value='' placeholder='Password'>
<input name='Submit' type='submit' value='Login'>
</form>
<p><a href='/php/mobile_forgot_pass.php'>I forgot my password - email it to me.</a>
</div>
</div>
</body>
</html>
Maybe you could try closing any dailog onload using $('.ui-dialog').dialog('close').
REF: JQuery mobile - Dailogs
I have read this on the same page, it is weird that it is happening to you.
**
History & Back button behavior
**
Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.
UPDATE: Dialog appears on back button in FireFox browser. Works fine on IE9 and Chrome.
I created a new test project in MVC4 to test if I could use Facebook Helper from the Nuget gallery. I followed the instructions which are very simple, point and click to install the Facebook helper from Nuget, edit your page, and insert like button.
When I run the project I can actually see the facebook likebutton being generated when I view it through firebug, but it does not appear on the page.
Here is my default index page
#{
ViewBag.Title = "Home Page";
}
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
our forums.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<div>
#Facebook.LikeButton()
</div>
I´ve gone through several pages regarding Facebook helper and they all describe the process in the same way. Does anyone know if I should config any files before using this library?
Edited:
I will paste my html code that is loaded into the markup after execution. I will abbreviate some scripts and stuff since it has many hundreds of line of code :)
<html id="facebook" class="" lang="en">
<head>
<meta charset="utf-8">
<script>
<script>
<noscript><meta http-equiv="refresh" content="0; URL=/plugins/like.php?href=http%3A%2F%2Flocalhost%3A13876%2F&layout=standard&show_faces=src&width=450&action=like&colorscheme=light&height=80&font&locale=en_US&ref&_fb_noscript=1" /></noscript>
<meta content="noodp, noydir" name="robots">
<meta id="meta_referrer" content="default" name="referrer">
<meta content="Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet." name="description">
<link href="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flocalhost%3A13876%2F&layout=standard&show_faces=src&width=450&action=like&colorscheme=light&height=80&font&locale=en_US&ref" media="handheld" rel="alternate">
<title>Facebook</title>
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/-WUN6qLbp5n.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/gd49XKRAMNQ.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/XaOowWd9_Aq.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/Dpn1SKTH3-z.css" rel="stylesheet">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/Vm1JnKckidu.js">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y-/r/ARN_8tuLdws.js">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yq/r/XboiPeV3jQI.js">
<script>
<script>
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yP/r/eTzqwp1jxjF.js" async="">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yh/r/aTzvHAZI_Jd.js" async="">
</head>
<body class="plugin ff4 win Locale_en_US">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<script>
<script>
<script>
</body>
</html>
See where in the Url it generates (link href="https://www.facebook...) it says "&show_faces=src"
That causes the problem; it should be "&show_faces=true"
Even though true is supposed to be the default, if you have this issue try changing it to: #Facebook.LikeButton(showFaces: false)
EDIT: this only helps if you set it to false. Same issue with LikeBox and all boolean properties.
If the HTML is being rendered I can only assume the problem it's a CSS problem, check the styling of the elements in FireBug and make sure they aren't being hidden e.g. check for display: none or visibility: hidden or make sure there isn't float applied which is taking it off the screen.
Script link on master page:
<head runat="server">
<script src="<%=ConfigurationManager.AppSettings["ApplicationURL"].ToString()%>Scripts/jquery-1.7.2.js" type="text/javascript" language="javascript"></script>
</head>
Default.aspx page
<a class="level1" href="VideoLibrary/VideoUpload.aspx">Video Library</a>
When i click on this hyperlink i got following error message:
What should i do?
Thanks
You can't use expression in <head runat="server"> tag. What you need to add <script> via Page.Header property.
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes.Add("src", System.Configuration
.ConfigurationManager
.AppSettings["ApplicationURL"]
+ "Scripts/jquery-1.7.2.js");
script.Attributes.Add("type", "text/javascript");
Page.Header.Controls.Add(script);
Try enclosing the Script tags inside PlaceHolder:
<asp:PlaceHolder runat="server">
<script src="<%=ConfigurationManager.AppSettings["ApplicationURL"].ToString()%>Scripts/jquery-1.7.2.js" type="text/javascript" language="javascript"></script>
</asp:PlaceHolder>
I've downloaded the Visual Studio 2010 Template associated with the http://www.dotnetopenauth.net/. I can get that to work as advertised. I am not starting a project from scratch and I don't want to put a lot of time into integrating all the web.config, handlers, etc. into my application to get OpenID working for me. The doc says that I should be able to make a one line implementation using a button and a user control. I believe I have done that and I get an error.
Here is what I've done.
Create empty asp.net web project
Add DotNetOpenAuth.dll to bin and reference it
Add user control registration to top of page
Create Button on page that calls user control.
When I run it and press the button, I get:
"Precondition failed: this.Identifier != null No identifier has been set."
I know there must be more to it than this, but I just don't get it. Can someone explain further what I need to do?
Thanks,
<%# Page Language="C#" %>
<%# Register Assembly="DotNetOpenAuth" Namespace="DotNetOpenAuth.OpenId.RelyingParty" TagPrefix="rp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void LoginId_Click(object sender, EventArgs e)
{
OpenIdTextBox1.LogOn();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="LoginId" runat="server" Text="Button" onclick="LoginId_Click" />
<rp:OpenIdTextBox ID="OpenIdTextBox1" runat="server" />
</div>
</form>
</body>
</html>
You you actually typing an identifier in the box before clicking the button? You must.
And you can avoid the nasty error for people who forget to type an identifier by adding a RequiredFieldValidator control that points to the text box and then checking that if (Page.IsValid) in your button's click handler before calling LogOn.
Hopefully this helps. Have you considered using the OpenIdLogin control? If you're shooting for easiest to add, that's the easiest, as you don't have any code at all -- just the one tag.
Also, be sure to add ValidateRequest="false" to your <%# Page %> tag at the top of your login page. Otherwise your users will see occasional random failures because ASP.NET incorrectly interprets some OpenID authentication responses to be attacks.
So for example, if the top line of your .aspx was:
<%# Page Language="C#" AutoEventWireup="True" CodeBehind="login.aspx.cs" Inherits="OpenIdRelyingPartyWebForms.login" %>
Make it
<%# Page ValidateRequest="false" Language="C#" AutoEventWireup="True" CodeBehind="login.aspx.cs" Inherits="OpenIdRelyingPartyWebForms.login" %>