I'm learning web dev with a Razor app. I have a Page, PeopleIndex where a table shows a people list and after each row there is, 1st an <a ...> to Edit person data, and 2nd a <input ...> from where I would like to call the jQuery UI confirm dialog (which I already have the code in the .cshtml), from where if I click "Yes" button that person registry should be deleted, this is, call the Delete() method that is in the .cshtml.cs file. I clear out that this procedure is not a submit action, I say this because all what I found on the Internet related to my problem was about "form method = POST and type=submit" and that all this should be done in another Page, that I want to just do it in my person listing Page. But, if I'm wrong, I will listen to ideas.
I attach both files of my PeopleIndex Razor Page:
************* PeopleIndex.cshtml *****************
#page
#model WebAppPersonas.Pages.PersonasIndexModel
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head title="Lista de personas">
<link rel="stylesheet" href="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
// Confirmation Dialog
$('#confirmDialog').dialog({
autoOpen: false,
width: 500,
height: auto,
modal: true,
resizable: false,
buttons: {
"Yes": function () {
$(".ui-dialog-buttonpane button:contains('Si')").button("disable");
$(".ui-dialog-buttonpane button:contains('No')").button("disable");
call Delete() C# method from .cs file // neither know what goes here
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#deleteReg').click(function (e) {
e.preventDefault();
$('#confirmDialog').dialog('open');
});
});
</script>
</head>
<body>
<a asp-page="./InsertUpdate" class="btn btn-primary"> Add person </a>
<h2> People LIst </h2>
<table class="table">
<thead>
<tr>
<th> #Html.DisplayNameFor(Model => Model.people[0].Id) </th>
<th> #Html.DisplayNameFor(Model => Model.people[0].Name) </th>
<th> #Html.DisplayNameFor(Model => Model.people[0].Age) </th>
<th> #Html.DisplayNameFor(Model => Model.people[0].Email) </th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.people)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.Id) </td>
<td> #Html.DisplayFor(modelItem => item.Name) </td>
<td> #Html.DisplayFor(modelItem => item.Age) </td>
<td> #Html.DisplayFor(modelItem => item.Email) </td>
<td> <a asp-page="./InsertUpdate" asp-route-id="#item.Id"> Update </a> | <input type="button" value="Delete" onclick="I don't know what goes here"/> </td>
</tr>
}
</tbody>
</table>
<div id="confirmDialog" title="Confirm delete">
<p> You are about to delete a registry ¿Are you sure?</p>
</div>
</body>
</html>
********** PeopleIndex.cshtml.cs *****************
public void OnGet()
{
people = dataAccess.GetPeople();
}
public ActionResult Delete(int? id)
{
dataAccess.DeletePerson(id.Value);
return Redirect("./PeopleIndex");
}
I had to cut off the header of the .cshtml.cs file because the site didn't allow me to format that code and then because of that the site didn't allow me to post the question. I hope now it allows me to post the question. This is very complicated. I think it should be easier the duty of formatting code in different languages, but well, ... this is what there is ...
Thank you in advance.
EDIT***
Hi, Michael
I edited the files with the code you gave me. But I put a breakpoint in:
$('.deleteButton').click(function (e) {
e.preventDefault();
const id = $(e.target).data("id");
$('#confirmDialog').data("id", id);
$('#confirmDialog').dialog('open');
});
And it doesn't enter that code, which comes from the button here:
<tbody>
#foreach (var item in Model.people)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.Id) </td>
<td> #Html.DisplayFor(modelItem => item.Name) </td>
<td> #Html.DisplayFor(modelItem => item.Age) </td>
<td> #Html.DisplayFor(modelItem => item.Email) </td>
<td> <a asp-page="./InsertUpdate" asp-route-id="#item.Id"> Update </a> | <button class="deleteButton" data-id="#item.Id"> Delete </button> </td>
</tr>
}
</tbody>
So it is not working by now, but at least we now know where is the problem.
I attach again the affected files with current updates, I don't put the .cs because it's the only that is Ok.
1st, the .cshtml.cs (Now we know that when clicking deleteButton it doesn't enter the JS function. I tried changing class for name but the same.)
#page
#model WebAppPersonas.Pages.PeopleIndexModel
#section Head
{
<link rel="stylesheet" href="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
#*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>*#
<script src="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
// Confirmation Dialog
$('#confirmDialog').dialog({
autoOpen: false,
width: 500,
height: auto,
modal: true,
resizable: false,
buttons: {
"Yes": function () {
$(".ui-dialog-buttonpane button:contains('Yes')").button("disable");
$(".ui-dialog-buttonpane button:contains('No')").button("disable");
DeletePerson($(this).data("id"));
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('.deleteButton').click(function (e) {
e.preventDefault();
const id = $(e.target).data("id");
$('#confirmDialog').data("id", id);
$('#confirmDialog').dialog('open');
});
});
</script>
<script>
const token = document.getElementsByName('__RequestVerificationToken')[0].nodeValue;
function DeletePerson(id) {
const formData = new FormData();
formData.append("id", id);
fetch(window.location.href, {
method: 'DELETE',
headers: { 'XSRF-TOKEN': token },
body: formData
})
.then(result => { window.location.reload(); })
.catch(error => alert("Error sending DELETE request."))
}
</script>
}
<div id="confirmDialog" title="Confirm delete">
<p> You are about to delete a registry. Are you sure? </p>
</div>
<a asp-page="./InsertUpdate" class="btn btn-primary"> Add person </a>
<h2> List of People </h2>
<table class="table">
<thead>
<tr>
<th> #Html.DisplayNameFor(Model => Model.people[0].Id) </th>
<th> #Html.DisplayNameFor(Model => Model.people[0].Name) </th>
<th> #Html.DisplayNameFor(Model => Model.people[0].Age) </th>
<th> #Html.DisplayNameFor(Model => Model.people[0].Email) </th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.people)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.Id) </td>
<td> #Html.DisplayFor(modelItem => item.Name) </td>
<td> #Html.DisplayFor(modelItem => item.Age) </td>
<td> #Html.DisplayFor(modelItem => item.Email) </td>
<td> <a asp-page="./InsertUpdate" asp-route-id="#item.Id"> Update </a> | <button class="deleteButton" data-id="#item.Id"> Delete </button> </td>
</tr>
}
</tbody>
</table>
#Html.AntiForgeryToken()
2nd, the _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebAppPersonas</title>
#*<link rel="stylesheet" href="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.css" />*#
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
#*<script src="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>*#
#RenderSection("Head", false)
</head>
<body>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">WebAppPersonas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - WebAppPersonas - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
#*<script src="~/lib/jquery/dist/jquery.min.js"></script>*#
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Blockquote
Razor pages are a server side technology. You can't call C# functions in javascript. Instead
you can make a request. This request will be assigned to a method in your Razor page using
the routing middleware.
To illustrate the problems that this implies we have a simple PageModel:
public class Person
{
public int Id { get; set; }
public string Firstname { get; set; }
public string Lastname { get; set; }
}
public class PersonsModel : PageModel
{
private static List<Person> _persons = new List<Person>
{
new Person{Id = 1, Firstname = "FN1", Lastname = "LN1"},
new Person{Id = 2, Firstname = "FN2", Lastname = "LN2"},
new Person{Id = 3, Firstname = "FN3", Lastname = "LN3"},
new Person{Id = 4, Firstname = "FN4", Lastname = "LN4"}
};
public List<Person> Persons => _persons;
public void OnGet()
{
}
// Called from fetch (JavaScript)
public IActionResult OnDelete(int id)
{
var person = _persons.Find(p => p.Id == id);
if (person == null) { return NotFound(); // HTTP 404 triggers .catch() in fetch }
_persons.Remove(person);
return new NoContentResult(); // HTTP 204
}
}
As you can see, OnDelete returns no redirect, because the server response is not interpreted by
the browser. It is up to you to respond to this return value.
In our Razor view we have a list of persons and a delete button for each of them.
#page
#model RazorDemo.Pages.PersonsModel
#{
}
<ul>
#foreach (var p in Model.Persons)
{
<li>#p.Id - #p.Firstname #p.Lastname <button onclick="deletePerson(#p.Id)">Delete</button></li>
}
</ul>
#*Generate a hidden field with the RequestVerificationToken.*#
#Html.AntiForgeryToken()
<script>
const token = document.getElementsByName('__RequestVerificationToken')[0].value;
// Send a DELETE request as multipart/form-data (an ordinary HTML form)
function deletePerson(id) {
// Crates a HTML form with one parameter (id)
const formData = new FormData();
formData.append("id", id);
fetch(window.location.href, {
method: 'DELETE',
headers: { 'XSRF-TOKEN': token },
body: formData
})
.catch(error => alert("Error sending DELETE request."));
}
</script>
A server generated HTML form contains a hidden input element with an anti forgery token
(request verification token, more information at www.learnrazorpages.com).
We have to create this element manually by using #Html.AntiForgeryToken().
The JavaScript gets the value of this token. After that we are creating the payload of an ordinary
HTML form, because we want to use standard model binding and validation at server side.
Now we need to do some configuration, because we are sending the anti forgery token in the
request header.
public void ConfigureServices(IServiceCollection services)
{
// Other services
services.AddAntiforgery(o => o.HeaderName = "xsrf-token");
}
Now you can delete a person, but your UI dosen't refresh. Only after reloading the deleted
person disappears. Now you come to a point where you need a JavaScript MVVM framework instead of JQuery.
A small JavaScript framework is Knockout. A JavaScript MVVM framework
generates the html content based on json values from your server. You can send your list of persons
to the client as JSON and store it in an array. When you delete a person, you
can delete that person in that array and the templates engine will update your view automatically.
Razor pages supports JSON results and different handlers, so you don't need a separate controller for that.
// GET Persons?handler=AllPersons
public IActionResult OnGetAllPersons()
{
return new JsonResult(Persons);
}
Using jQuery UI
To include the jQuery UI references you can define a section in your main layout (_Layout.cshtml).
The default template uses bootstrap and jQuery. To get jQuery UI to work, you have to reference
to the bundled version of jQuery which comes with jQuery UI. We also define a section in the head element, which can be used by
the razor page.
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Other references (bootstrap css, ...) -->
<script src="~/lib/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
#RenderSection("Head", false)
</head>
<body>
<!-- Your layout with RenderBody() -->
<!-- NO REFERENCE TO JQUERY! -->
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Important: Delete (or comment out) the reference to lib/jquery/dist/jquery.min.js at the end of
the body.
Now we can add a dialog to the Persons page:
#page
#model RazorDemo.Pages.PersonsModel
#section Head
{
<link rel="stylesheet" href="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.css" />
<script src="~/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
// Confirmation Dialog
$('#confirmDialog').dialog({
autoOpen: false,
width: 500,
height: "auto",
modal: true,
resizable: false,
buttons: {
"Yes": function () {
$(".ui-dialog-buttonpane button:contains('Si')").button("disable");
$(".ui-dialog-buttonpane button:contains('No')").button("disable");
// Call deletePerson with data-id of the dialog div.
deletePerson($(this).data("id"));
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('.deleteButton').click(function (e) {
e.preventDefault();
// We have a generic event handler for all buttons.
// So we have to look at the event source and read the data-id attribute.
const id = $(e.target).data("id");
// Now we create a data attribute for <div id="confirmDialog">
$('#confirmDialog').data("id", id);
$('#confirmDialog').dialog('open');
});
});
function deletePerson(id) {
const token = document.getElementsByName('__RequestVerificationToken')[0].value;
const formData = new FormData();
formData.append("id", id);
fetch(window.location.href, {
method: 'DELETE',
headers: { 'XSRF-TOKEN': token },
body: formData
})
.then(result => { window.location.reload(); }) // Reloading the page. This is not AJAX, but it will do the job.
.catch(error => alert("Error sending DELETE request."));
}
</script>
}
<div id="confirmDialog" title="Confirm delete">
<p> You are about to delete a registry. Are you sure?</p>
</div>
<ul>
#foreach (var p in Model.Persons)
{
<li>#p.Id - #p.Firstname #p.Lastname <button class="deleteButton" data-id="#p.Id">Delete</button></li>
}
</ul>
#*Generate a hidden field with the RequestVerificationToken.*#
#Html.AntiForgeryToken()
Instead of onClick you can use a generic event handler (defined with .click() in jQuery).
Therefore the buttons have a data-id attribute. Inside the event handler we retrieve this id
with $(e.target).data("id") and assign a data-id attribute dynamically to the dialog div.
This is a C# MVC code wherein after searching the records from the database I am trying to display the records in each row (which is working). Each row consists of Update School button along with other details including the ChdId. After clicking this button my View should return schId (after selecting the school from the drop-down) and ChdId corresponding to that row. But after submitting the Update School of any row I am getting the ChdId of the first row always in my Controller (not of the row that I am updating).
Question:
Has anyone ever run into this issue before? Or does anyone know why this is happening, or what I'm doing wrong?
Please check out my code below and thanks for checking my question!
Controller:
[HttpPost]
public ActionResult UpdateSchool(int SchoolNames, int ChdId, Child model)
{
}
View:
#model Ass4Final.Models.Child
#{
ViewBag.Title = "Search";
var listOfSchoolNamesAndIds = ViewBag.SchoolNameAndId;
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="~/JS/Search.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h2>Search</h2>
<br /> <br />
<div>
<table class="table" id="myTable" style="width:100%">
<tr>
<th>
#Html.Label("Child ID")
</th>
<th>
#Html.Label("Child Name")
</th>
<th>
#Html.Label("DOB")
</th>
<th>
#Html.Label("School Name")
</th>
<th></th>
</tr>
#foreach (var item in Model.DataChdNamCurrSchDOBProp)
{
<tr>
<td>
#item.ChdId
</td>
<td>
#item.ChdName
</td>
<td>
#item.DOB
</td>
<td>
#item.School
</td>
<td>
<div data-role="main" class="ui-content">
Update School
<div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;">
#using (Html.BeginForm("UpdateSchool", "Home", FormMethod.Post))
{
<h3>Enter New School</h3>
#Html.DropDownList("SchoolNames", new SelectList(ViewBag.SchoolNameAndId, "schId", "schName"), "Select New School", new { #id = "MySearch" })
<input type="hidden" value="#item.ChdId" name="ChdId" />
<input type="submit" data-inline="true" value="UpdateSchool">
}
</div>
</div>
</td>
</tr>
}
</table>
</div>
</body>
</html>
I want to run jquery code when i click on a button.
This is my jquery code:
<script src="scripts/jquery-1.4.1.js"></script>
<script type ="text/javascript" >
$(document).ready(function () {
$('#searchtextbtn').click(function () {
alert("Hello");
});
});
</script>
And my html looks like:
<body>
<div id="content_inner">
<div class ="page_header">
<h2>Location Master</h2>
<div id="search">
<table width="100%">
<tr>
<td align="left">
<font color="#AFBECF">#Html.Label("Search")</font>
</td>
<td>
<input id="searchtextbtn" type="submit" value="search">
<input id="searchtextbtn" type="button" value="search"> #*not woring*#
</td>
</tr>
</table>
</div></div></div>
But here when i click on the button nothing happens.
This is the page once I run my project:
When I click on the "Location Master" link, partial view will be displayed like this:
which contain search button.
Add the following CDN to your code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
My problem is that, the submit button is not working. As you can see, my partial view contains a jquery modal. If you click "mdlist" the modal will and appear with the submit button.
Can you please tell me whats the possible problem.
#model IEnumerable<MyApp.Models.Participant>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<a id="mdlist" class="button" href="#"><span class="new icon"></span>Add Participant</a>
<div id="dialog" class="content-wrapper">
<div class="buttons">
<input type="submit" name="submitButton" value="Save" class="button save icon" />
</div>
<table cellspacing="0">
<thead>
<tr>
<th>
</th>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<input type="checkbox" name="ParticipantCheck" id="#item.ID" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
</tbody>
}
</table>
</div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
height: 400,
width: 670,
modal: true,
closeOnEscape: true,
resizeable: false
});
</script>
First of all you need to add Form (submit button works only if there was a form) by
#using(#Html.BeginForm()){
//place your html elements and submit button here
}
Next if you have an array the way you are adding checkboxes is incorrect take a look at this link
I am using ASP.NET MVC with knockout to build a calendar with events that when a user clicks on the event, an Ajax request is sent with the event data to a c# function.
I am having a tough time getting the error div to show up if the user is not logged in prior to clicking the add href, as well as the add href to call the proper function.
The parameters in the AddEvent are being populated from the ASP.NET View
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/Hudl/Content/styles.css" />
<link rel="stylesheet" href="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.css" />
<script src="/Hudl/Scripts/knockout-3.1.0.js"></script>
<script src="/Hudl/Scripts/jquery.min.js"></script>
<script src="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.js"></script>
<script src="/Hudl/Scripts/Google/Google.js"></script>
<meta name="viewport" content="width=device-width" />
<title>Concert</title>
</head>
<body>
<div><img src="/Hudl/Content/Images/curtains_closing.jpg" width="100%" height="200em"></div>
<div class="title">
7 2014
<span id="signinButton">
<span class="g-signin"
data-callback="signinCallback"
data-clientid="1071645370589-acdsg7rjbsk7dn5lecfbk83k9uh8fnaa.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
</div>
<div data-bind="visible: displayError" id="error" title="Must Login">
<p>You must login to Google+ before you can add a concert to your calendar.</p>
</div>
<table border="1">
<tr><th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th></tr>
<tr>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><div class="date">1</div></td>
<td><div class="date">2</div></td>
<td><div class="date">3</div></td>
<td><div class="date">4</div></td>
<td><div class="date">5</div></td>
</tr>
<tr>
<td><div class="date">6</div></td>
<td><div class="date">7</div></td>
<td><div class="date">8</div></td>
<td><div class="date">9</div></td>
<td><div class="date">10</div></td>
<td><div class="date">11</div></td>
<td><div class="date">12</div></td>
</tr>
<tr>
<td><div class="date">13</div></td>
<td><div class="date">14
<div>
18:30
Paul McCartney
</div>
</div>
</td>
<td><div class="date">15</div></td>
<td><div class="date">16</div></td>
<td><div class="date">17</div></td>
<td><div class="date">18
<div>
13:30
Midwest Cup Show Choir Invitational
</div>
</div>
</td>
<td><div class="date">19
<div>
20:00
Marc-Andre Hamelin
</div>
</div>
</td>
</tr>
<tr>
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22
<div>
17:00
Edison
</div>
<div>
18:00
Tracy Byrd
</div>
</div>
</td>
<td><div class="date">23</div></td>
<td><div class="date">24
<div>
18:45
Imagine Dragon
</div>
<div>
20:00
Blue Man Group
</div>
</div>
</td>
<td><div class="date">25</div></td>
<td><div class="date">26</div></td>
</tr>
<tr>
<td><div class="date">27</div></td>
<td><div class="date">28</div></td>
<td><div class="date">29</div></td>
<td><div class="date">30
<div>18:30
Powerman 5000
</div>
</div>
</td>
<td>
<div class="date">31</div>
</td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
this.authResult = authResult;
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
console.log('Sign-in state: ' + authResult['error']);
}
};
</script>
<script>
$(function () {
$("#error").dialog();
});
</script>
</body>
</html>
and my js
function ViewModel() {
var self = this;
self.displayError = ko.observable(false);
self.addEvent = function(id, artist, description, date, startTime, endTime) {
if (!authResult['status']['signed_in']) {
self.displayError = true;
self.errorMessage = 'You are not logged-in to your google account.';
} else {
XMLHttpRequest.open("Get", "https://www.googleapis.com/calendar/v3/users/me/calendarList", true);
//make google api call to get list of calendars based on authResult value in callback function
//if api call to get calendars is successful, use authResult, concert, and calendarID to insert event into to make a new google api call to insert event
}
};
};
ko.applyBindings(new ViewModel());
right now i am receiving "Uncaught TypeError: undefined is not a function" everywhere that a javascript function is being called.
I went ahead and created a fiddle for this at http://jsfiddle.net/RKD9J/.
Key change was to use a knockout data binding handler for the click event to add a concert.
18:30Powerman 5000
Changes to
<a href="#" data-bind="click: function(data, event) { addEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00') }" >18:30</a> Powerman 5000
Following the instructions for passing arguments to functions found here http://knockoutjs.com/documentation/click-binding.html
Your javascript:AddEvent statement is assuming that there is an AddEvent declared at the top (window) level, not on your view model.