How can I change my defautl tab in jQuery - asp.net

I want to change the default tab in my jQuery code here:
$(function () {
$("#tabs").tabs({
activate: function () {
var selectedTab = $('#tabs').tabs('option', 'active');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
active: "<%= hdnSelectedTab.Value %>"
});
});
Here are some of my tabs.
<div id="tabs">
<ul id="tabs-name">
<li>Buscar contrato</li>
<li>Cotización</li>
<li>Client</li>
<li>Tiempo</li>
<li>Equipo</li>
<li>Componentes</li>
<li>Intervención terminado</li>
<li>Garantia y reparacion</li>
<li>Archivos</li>
<li>Expedicion</li>
</ul>
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
<div id="tabs-searchContractSection" class="menusection">
<contratoBuscarWebControl:contratoBuscarControl ID="WebControl3" runat="server" />
</div>
<div id="tabs-quoteSection" class="menusection">
<cotizacionWebControl:cotizacionControl ID="Header2" runat="server" />
</div>
<div id="tabs-clienteSection" class="menusection">
<ClientWebControl:clientControl ID="Header4" runat="server" />
</div>
<div id="tabs-TimeSection" class="menusection">
<tiempoControlerWebControl:tiempoControler ID="Header5" runat="server" />
</div>
I want to make "tabs-quoteSection" the default tab how can I adjust my jQuery to make this happen. Thank you for any help

I generally suggest to separate client side and server side scripting. You can use .NET results to populate JS yet it may be better to POST or GET the data you need from the back-end.
Consider the following example:
$(function() {
function getTabIndex() {
var min = 0;
var max = $("#tabs-name li").length - 1;
var i = -1;
// Ask .NET for Index via POST
// Push resulting Integer to 'i' variable
if (i == -1 || i > max) {
i = max;
}
return i;
}
var defaultTabIndex = getTabIndex();
$("#tabs").tabs({
active: defaultTabIndex
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul id="tabs-name">
<li>Buscar contrato</li>
<li>Cotización</li>
<li>Client</li>
<li>Tiempo</li>
<li>Equipo</li>
<li>Componentes</li>
<li>Intervención terminado</li>
<li>Garantia y reparacion</li>
<li>Archivos</li>
<li>Expedicion</li>
</ul>
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
<div id="tabs-searchContractSection" class="menusection">
<contratoBuscarWebControl:contratoBuscarControl ID="WebControl3" runat="server" />
</div>
<div id="tabs-quoteSection" class="menusection">
<cotizacionWebControl:cotizacionControl ID="Header2" runat="server" />
</div>
<div id="tabs-clienteSection" class="menusection">
<ClientWebControl:clientControl ID="Header4" runat="server" />
</div>
<div id="tabs-TimeSection" class="menusection">
<tiempoControlerWebControl:tiempoControler ID="Header5" runat="server" />
</div>
Hope this helps.

Related

How to make folder and use to upload file into it in asp.net

I have developed web management document using ASP.NET.
I confused about how to make specific folder according "User Profile". So the schema likes when user upload their document, it is automatically create a folder according their Profile (ex: if Admin Finance upload their document, it's automatically create a folder name 'Finance' and the file uploaded to it but it only done for the first time).
For upload file I use AjaxUploader.
Below my upload code using Ajax Uploader:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload_Preview.aspx.vb" Inherits="MRISO_FileUpload.FileUpload_Preview" %>
<%# Register Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" TagPrefix="CuteWebUI" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Upload File</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Style/demo.css" />
<script type="text/javascript">
$(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
})
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.dataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "Todo"]]
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#gvFileDetails").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
$('#gvFileDetails').DataTable();
$('input[type=search]').on("keyup", function () {
var searchTerm = $(this).val();
$(".forHighlight").each(function () {
var searchPattern = new RegExp('(' + searchTerm + ')', 'ig');
$(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + searchTerm + "</span>"));
});
});
});
</script>
<style type="text/css">
body {
font-family: 'Segoe UI';
font-size: 10pt;
}
.highlight {
background-color: yellow;
}
</style>
<script runat="server">
Private Sub InsertMsg(ByVal msg As String)
ListBoxEvents.Items.Insert(0, msg)
ListBoxEvents.SelectedIndex = 0
End Sub
Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs)
MyBase.OnInit(e)
SubmitButton.Attributes("onclick") = "return submitbutton_click()"
End Sub
Private Sub SubmitButton_Click(ByVal sender As Object, ByVal e As EventArgs)
InsertMsg("You have uploaded " & uploadcount & "/" & Uploader1.Items.Count & " files.")
End Sub
Private uploadcount As Integer = 0
Private Sub Uploader_FileUploaded(ByVal sender As Object, ByVal args As UploaderEventArgs)
uploadcount += 1
Dim uploader As Uploader = DirectCast(sender, Uploader)
InsertMsg("File uploaded! " & args.FileName & ", " & args.FileSize & " bytes.")
'Copys the uploaded file to a new location.
args.CopyTo("../Forms/UploadFile/" & args.FileName)
'You can also open the uploaded file's data stream.
'System.IO.Stream data = args.OpenStream()
Dim data As System.IO.Stream = args.OpenStream
End Sub
Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)
SubmitButton.Attributes("itemcount") = Uploader1.Items.Count.ToString()
MyBase.OnPreRender(e)
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<h2>Upload Your File
</h2>
<p>
This web is using for all Admin department to upload their document.<br /><br />
Regards,<br />
<u><b>JSS</b></u>
</p>
<CuteWebUI:UploadAttachments runat="server" ManualStartUpload="true" ID="Uploader1"
InsertText="Browse Files (Max 20M)" OnFileUploaded="Uploader_FileUploaded">
<ValidateOption AllowedFileExtensions="*.doc, *.docx, *.xls, *.xlsx, *.ppt, *.pptx, *.pdf" MaxSizeKB="20480" />
</CuteWebUI:UploadAttachments>
<p>
<asp:Button ID="SubmitButton" Text="Upload" CssClass="btn btn-success" OnClick="SubmitButton_Click" runat="server" />&nbsp&nbsp
<asp:Button ID="btnCancel" Text="Back to Home" CssClass="btn btn-success" runat="server" />
</p>
<p>
<asp:ListBox ID="ListBoxEvents" runat="server"></asp:ListBox>
</p>
<script type="text/javascript">
function submitbutton_click() {
var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
var uploadobj = document.getElementById('<%=Uploader1.ClientID %>');
if (!window.filesuploaded) {
if (uploadobj.getqueuecount() > 0) {
uploadobj.startupload();
}
else {
var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
if (uploadedcount > 0) {
return true;
}
alert("Please browse files for uploading");
}
return false;
}
window.filesuploaded = false;
return true;
}
function CuteWebUI_AjaxUploader_OnPostback() {
window.filesuploaded = true;
var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
submitbutton.click();
return false;
}
</script>
</div>
<hr />
<%-- This tab is displayed the uploaded data and categories by Department --%>
<div id="gridview" class="content">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuOne">
<span class="glyphicon glyphicon-minus"></span>
General Department
</a>
</h4>
</div>
<div id="menuOne" class="panel-collapse collapse in">
<div class="panel-body">
<asp:ScriptManager ID="Script1" runat="server"></asp:ScriptManager>
<asp:GridView ID="gvFileDetails" AutoGenerateColumns="false" CssClass="table table-bordered" AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileDetails.PageSize * gvFileDetails.PageIndex) + gvFileDetails.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Text" HeaderText="File Name" ItemStyle-CssClass="forHighlight" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="50%" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" Text="Download" CommandArgument='<%# Eval("Value") %>' OnClick="DownloadFile" runat="server"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" Text="Delete" CommandArgument='<%# Eval("Value") %>' OnClick="DeleteFile" OnClientClick="return confirm('Are you sure want to delete this file?')" runat="server"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="hlOpen" Text="View" NavigateUrl='<%# Eval("Value", "~/ViewPage.aspx?fileName={0}") %>' Target="_blank" runat="server"></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuTwo">
<span class="glyphicon glyphicon-plus"></span>
Tab Kedua
</a>
</h4>
</div>
<div id="menuTwo" class="panel-collapse collapse">
<div class="panel-body">
This tab is empty. Waiting for the data...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuThree">
<span class="glyphicon glyphicon-plus"></span>
Tab Ketiga
</a>
</h4>
</div>
<div id="menuThree" class="panel-collapse collapse">
<div class="panel-body">
This tab is empty. Watingn for the data...
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Below is the create folder code :
Dim path As String = "F:\Upload Document Dept\ " & Session("profile")
If Not (Directory.Exists(path)) Then
Directory.CreateDirectory(path)
lblMsg.Text = "Folder Succesfully create."
Else
lblMsg.Text = "Directory already exists."
End If
I don't know how to make it working together, like I say above. Please help me guys. Thank :)

