Call JS Function from asp.net page - javascript

so i have a js function that calls a web method on my server,my question is:
can this function be called from an as.net button with a parameter from the server?
because that snippet of code that i got from here basically calls my web method as i want,but i dont know how to call this function from my asp.net code and asp.net button
<div>
<div id="messages">
</div>
<input type="text" id="echo" /><input id="echoSubmit" value="Echo!" type="button" />
</div>
<%-- JAVASCRIPT --%>
<script type="text/javascript">
$(function () {
$('#echoSubmit').click(function () {
var mes = $('#echo').val();
var jsonText = JSON.stringify({ message: mes });
$.ajax({
type: "POST",
url: "ARCAProductsCheat.aspx/SendMessage",
data: jsonText,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#messages").append(msg.d);
}
});
});
});
</script>

Related

I want to use the data in the Controller in the View side javascript

this is my controller:
public ActionResult AjaxSmsSend(Sms smsInfo)
{
var sms = smsInfo.smsCode;
var telephone = smsInfo.telephone;
ViewBag.Code = sms;
return Json(sms);
}
In the View :
<button id="getDataBtn">Click me</button>
When I press this button :
<script type="text/javascript">
$(function () {
$("#getDataBtn").click(function () {
$.ajax({
type: "GET",
url: "/Home/AjaxSmsSend",
data: sms,
contentType: "application/json; charset=utf-8",
dataType: "json",
});
});
</script>
I will use it to compare the sms data I received from the controller.
<p style="text-align: center;margin-top: 10%;">Enter your sms code</p>
<input type="text" id="pincode" maxlength="4">
This input is entered by the user. I have generated sms data in the controller itself.
I'm sure it's actually a very simple process. But since I've just started, I can't find what I'm looking for. I'd appreciate it if you could help me with that.
I don't think it's a good practice, normaly the comparison should in server side but you can Add this :
success: function (response) {
if (response.smsCode)
{
}
}
it will be like this :
<script type="text/javascript">
$(function () {
$("#getDataBtn").click(function () {
$.ajax({
type: "GET",
url: "/Home/AjaxSmsSend",
data: sms,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.smsCode)
{
}
}
});
});
</script>
Then put your code inside this if :
if (response.smsCode)
{
}
That's all, I hope you find this helpful

Javascript runtime error $ is undefined?

I keep getting this annoying error pointing to my javascript function klm() and I have absolutely clueless why I get the error. I have checked my starting and closing tags and everything seems to look fine. What could I be doing wrong? The error specifically points to the klm method.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Dtata.aspx.cs" Inherits="Dtata" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function klm() {
$.ajax({
type: "POST",
url: "Dtata.aspx/Hello",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { name: 'hello' },
success: function (result) {
response(result.d);
Counter()
},
error: function (result) {
alert('There is a problem processing your request');
}
});
}
function Counter() {
$.ajax({
type: "POST",
url: "Dtata.aspx/Counter",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result.d);
},
error: function (result) {
alert('There is a problem processing your request');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="btnGetTime" type="button" value="Show Current Time" onclick = "klm()" />
<div>
</div>
</form>
</body>
</html>
You need to include jQuery. Your script uses a jQuery function ($.ajax()) See: http://jquery.com/

angularJS AJAX postback method not fired

Anyone please help me, I have created simple angularJS AJAX postback method.
below my HTML code.
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head runat="server">
<title></title>
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
function myCtrl1($scope) {
$scope.ChkLogin = function () {
alert('Hello...');
$.ajax({
type: "POST",
url: "WebService1.asmx/Test",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//alert('Success');
alert(msg.d);
},
error: function (msg) {
//alert('Failed');
alert(msg.d);
}
});
};
}
</script>
</head>
<body>
<form id="form1" ng-controller="myCtrl1">
<div>
<input type="button" name="btnTest" value="Test button" ng-click="ChkLogin()"/>
</div>
</form>
</body>
</html>
WebService method :
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Test()
{
return "Hellow World";
}
Upon clicking Test button, i get alert "Hello..." then failure alert msg, my webservice Test() has not been fired.
You need to Specifiy Type = get
Change this - type: "GET",
Thanks guys for your time, I had removed below line, now webservice method being fired.
contentType: "application/json; charset=utf-8",

Beginners to JQuery

The following is my form
<form id="form1">
<table>
<tr><td >Name:</td><td class="CommentsRight"><input type="text" name="txtName" style="width:90%" /></td></tr>
<tr><td >Email: (Optional)</td><td class="CommentsRight"><input type="text" Name="txtEmail" style="width:90%" /></td></tr>
<tr><td >Comment: </td><td class="CommentsRight"><textarea type="text" style="width:90%" Name="txtMessage" TextMode="MultiLine" Rows="10"></textarea></td></tr>
<tr><td ></td><td class="CommentsRight"><input type="submit" width="100" ID="cmdSubmit" onclick="javascript: SubmitComment();" /> <input type="button" ID="cmdCancel" Text="Reset" value="Reset" onclick="document.getElementById('form1').reset();" /></td></tr>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
function SubmitComment()
{
alert($("txtName").val());
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: '{txtCode: "' + $("#txtName.value") + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert('success'); } ,
failure: function (response) {
alert(response.d);
}
});
}
The alert is bringing back undefined all the time for the alert, i'm a beginner to Ajax/Jquery. I've tried #txtName, I've tried input also but it doesn't return any value I put into the txtName, what am I do wrong. I want to then extend data so i pass all the input strings into the data.
In short,
How do I get the value of txtName.text
How do I build up the data string so it contains separated data values
Your help most appreciated.
Try the following:
<input type="text" name="txtName" style="width:90%" />
Into
<input type="text" name="txtName" id="txtName" style="width:90%" />
javascript: SubmitComment();
Into
javascript: SubmitComment(e);
function SubmitComment()
{
Into
function SubmitComment(e)
{
e.preventDefault();
alert($("txtName").val());
Into
alert($("#txtName").val());
data: '{txtCode: "' + $("#txtName.value") + '" }',
Into
data: {txtCode: $("#txtName").val() }, // Send particular data
(or)
data: $("#form1").serialize(), // Send inside form all data
You can not use $("txtName") as you did it. jQuery will not know what to select. There is no class/id or any other selector. Rather use $("input[name=txtName]").val() or give the txtName a class or id (like i did in my example below).
If you want to send the form now in a nice Json you need to serialize it:
var data = $("#form1").serialize();
https://jsfiddle.net/gahapv4t/
you have written wrong code in data parameter in ajax request. you can pass object of paramater then jQuery take care of it to convert into Raw POST data or Query string.
function SubmitComment()
{
alert($("txtName").val());
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: {txtCode: $("#txtName").val()},
dataType: "json",
success: function (data) { alert('success'); alert(JSON.stringify(data)) } ,
failure: function (response) {
alert(response.d);
}
});
Look you can do it in many ways. According to your markup you can try to get value of txtName in following way
$("input[name=txtName]").val();
Or you can add an id with the input field in following way
<input name="txtName" id="someid">
And finally to get value use following code
$("#someid").val()
$("input[name=txtName]").val() is to get the value by name.
$("#id").val() is to get value by its id.
$(".class").val() is to get value by class name.
I think that you have the answer to your first question.
use $("#txtName').val() for receive the value of the field,
you can achieve your second question in multiple ways:
Using the .serialize() function
like Marcel wrote you can create a variable data where you serialize the form and pass it to the $.ajax function like this:
var data = $("#form1").serialize();
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert('success'); } ,
failure: function (response) {
alert(response.d);
}
});
2. Using FormData Object
Update your function intercepting a submit event to your form, create a FormData Object and pass your form like this:
$("#form1").submit(function(e){
e.preventDefault();
var formdata = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: formdata,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert('success'); } ,
failure: function (response) {
alert(response.d);
}
});
});
Whit this method you can also insert custom data to pass:
formData.append('action', 'customAction');
formData.append('id', 123);
formData.append('mydogname', 'Jo');
3. Using post() function
This is one of the simpliest way to send post data using Ajax (Documentation ). It's also easy to customize and use Jquery Logics.
$( "#form1" ).submit(function( event ) {
event.preventDefault();
var $form = $( this ),
data = $form.serialize();
var posting = $.post( "#(Request.RawUrl)", data );
posting.done(function( data ) {
alert(data);
});
});
I hope this will help you.

