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>
Related
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.
I'm using two asp.net ckeckboxes (chk1, and chk2) in a Web Forms project with MasterPage, and I'd like when I click over chk1, the chk2 becomes disable and viceverse without refreshing the entire page, so I'm using updatepanel to achieve this, I just implement the CheckedChanged event on the chk1 and put its AutoPostBack attribute to "true", and everything is ok.
The problem is when I try to implement the bootstrap-switch plugin (the two checkboxes seems like bootstrap-switch perfectly), but the problem is that when I click on the chk1, then the CheckedChanged is not fired, so the enable property of the chk2 is not affected.
I think the problem is when the user clicks on the chk1, in fact the click happens over the span's element's of the bootstrap-switch instead of the chk1 itself.
Please help, sorry for the english.
Update 1:
This is the source code of the page when it is running (right click on the browser), so you can see the bootstrap-switch libraries needed are present:
<html lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
- Mi aplicación ASP.NET
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-switch/bootstrap3/bootstrap-switch.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./Test" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h5sbkKDqDt9VeL5xnED+gV4kWiRKNFZBx2sOsl8K60EaOVXCuj7iQZJ3QAjjzsLsrj7CnOY8SUD81Mv51jUBYfWpQL0EHuQO3uPa8Yczm/eLjURJjkDTB57Iw5RJUitxpbKigIF0l4NevEGllIgA8hU3zjrDgSCrPtUA3qs7CJO+/ukopmdmKjOkgTjjWniVywgiMskpJEGPl3fzldVSaqkj8Ikbh+OElJUyureaFxNDS7bLq90ZhlVeNNZxorYyvtaj1HxMgniGxdfx0eClL+RD3ksd+mO6kkzV8mSXx+ykvf+A3Z2gcV0wjAcfpc09oxBF8vvsEtwBbJ+WbDlZLnGqn5W7GAFmmqD2l3e8AAFO6Sh0++Ivr057G/pw+FyebisB2dEOZeb2KZbNxL9/imrP/bBFcKrcyPeGiRUaXtjd7VPTXnD8Vox3T97yjv4P" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Error al cargar el marco de trabajo de cliente ASP.NET Ajax.');
//]]>
</script>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<script src="Scripts/bootstrap-switch.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$chk1','MainContent_chk1'], [], 90, 'ctl00');
//]]>
</script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Nombre de la aplicación
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Registrarse</li>
<li>Iniciar sesión</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="col-sm-2">
<input id="MainContent_chk1" type="checkbox" name="ctl00$MainContent$chk1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$chk1\',\'\')', 0)" class="BSswitch" data-size="mini" data-on-text="Si" data-off-text="No" /><label for="MainContent_chk1">Check 1</label>
</div>
<div id="MainContent_UpdatePanel1">
<input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /><label for="MainContent_chk2">Check 2</label>
</div>
<hr />
<footer>
<p>© 2016 - Mi aplicación ASP.NET</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="3l2FbHNq3NkXeXDBNuO5RZ4xOmC254tC8PhZRAdihltuEWASclMPM3jqhsB2rrjNHLrlioMYf4cBMhfvlMRCUVMkZXg6Bmvc06rKj2GCmkK97sprq9puXxVbM2rKg+DDwC9aG2lPJIcCLM1viuOkLw==" />
</div></form>
<script>
$("[class='BSswitch']").bootstrapSwitch();
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"41bd03d14e3342bebd4c2f830342b157"}
</script>
<script type="text/javascript" src="http://localhost:30137/825094549df74919a4a0dc141549d775/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
And now this is the Test.aspx file:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestBSswitch.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-2">
<asp:CheckBox ID="chk1" AutoPostBack="true" Text="Check 1" OnCheckedChanged="chk1_CheckedChanged" runat="server" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="chk2" Text="Check 2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
And now this is the Test.aspx.cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestBSswitch
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
chk1.InputAttributes.Add("class", "BSswitch");
chk1.InputAttributes.Add("data-size", "mini");
chk1.InputAttributes.Add("data-on-text", "Si");
chk1.InputAttributes.Add("data-off-text", "No");
chk2.InputAttributes.Add("class", "BSswitch");
chk2.InputAttributes.Add("data-size", "mini");
chk2.InputAttributes.Add("data-on-text", "Si");
chk2.InputAttributes.Add("data-off-text", "No");
}
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
if (chk1.Checked)
{
chk2.Enabled = false;
}
else
{
chk2.Enabled = true;
}
}
}
}
In the last file I have posted: "Test.aspx.cs", in the Page_Load event I have to add that attributes manually to the "chk1" in order to obtain the "switch" effect, because if I put that attributes ("data-size", "data-on-text", "data-off-text", and "class") in the aspx editor then it does not work at runtime, and if I delete that lines of code then the CheckedChanged works, but the style of the switch does not work.
Hope I have explain me in more detail, any question please ask me.
I just had to figure out a similar situation. Since bootstrap-switch prevents the CheckedChanged event from firing, I would recommend using jquery and the switchChange event provided by bootstrap-switch instead, like so:
$('#<%= chk1.ClientID%>').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) { //if chk1's switch is set to true
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', true);
}
else {
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', false);
}
});
*********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
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.
I'm an html noob and I just wanted to know if it's possible to make a text box in which you could type a website and when you click submit it will load the website in the iframe of your choice.
<html>
<head>
<title> Answer </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
</form>
<iframe src="http://www.google.com" width="100%" height="400" id="dynFrame"></iframe>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function SendMe()
{
document.all.myframe.src = document.forms[0].txtval.value;
}
</script/>
</head>
<body>
<form name="myform">
<input type="text" name="txtval">
<input type="button" value="Go" onclick="javascript:SendMe()">
<br>
<iframe src="http://www.google.com" width="400" height="200" name="myframe"></iframe>
</form>
</body>
</html>