Fullcalendar does not refresh events from XML file

Why full calendar does not refresh events from XML file. I add one item to XML file and the fullcalendar does not refresh. Any idea?
Its asp.net and mysql and when I insert one item on my XML file I need to refresh
Here is my code:
There are 2 files asp.net and C#
If I refresh the webpage it seems to work
<%# Page Language="C#" AutoEventWireup="true" CodeFile="calendario.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
//lang: 'pt',
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
businessHours: true,
editable: true,
events: function (start, end, timezone, callback) {
$.ajax({
url: 'eventos_professor.xml',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function (doc) {
var events = [];
$(doc).find('event').each(function () {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'), // will be parsed
end: $(this).attr('end'), // will be parsed
textColor: "red",
backgroundColor: "black"
});
});
callback(events);
}
});
},
selectable: true,
dayClick: function (fecha, evento, vista) {
//alert(fecha.format());
$("#myModal").modal();
}
});
$('#calendar').fullCalendar('refetchEvents');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div id="calendar">
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Marcar aula</h4>
<div class="form-group">
<label for="txtData">Data:</label>
<asp:TextBox ID="txtData" runat="server" Enabled="true"></asp:TextBox>
</div>
</div>
<div class="modal-body">
<div class="row" style="background-color:darkgray;">
<div class="form-group">
<label for="DropDownList1">Escolha a Turma:</label>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="txtHorainicio">Hora início:</label>
<asp:TextBox ID="txtHorainicio" type="Time" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="txtHorafim">Hora fim:</label>
<asp:TextBox ID="txtHorafim" type="Time" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="CheckBox1">Repetir Evento</label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" AutoPostBack="True" runat="server" Checked="false" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div class="row">
<div id="opcoes" runat="server" visible="false">
<div class="col-md-4">
<asp:CheckBox ID="CheckBox2" Text="Registar em Férias" runat="server" />
</div>
<div class="col-md-4">
<asp:CheckBox ID="CheckBox3" Text="Registar em feriados" runat="server" />
</div>
<div class="col-md-4">
<div class="form-group">
<label for="txtDataLimite">Até à data:</label>
<asp:TextBox ID="txtDataLimite" Text="2018-12-31" CssClass="form-control" Enabled="true" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-6 text-right">
<asp:Button ID="Button1" class="btn btn-default btn-danger" data-dismiss="modal" runat="server" Text="Close" />
</div>
<div class="col-xs-6 text-left">
<asp:Button ID="Button2" class="btn btn-default btn-success" runat="server" Text="Gravar" OnClick="Add_XML" />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
and C# code:
protected void Add_XML(object sender, EventArgs e)
{
XElement xml = XElement.Load("mypath\\eventos_professor.xml");
xml.Add(new XElement("event",
new XAttribute("title", "Agora sim"),
new XAttribute("start", "2018-07-23 19:45:00"),
new XAttribute("end", "2018-07-23 21:45:00")));
xml.Save("mypath\\eventos_professor.xml");
}