Framework7 onPageInit Not Working

I have a Framework7 template.
I want to call a webservice when the page load.
My code inside the js file is:
myApp.onPageInit('cards', function (page){
myApp.alert('Alert 1');
$.ajax({
type: "POST",
url: "http://localhost:6032/Api.svc/GetTicket/",
data: JSON.stringify({UnitType:1,UnitNr:1,PrinterTextNr:1,PrinterNr:0,Copies:1,Logo:0,Delay:0,Host:'pc-pc',Port:8899}),
processData: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Get The Ticket
var ticket = data.data.TicketNumber;
document.getElementById('myticket').innerHTML = ticket;
//End Get The Ticket
document.getElementById('ticketBody').style.display = "block";
alert(1);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}).trigger();
But when the page load doesn't do nothing.
When I try my script on another html files, it works fine.
Can you help me?
Thank you.
<!-- Views -->
<div class="views">
<!-- Your main view -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<div class="page" data-page="cards">
<div class="page-content">
page content goes here
</div>
</div>
</div>
</div>
make sure your external page contains this <div class="page" data-page="cards">
Make sure you initialized myApp and check if your page contains this line
<div data-page="cards" class="page">
also, try something like
mainView.router.loadContent(ticket);
try this format
function Get_MySQL_Category() {
$.ajax({
type: "POST",
url: "http://localhost:6032/Api.svc/GetTicket/",
data: JSON.stringify({UnitType:1,UnitNr:1,PrinterTextNr:1,PrinterNr:0,Copies:1,Logo:0,Delay:0,Host:'pc-pc',Port:8899}),
processData: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Get The Ticket
var ticket = data.data.TicketNumber;
document.getElementById('myticket').innerHTML = ticket;
//End Get The Ticket
document.getElementById('ticketBody').style.display = "block";
alert(1);
},
error: function (xhr) {
alert(xhr.responseText);
}
});
};
myApp.onPageInit('cards', function (page) {
Get_MySQL_Category()
});

Categories