I'm facing a problem when the same code at the .cshtml change to .aspx can't run in visual studio. How should I change any format or the coding for the run at .aspx? This a chatroom coding
#section scripts
{
<script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var $chats = $('#chats'),
chatHub = $.connection.chatHub;
chatHub.client.gotMessage = function (nickname, message) {
$chats.append('<li><span class="label label-primary">' + htmlEncode(nickname)+'</span>' + htmlEncode(message));
$chats.scrollTop($chats.innerHeight());
};
var htmlEncode = function (content) {
return $('<div />').text(content).html();
}
$.connection.hub.start().done(function () {
$("#ctrl button").click(function (evt) {
var $name = $("#nickname"),
name = $name.val(),
$message = $("#message"),
message = $message.val();
chatHub.server.sendMessage(name, message);
$message.val("").focus();
});
});
$(window)
.resize(function () {
var h = Math.max(200, screen.availHeight - $chats.offset().top - 200);
$chats.height(h);
})
.resize();
});
</script>
}
There is no tag called section in ASP.NET webforms. So basically you could just remove the section tag.
In webforms you can use ContentPlaceholders like this, Masterpage:
<asp:ContentPlaceHolder id="scripts" runat="server">
</asp:ContentPlaceHolder>
And in any site using the masterpage:
<asp:Content ID="Content1" ContentPlaceHolderID="scripts" Runat="Server">
<script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var $chats = $('#chats'),
chatHub = $.connection.chatHub;
chatHub.client.gotMessage = function (nickname, message) {
$chats.append('<li><span class="label label-primary">' + htmlEncode(nickname)+'</span>' + htmlEncode(message));
$chats.scrollTop($chats.innerHeight());
};
var htmlEncode = function (content) {
return $('<div />').text(content).html();
}
$.connection.hub.start().done(function () {
$("#ctrl button").click(function (evt) {
var $name = $("#nickname"),
name = $name.val(),
$message = $("#message"),
message = $message.val();
chatHub.server.sendMessage(name, message);
$message.val("").focus();
});
});
$(window)
.resize(function () {
var h = Math.max(200, screen.availHeight - $chats.offset().top - 200);
$chats.height(h);
})
.resize();
});
</script>
</asp:Content>
Related
I have a task that, need to sync my websites's full calendar with google calendar private data. I could able to extract data from google, but while trying to display that to the Jquery full calendar, it shows an error that TypeError: $(...).fullCalendar is not a function, but when page loads full calender is loading properly. I'm getting this error only when refreshing the calendar after fetching data from google.
Here is the code i'm using:
<!DOCTYPE html>
<html>
<head>
<title>Google Calendar API Quickstart</title>
<meta charset='utf-8' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css' />
</head>
<body>
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>
<pre id="content"></pre>
<div id='calendar'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js'></script>
<script type="text/javascript">
var events = [];
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: events,
color: 'black', // an option!
textColor: 'yellow' // an option!
}
// any other event sources...
]
});
var CLIENT_ID = 'My Id';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function () {
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listUpcomingEvents();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
function refreshCalander(eventData) {
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: eventData,
color: 'black', // an option!
textColor: 'yellow' // an option!
}
// any other event sources..
]
});
}
function listUpcomingEvents() {
gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
}).then(function (response) {
var googleEvents = response.result.items;
if (googleEvents.length > 0) {
for (i = 0; i < googleEvents.length; i++) {
var event = googleEvents[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
events.push({ "title": event.summary, "start": when });
}
refreshCalander(events);
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
Can anyone simplify my code please, this work on my page, but when I checked on Google Developer tool console, I got this error:
Uncaught TypeError: Cannot read property 'length' of undefined
Below code:
<asp:TextBox ID="txtCounter" runat="server" Width="250px" TextMode="MultiLine"></asp:TextBox>
<SPAN id="chars"></SPAN>
<script>
$(document).ready(function () {
var char2 = ($(this).find('textarea[id$=txtCounter]').val().length);
if (char2 == 0) {
$('#chars').text("100 Maximum characters"); }
else {
$('#chars').text( char2 + " Characters Remaining"); }
textchar();
});
function textchar() {
$('textarea[id$=txtCounter]').on('keyup keydown change',
function (){
var limit = 100;
var lengthtxt = $(this).val().length;
if (lengthtxt >= limit)
{ this.value = this.value.substring(0, limit); lengthtxt = limit; }
$('#chars').text((limit - lengthtxt) + " Characters Remaining")
});
};
</script>
You problem is with this line:
$('textarea[id$=txtCounter]').on('keyup keydown change',
txtCounter is not the client ID of your textarea control when rendered to the client. View your page source to find the client ID, or use:
$('textarea[id$=<%= txtCounter.ClientID %>]').on('keyup keydown change',
Here's my working example using a simple textarea:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="./jquery-1.6.4.min.js" type="text/javascript"></script>
</head>
<textarea ID="txtCounter" Width="250px"></textarea>
<SPAN id="chars"></SPAN>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var char2 = ($(this).find('textarea[id$=txtCounter]').val().length);
if (char2 == 0) {
$('#chars').text("100 Maximum characters");
}
else {
$('#chars').text( char2 + " Characters Remaining");
}
textchar();
});
function textchar() {
$('textarea[id$=txtCounter]').bind('keyup keydown change', function (){
var limit = 100;
var lengthtxt = $(this).val().length;
if (lengthtxt >= limit){
this.value = this.value.substring(0, limit);
lengthtxt = limit;
}
$('#chars').text((limit - lengthtxt) + " Characters Remaining");
});
}
</script>
</html>
I am using ASP.NET with angular.
In the scripts folder i have 2 files - MoviesAngular.js and ListController.js
MoviesAngular.js
(function ()
{
var app = angular.module("MoviesAngular", []);
}
)
ListController.js
(function () {
var app = angular.module("MoviesAngular",[])
var ListController = function ($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}()
);
In the Index.html i have the following code:
#section scripts {
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Client/Scripts/MoviesAngular.js"></script>
<script src="~/Client/Scripts/ListController.js"></script>
}
<div ng-app="MoviesAngular">
<div ng-controller="ListController">
{{message}}
</div>
</div>
However when i run the application i am not getting the text displayed as "Hello World" Where am i going wrong here.
Edited to include the other scenario where controller and app was defined seperately:(I was getting the error - Error: $injector:nomod
Module Unavailable). Then i modified the code as above.
MoviesAngular.js
(function () {
var app = angular.module("MoviesAngular", []);
}()
);
ListController.js
(function (app) {
var ListController = function ($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}(angular.module("MoviesAngular"))
);
This code works fine: I have tested this
ww.js
(function () {
var app = angular.module("MoviesAngular",[])
var ListController = function ($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}()
);
The view is:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ww.js"></script></head>
<body>
<div ng-app="MoviesAngular">
<div ng-controller="ListController">
{{message}}
</div>
</div>
</body>
</html>
Hope it will help.
I do not find any error in your code. I am just changing the syntax of code. Try this.
(function () {
var app = angular.module("MoviesAngular",[])
app.controller("ListController", function ($scope) {
var ListController = function () {
$scope.message = "Hello World";
};
ListController();
});
}()
);
The IIFE in the MoviesAngular.js file not invoked in your example
(function() {
var app = angular.module("MoviesAngular", []);
}()); // invoke function expression
angular.module with specified second parameter creates new module. In the ListController.js file you need to get already created module, thus remove second parameter from angular.module
(function() {
var app = angular.module("MoviesAngular")
var ListController = function($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}());
I would not like to call asp.net server side code with jquery $.ajax .
So I have written a pure javascript ajax file .But when I call webmethod,this do not work.
Can anyony help me out how correct this? THANK you very much .
ajax.js:
var ajax = {
_params: null,
_callback: null,
_xhr: null,
_createXHR: function () {
if (window.ActiveXObject) {
_xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
else if (window.XMLHttpRequest) {
_xhr = new XMLHttpRequest(); //FireFox,Chrome et.
}
},
_ajaxcallback: function () {
if (_xhr.readyState == 4) {
if (_xhr.status == 200) {
_callback.call(this, _xhr.responseText)
}
}
},
_changeParams: function () {
var args = arguments[0];
var s = "";
for (var i in args) {
s += "&" + i + "=" + args[i];
}
_params = s;
},
get: function (url, params, callback) {
_callback = callback;
ajax._createXHR();
ajax._changeParams(params);
if (null != _xhr) {
_xhr.open('get', url + '?' + _params, true);
_xhr.onreadystatechange = ajax._ajaxcallback;
_xhr.send();
}
},
post: function (url, params, callback) {
_callback = callback;
ajax._createXHR();
ajax._changeParams(params);
if (null != _xhr) {
_xhr.open('post', url, true);
_xhr.onreadystatechange = ajax._ajaxcallback;
_xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
_xhr.send(_params);
}
}
}
WebForm1.aspx
<head runat="server">
<title></title>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function ajaxtest() {
var uid = document.getElementById("txtuid").value;
var pwd = document.getElementById("txtpwd").value;
ajax.post("WebForm1.aspx/GetModel", "{ 'uid':" + uid + ", 'pwd':" + pwd + " }", function (data) {
alert(data);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txtuid" value="eeee" />
<input type="text" value="222" id="txtpwd" onblur="ajaxtest()"/>
WebForm1.cs:
[WebMethod]
public static string GetModel(string uid,string pwd)
{
return "1";
}
In your markup you need to have a ScriptManager with EnablePageMethods set to true. Doing this will ensure you can call the methods you have marked up with [WebMethod].
In your JavaScript you can then call your method like this: PageMethods.GetModel("userName", "password", OnSuccessMethod, OnFailureMethod); - you won't need any of the ActiveXObject/XmlHttpRequest stuff if you do it this way, which keeps things much simpler.
Use AJAX.PRO from Michael Schwarz --> http://www.ajaxpro.info/
how can i define the language dir in this code
$(document).ready(function () {
$('#Header1').ckeditor();
});
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#<%=OrganizationMeta.vcr_MetaKey + Lang.int_LangId%>')
.ckeditor(function () { /* callback code */ }, { contentsLangDirection: '<%=TempData["Direction"] %>' });
});
</script>