How to save html5 canvas image to SQL Server

I found this code on aspsnippets.com. I ran it successfully as far as running web page and being able to draw a signature and then it saves it to another html image on the screen. But I want to get this image into my database. How can I call html from my .aspx.vb page?
<div class="tools">
Marker <a href="#colors_sketch" data-tool="eraser">
Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="500" height="200" style = "border:3px solid #ccc">
</canvas>
<br />
<br />
<input type="button" id="btnSave" value="Save as Image"/>
<hr />
<img id = "imgCapture" alt = "" style = "display:table-cell;border:1px solid #ccc" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#colors_sketch').sketch();
$(".tools a").eq(0).attr("style", "color:#000");
$(".tools a").click(function () {
$(".tools a").removeAttr("style");
$(this).attr("style", "color:#000");
});
$("#btnSave").bind("click", function () {
var base64 = $('#colors_sketch')[0].toDataURL();
$("#imgCapture").attr("src", base64);
$("#imgCapture").show();
});
});
</script>

Datetimepicker doesn't function inside collapse panels

*********THIS WAS A MISTAKE- THE DATETIMEPICKER.JS WAS CORRUPTED* APOLOGIES.********
<div id="post" class="panel-collapse collapse">
<div class="panel panel-default">
<br />
<br />
<div class="container">
<div class="form-group col-sm-6">
<script type="text/javascript">
$(document).ready(function() {
$('.datepicker1').datepicker();
</script>
<div id="datetimepicker1" class="input-append date">
<input id="date_txt" runat="server" data-format="dd/MM/yyyy" type="text" />
<span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
The datepicker works fine everywhere else. Except when put inside a collapsible panel such as this.
Am I doing it wrong?
UPDATED CODE:
<div class="col-sm-9">
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
pickTime: false
});
});
</script>
<div id="datetimepicker2" class="input-append date">
<input id="date_txt" runat="server" data-format="dd/MM/yyyy" type="text" />
<span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
Two reasons, datepicker not working inside collapse panels
in HTML you have id selector
<div id="datetimepicker1" class="input-append date">
in script, you are targeting class
$('.datepicker1').datepicker();
should be
$('#datepicker1').datepicker();
and you are missing closing braces }); for ready event which causes syntax error.
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker1").datepicker();
}); <---This was missing
</script>
Edit
As you only want to show the date not time, I believe this pickTime: false not supported because pickDate and pickTime have been removed from current version.
So try like this and also you can set the date-format too which I think you are trying to set inside input.
<script type="text/javascript">
$(function () {
$("#datetimepicker2").datetimepicker({
format: "DD/MM/YYYY"
});
});
</script>
Working Fiddle

