i used the examples given in this link
here are my code for the .aspx page
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jqueryui.css"
rel="stylesheet" type="text/css" />
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery1.5/jquery .min.js"></script>
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/jscript">
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>
</asp:Content>
and the div for the progress bar is this one
<div style="margin-left: 10px; margin-right: 10px;" id="progressbar"> </div>
i tried to follow the instructions given on the source page but nothing worked. can you tell me what i am missing here? thanx in advance. (Fixed this part.i made a mistake at placing my contntentplaceholder)
EDIT: how can i change the value in a way so that it animates when i press a button.... the button's code in the page is as follows :
<asp:Button ID="btnConfirm" CssClass="button" SkinID="Common" runat="server"Text="Confirm"OnClick="btnConfirm_Click" />
Try this:
<script type="text/jscript">
jQuery(document).ready(function() {
jQuery("#progressbar").progressbar({ value: 37 });
});
</script>
$ is also used by asp.net for its own clientside javascript.
Consider us jQuery.noConflict()
You could encapsulate your jQuery code like this:
jQuery.noConflict();
(function($) {
$(function() {
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
// more code using $ as alias to jQuery
});
})(jQuery);
EDIT:
To update the value surround your content above and the button with an UpdatePanel.
Refer how to use UpdatePanels
Assign the Progress percentage to an asp literal.
jQuery.noConflict();
(function($) {
$(function() {
$(document).ready(function() {
$("#progressbar").progressbar({ value: <asp:Literal runat="server" ID="ProgressPercentage" /> });
// more code using $ as alias to jQuery
});
})(jQuery);
On button click
ProgressPercentage.Text = progress.ToString();
Related
I want to check whether the TextBox is disabled or not.
If we try to click on the disabled TextBox. It should show an alert message.
This is my code with source http://jsfiddle.net/Alfie/2kwKc/ but in my case not working.
On MasterPage.master :
<asp: ContentPlaceHolder ID="head" runat="server">
</asp: ContentPlaceHolder >
<script type="text/javascript">
$("#txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
On Markup Default.aspx webpage:
<asp:TextBox ID="txDateRet" runat="server"
ReadOnly="true" BackColor="Yellow"
Width="300" CssClass="toUpper"
Enabled="false"></asp:TextBox>
#Update #1
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txDateRet").click(function () {
if ($(this).attr("readonly") == "readonly") {
alert($(this).attr("readonly"));
}
});
});
</script>
<asp:TextBox ID="txDateRet"
ClientIDMode="Static"
runat="server"
ReadOnly="true"
BackColor="Yellow"
Width="300"
CssClass="toUpper"
Enabled="false">
</asp:TextBox>
#Update #2
$(document).ready(function () {
$("#txDateRet").click(function () {
alert($(this).attr("readonly"));
});
});
#Update #3
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<input name="ctl00$ContentPlaceHolder1$txDateRet"
type="text" value="26/02/2019"
readonly="readonly"
id="txDateRet"
class="toUpper"
style="background-color:Yellow;width:300px;" />
</div>
</div>
There are may three reasons:
1- Because that code rendered before loading JQuery library so put that script before triggering click event.
2- Because that element is and ASP.Net element in a place holder, it may will get different ID that you can see it by inspecting it.
totally change the code like:
<asp: ContentPlaceHolder ID="head" runat="server">
</asp: ContentPlaceHolder >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
});
</script>
<asp:TextBox ID="txDateRet" ClientIDMode = "static" runat="server"
ReadOnly="true" BackColor="Yellow"
Width="300" CssClass="toUpper"
Enabled="false"></asp:TextBox>
3- Or that readonly prop will not get true after rendering it may will get readonly="readonly" so if (this.readOnly) will not work, it may should changed to if (this.readOnly == "readonly").
hope this answer give you the clue.
I think in webform we give the complete id of textbox with content place holder.
You can try this.
$("#head_txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
Is there any way to select all text within a multiline asp:textbox and copy it to client clipboard by clicking a button, using c#?
Thank you in advance.
You can use document.execCommand("copy"); just be aware that this is supported by new browsers mostly and as far as I know there is no support for Safari:
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnCopy").click(function () {
var id = "#" + "<%= txtText.ClientID %>";
try {
$(id).select();
document.execCommand("copy");
}
catch (e) {
alert('Copy operation failed');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtText" runat="server" Text="Some sample text to copy"></asp:TextBox>
<button id="btnCopy">Copy</button>
</form>
</body>
Tested and works with the following browsers:
IE 11 and up
Google Chrome 51.0.2704.84
Firefox 43.0.1
I think #Denis Wessels answer was great but used plain textarea instead of asp:TextBox, therefore I want to write my own that includes asp:TextBox control.
Consider you have a multi-line text area with asp:TextBox server control and a button to copy content into clipboard:
<asp:TextBox ID="TextArea" runat="server" TextMode="MultiLine">
<button id="copy">Copy to Clipboard</button>
Use jQuery and a JS function similar to this:
<script type="text/javascript">
$(document).ready(function () {
$("#copy").click(function() {
// use ASP .NET ClientID if you don't sure
// for ASP .NET 4.0 and above, set your ClientID with static mode
var textarea = "<%= TextArea.ClientID %>";
$(textarea).select();
$(textarea).focus(); // set focus to this element first
copyToClipboard(document.getElementById(textarea));
});
});
function copyToClipboard(elem)
{
var result;
var target = elem;
startPoint = elem.selectionStart;
endPoint = elem.selectionEnd;
var currentFocus = document.activeElement;
target.setSelectionRange(0, target.value.length);
try
{
// this may won't work on Safari
result = document.execCommand("copy");
}
catch (e)
{
return alert("Copy to clipboard failed: " + e);
}
// returning original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
elem.setSelectionRange(startPoint, endPoint);
return result;
}
</script>
Reference with minor changes: https://stackoverflow.com/a/22581382, https://stackoverflow.com/a/30905277
Note that for ASP .NET 4 and above you can set static ClientID:
<asp:TextBox ID="TextArea" runat="server" TextMode="MultiLine" ClientID="TextArea" ClientIDMode="Static">
thus you can use $("#TextArea") directly rather than $("<%= TextArea.ClientID %>").
You can use this class:
System.Windows.Forms.Clipboard.SetText(..) <= Sets the text to clipboard,
Inside SetText(), you put textbox.Text to get the text from the multiline asp.net textbox.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<p id="p1">Hello, I'm TEXT 1</p>
<p id="p2">Hi, I'm the 2nd TEXT</p><br/>
<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
<br/><br/><input type="text" id="" placeholder="TEST it here;)" />
</center>
I want to display the search result in the Fancybox. The code works fine in the web form, but when i integrate with the master page, the fancy box is not opening. Please give me a solution!
I created two web forms, Default1.aspx and Default2.aspx
The code in the Default1.aspx is given below,
<head runat="server">
<title></title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script lang="javascript" type="text/javascript">
$(document).ready(function (){
$('#fancybox').fancybox({
autoDimensions: false,
height: 400,
width: 700,
type: "iframe"
});
});
</script>
<a id="fancybox" runat="server" style=" visibility: hidden "></a>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
**Default1.aspx.cs**
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TextBox1.Text = Request.QueryString["cargoNo"];
}
}
protected void Button1_Click(object sender, EventArgs e)
{
fancybox.Attributes["href"] = "~/Default2.aspx?cargoNo=" + TextBox1.Text.Trim();
Literal1.Text = "<script> $(document).ready(function() {$(\"#fancybox\").trigger('click');});</script>";
clear();
}
public void clear()
{
TextBox1.Text = "";
}
}
In the Default2.aspx I added a Sql Datasource and used Gridview to display it.
When you enter the number in the text box and click button1. the serach will initiate and display the result in the fancybox. The above code is working great.
When i added this to the Master page the Fancybox is not triggering. Twhen button is clicked, the page just refresh. All replies are appreciated. I am new to asp.net. Please help me to solve this problem.
First of all, make sure You don't call a Jquery source in your Master Page, because I see you are calling Jquery on your Default1.aspx, since Jquery should be load once. Second, if you don't want your button make a Postback, add this to your button: UseSubmitBehavior="False". Hope this help
I am trying to show a loading div on button click, but it is not working at the moment.
Javascript :
<script type="text/javascript">
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Div:
<div id="loading" class="Loading" runat="server" visible="false">
<div class="loadingImg">
<img src="../Images/loading.gif" alt="loading" />
</div>
</div>
button:
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
Also how can I call the same javascript code in the jsfiddle above within code (c#)?
You have to select jQuery version from left menu, jsFiddle does not support to interpret asp.net code and generate html as asp.net engine do.
Live Demo
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#loading').slideToggle("slow");
});
});
If you are trying to do same in asp.net and your BtnSend is server control which does not have ClientIDMode set to static then you will need to use ClientID to bind event.
$(document).ready(function (e) {
$('#<%= BtnSend %>').click(function () {
$('#<%= loading.ClientID %>').slideToggle("slow");
});
});
The ClientID value is set to the value of the ID property. If the
control is a naming container, the control is used as the top of the
hierarchy of naming containers for any controls that it contains, Reference.
I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<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/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />