<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$("button").click(function () {
alert("funny");
var $btn = $(this);
$btn.button('loading');
// Then whatever you actually want to do i.e. submit form
// After that has finished, reset the button state using
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<asp:TextBox ID="TextBox1" runat="server" Text="1" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></asp:TextBox>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" class="btn btn-default" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" ></asp:Label>
</form>
<button type="button" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
</body>
</html>
this is my simple code..
i have confirmed that jquery should load first then bootstrap.. still its not loading
Related
I work on asp.net web forms . I face issue on design page print server drop down list and
branches drop down list not display on same line or rows
so How to make both drop down list on same line or rows by bootstrap or CSS.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
body
{
padding: 20px
}
</style>
</head>
<body>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<form id="form1" runat="server">
<div style="max-width: 400px;">
<h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
<div class="row">
<div class='col-md-4'>
<asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
<asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
<div class='col-md-4'>
<asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
<asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
</div>
</div>
</form>
</body>
</html>
Expected result
align two drop down same line
last updated post
two drop down list display on same row as i need
but very closed from each other so how to leave space
img show status
You are using Boostrap version 3.0.3, try using the latest version currently available (5.2.3), in this case it works correctly!
last updated post
To leave space between rows you can use bootstrap classes; I removed the max-width that reduced the space, now it commands the container class
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
body
{
padding: 20px
}
</style>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<!--OLD STYLE -->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />-->
<!--New style-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<form id="form1" runat="server">
<div><!--style="max-width: 400px;" is no longer needed because it is handled by container (bootstrap)-->
<h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
<div class="container">
<div class="row">
<div class="col-6">
<p>Column 1</p>
<select>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
<asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
<asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
<div class="col-6">
<p>Column 2</p>
<select>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
<asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
<asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px">
</asp:DropDownList>
</div>
</div>
<asp:Label ID="lblDate" runat="server" Text="Date"></asp:Label>
<asp:TextBox ID="txtDate" runat="server" AutoPostBack = "True" TextMode="Date"></asp:TextBox>
<asp:Label ID="Label3" runat="server" Text="FromTime"></asp:Label>
<asp:TextBox ID="txtFromTime" runat="server" TextMode="Time" AutoPostBack = "True"></asp:TextBox>
<asp:Label ID="lblToTime" runat="server" Text="ToTime" ></asp:Label>
</div>
</div>
</form>
</body>
<!--OLD JS-->
<!--<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>-->
<!--New JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</html>
Or you can go ahead and replace one version of bootstrap at a time and check from which version everything works correctly
i would like to try bootstrap pop over using asp.net
ive already tried and search for the ways to do this
function pageLoad(sender, args) {
$('[data-toggle="popover"]').popover({
html: true,
placement: "bottom",
content: function () {
return $('#PopoverConditionMasterPart').html();
}
});
};
but still there's no clear sign for popover.
and in my debugger i see errors like $ is not defined and .popover is not a function
another problem is most of the tutorial is in MVC
can someone give me advise or better explanation to do this.
Thanks in advance and keep going!
here is my current work:
css:
<asp:Content ID="Content2" ContentPlaceHolderID="css" runat="server">
<link href="Content/bootstrap.css" rel="stylesheet" />
</asp:Content>
html:
<asp:Content ID="Content3" ContentPlaceHolderID="body" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="row">
<div class="col-md-2 col-lg-2">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" data-toggle="popover" data-placement='bottom' title="sample" ID="lblConditionMasterPart" CssClass="form-control popover PopoverConditionMasterPart" Text="click me" Style="cursor: pointer;"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel9" runat="server">
<ContentTemplate>
<div id="PopoverConditionMasterPart" style="display: none;">
<button type= "button" title="bnt1" class="form-control btn btn-secondary"> btn1</button>
<button type= "button" title="bnt1" class="form-control btn btn-primary"> btn2</button>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Content>
script:
<asp:Content ID="Content4" ContentPlaceHolderID="script" runat="server">
<script src="Scripts/jquery-3.2.1.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
function pageLoad(sender, args) {
$('[data-toggle="popover"]').popover({
html: true,
placement: "bottom",
content: function () {
return $('#PopoverConditionMasterPart').html();
}
});
};
</script>
</asp:Content>
It appears you are defining a pageLoad function but never calling it. You could call it in ready, but why not just do what the function does on page load:
<script type="text/javascript">
$(document).ready(
$('[data-toggle="popover"]').popover({
html: true,
placement: "bottom",
content: function () {
return $('#PopoverConditionMasterPart').html();
}
});
});
</script>
I am newbie. I am working on asp.net website. I have added datepicker and it works fine. Now I want to get that date and compare it with date in my database. But I have no idea of how to do it. I also goggled but couldn't find any solution.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="reserve" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
$(document).ready(function () {
$('#coin-slider').coinslider();
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript">
$(function () {
$('#popupDatepicker').datepick();
});
function showDate(date) {
alert('The date chosen is ' + date);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<input type="text" id="popupDatepicker" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<div id='coin-slider' >
<a target="_blank"> </a>
<a>
<img id="Img2" src="~/Images/ar1.jpg" alt="header1" height="120" runat="server" style="width: 110px"/>
<img id="Img3" src="~/Images/ar2.jpg" alt="header1" height="120" runat="server" style="width: 110px"/>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</a>
</div>
</asp:Content>
Use DateTime.Compare(Date1, Date2) in code behind.
it'll give you differnce between the datetimes. Is this what you looking for
Code produces an "error object expected" on:
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
What is wrong in this code?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="color: #009933; font-weight: 700">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<p style="color: #336600; font-weight: 700">
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
</p>
</form>
<script type ="text/javascript" >
var doRedirect = function() { location.href='http://www.google.com' };
$("#<%=Button1.ClientId%>").click(function() {
$("#<%=Label1.ClientId%>").show();
window.setTimeout("$('#<%=Label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
</script>
</body>
</html>
You probably need to include a jQuery reference inside your <head>
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=609
IF you do have jQuery and that is not the problem, you will not be able to make a label appear using javascript if you have it hidden server side...
This will not be part of the page, so you cannot just make it visible:
<asp:Label ID="Label1" runat="server" Text="Label" Visible="False"></asp:Label>
You could hide it like this perhaps
<asp:Label ID="Label1" runat="server" Text="Label" style="display:none;"></asp:Label>
Does that help?
I am working on a form where I need to conditionally set the content inside the facebox modal. I have created a sample code below where on click of each link I need to open a facebox modal(which is getting opened). Now in this modal I am having a textbox. I want the textbox to be filled automatically with the value equals to the text of anchor which opened the modal i.e On clicking the first hyperlink the textbox should be filled with "Field1" and on clicking the second the textbox should have "Field2" value. Here is the sample code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
<form id="HtmlForm" runat="server">
Field1 <br />
Field2 <br />
<div id="info" style="display: none;">
<p>
Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Edit" />
</p>
</div>
</form>
<script type="text/javascript">
$(function () {
$('a[rel*=facebox]').facebox();
});
</script>
</body>
</html>
The one approach with which I am going right now is creating a fake anchor and then triggering its click event to open the modal
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
<form id="aspnetForm" runat="server">
<a id="afake" href="#info" style="display:none;"></a>
Field1 <br />
Field2 <br />
<div id="info" style="display: none;">
<p>
Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Edit" />
</p>
</div>
</form>
<script type="text/javascript">
$(function () {
$('a[rel*=facebox]').click(function () {
$('#afake').facebox().trigger('click');
var instance = $(this);
$('#<%= TextBox1.ClientID %>').val(instance.html());
});
});
</script>
</body>
</html>
Looking for more robust solution than mine.
I'm not familiat with ASP.NET enough to know whether the ID '#TextBox1' I reference below is appropriate, but this should help get you started at least. It's simply setting the value of the input element to the text contained in the anchor tag when the anchor tag is clicked.
<script type="text/javascript">
jQuery(function($) {
$('a[rel*=facebox]').facebox().click(function(event) {
$('#TextBox1').val($(this).text());
});
});
</script>