angular js routing trouble

I am unable to get my code working. I am a newbiew on JS and trying to implement some example I found online on routing on angularJs. I have spent many hours trying to fix it, but could not.
Issue : Default View(View2) is opened by $routeProvider configuration. However, when I redirect this to view2.htm to view1.htm but blank page opens up.
Please help !
HTML CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" />
<link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap.css" />
<link href="JS/bootstrap/css/bootstrap.css.map" />
<link href="JS/bootstrap/css/bootstrap.min.css" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" />
</head>
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>
<script src="JS/angular.js" language="javascript" type="text/javascript"></script>
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script>
<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">
</script>
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">
</script>
<body>
<title>::DEMO APP:: </title>
<div data-ng-app="demoApp1">
<script src="DemoJS.js" language="text/javascript" type="text/javascript"></script>
<div class="container">
<h3>
All the examples AngularJS Here:</h3>
</div>
<div class="container-fluid" data-ng-view="">
</div>
</div>
</body>
</html>
View1.htm Markup
<div id="View1" >
<h2>
Example 4 & 5
</h2>
<div class="container">
Name <input type="text" data-ng-model="inputData.name" placeholder="Name" />
<br />
City <input type="text" data-ng-model="inputData.city" placeholder="City" />
<br />
<button class="btn btn-primary" data-ng-click="addCustomer()">
Add Customer</button>
<br />
Filter <input type="text" data-ng-model="nameText" placeholder="Filters" />
<br />
<ul>
<li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}}
- {{customer.city}} </li>
</ul>
<a ng-href="#/View2.htm">View2</a>
</div>
</div>
View2.htm Markup
<div id="View2">
<h2>
Example 1,2 and 3</h2>
<div class="container">
<h3>
Data Binding Fundamentals</h3>
<h4>
Using a Data Binding Template</h4>
Name:
<input type="text" data-ng-model="name" placeholder="Type something" />
{{ name }}
</div>
<h1>
Example 2</h1>
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']">
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<h1>
Example 3</h1>
<div>
<h3>
Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="name in names">{{name}} </li>
</ul>
</div>
<a ng-href="#/View1.htm">View1</a>
</div>
DemoJS.js file code
var demoApp1 = angular.module('demoApp1', ['ngRoute'])
demoApp1.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController1',
templateUrl: '/View2.htm'
})
.when('View1',
{
controller: 'SimpleController',
templateUrl: '/View1.htm'
});
});
demoApp1.controller('SimpleController1', function ($scope) {
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
});
demoApp1.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Sunil', city: 'Delhi' },
{ name: 'Ritu', city: 'Shbad' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
});
I have found my mistake. The href link I used was not correct. As href is managed by angular itself, we should not add ".html" and the string we mention here should match to $routeProvide config string.. Below is the Modification I Made:
Incorrect on View1.html
<a ng-href="#/View2.htm">View2</a>
Corrected on View1.html:
View2
Samething I did on View2.html.

Resources