I am trying to change iframe's src attribute with jQuery. But this code isnt working. Even the alert doesnt show up.
JS:
<script src="../Scripts/jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript">
function loadIframe(url) {
var $iframe = $('#' + <%=iPage.ClientID%>);//Also tried $('#<%=iPage.ClientID%>')
if ( $iframe.length ) {
$iframe.attr('src',url);
return false;
}
return true;
}
</script>
ASPX:
<li>
<asp:LinkButton id="link1" runat="server" OnClientClick="loadIframe(
'www.asd1234.com')" Text="Test"></asp:LinkButton>
</li>
<asp:updatepanel...>
//.....
<iframe id="iPage" runat="server"></iframe>
</asp:updatepanel>
As you are using
<iframe id="iPage" runat="server"></iframe>
You need to use Control.ClientID
<asp:LinkButton
id="link1"
runat="server"
OnClientClick="loadIframe('<%= iPage.ClientID %>', 'www.google.com')"
Text="Test"></asp:LinkButton>
Also move function out of the document ready handler.
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 am currently having problem retaining the bootstrap tab after my fileupload postback.
The code is as follow
<script type="text/javascript">
$('#myTab a[href="#image"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#information"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#password"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#account"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
</script>
Can anyone enlighten me on how to retain this bootstrap after postback?
Well, I had this issue already and I solved it this way:
Include a new HiddenField on your page and set its value to the first tab that need to be shown:
<asp:HiddenField ID="hidTAB" runat="server" Value="image" />
On every click function you defined to alternate the tabs, set the HiddenField value to the actual tab clicked.
document.getElementById('<%=hidTAB.ClientID %>').value = "image";
On your jQuery document.ready function, use the HiddenField value to alternate to the last tab opened before the Postback.
$(document).ready( function(){
var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
$( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
});
Here's the Bootstrap Tab Documentation and here's the jQuery Ready documentation
With reference to the above ideas here is how I did it (full code included)
In your HTML Page, in the < Head > section put
<script type="text/javascript">
$(document).ready(function () {
var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
$('#myTabs a[href="' + tab + '"]').tab('show');
});
</script>
in the < body > section put a hiddenfield
<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />
and also in the < body > section have the Bootstrap 3.0 related code
<ul class="nav nav-tabs" id="myTabs">
<li>Home page</li>
<li>another page</li>
</ul>
Do not set any tab to active (this is set by the initial Value="#tab1" of the Hiddenfield).
Then add a button to the tab2 DIV
like so:
<div class="tab-pane" id="tab2">
<asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
<asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>
Lastly add your c# code behind to set the value of the hiddenfield
protected void FileUploadButton_Click(object sender, EventArgs e)
{
hidTAB.Value = "#tab2";
}
on posting back the JQuery will read the new value in the hiddenfield and show tab2 :)
Hope this helps someone.
Trev.
Please try this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
</a></li>
<li>Employment</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="personal">
This is Personal Information Tab
</div>
<div role="tabpanel" class="tab-pane" id="employment">
This is Employment Information Tab
</div>
</div>
</div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
After quite a long time trying out the bootstrap tab.. i decided to change to jquery tab.
In the first place, jquery tab also give the same problem i encounter in this situation..
but after much effort in looking for solution and trying out codes after codes.
i managed to find a solution
I'm really thankful to the person who provide this solution.
In this solution, it uses sessionStorage (to me, its a new stuff that i never heard of)
& the codes are
$(document).ready(function () {
var currentTabIndex = "0";
$tab = $("#tabs").tabs({
activate : function (e, ui) {
currentTabIndex = ui.newTab.index().toString();
sessionStorage.setItem('tab-index', currentTabIndex);
}
});
if (sessionStorage.getItem('tab-index') != null) {
currentTabIndex = sessionStorage.getItem('tab-index');
console.log(currentTabIndex);
$tab.tabs('option', 'active', currentTabIndex);
}
$('#btn-sub').on('click', function () {
sessionStorage.setItem("tab-index", currentTabIndex);
//window.location = "/Home/Index/";
});
});
In the above answer : the document ready function must be modified as below
$(document).ready(function () {
var selectedTab = $("#<%=hidTAB.ClientID%>");
var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
$('#myTab a[href="#' + tabId + '"]').tab('show');
$("#myTab a").click(function () {
selectedTab.val($(this).attr("href").substring(1));
});
});
<div>
<asp:Button ID="btnCalculate" runat="server" Text="Calculate Claim" OnClientClick="cfrm();"/>
</div>
<div style="visibility: hidden;">
<asp:Button ID="btnYes" runat="server" OnClick="btnYes_Clicked" />
</div>
<script language="javascript" type="text/javascript">
function cfrm() {
var fee = $('[id$=lblTotalProcedureFee]').text();
if (fee > 500) {
if (confirm('Are you sure to do this operation?')) {
$('#<%= this.btnYes.ClientID %>').click();
}
}
}
</script>
I am trying to call "btnYes_Clicked" from the query. Refer to above code. It doesn't work.. then i edited the code just to test. First click, it doesn't work. 2nd click, it goes to the btnYes_Clicked event. I'm using master page which has update panels. Please help. Thanks..
<script language="javascript" type="text/javascript">
function cfrm() {
$('#<%= this.btnYes.ClientID %>').click();
}
</script>
Maybe you can try something like this, using return in OnClientClick and in cfrm to prevent form unwanted form submitting :
<div>
<asp:Button ID="btnCalculate" runat="server" Text="Calculate Claim" OnClientClick="return(cfrm());"/>
</div>
<script language="javascript" type="text/javascript">
function cfrm() {
var fee = $('[id$=lblTotalProcedureFee]').text();
if (fee > 500) {
if (confirm('Are you sure to do this operation?')) {
$('#<%= this.btnYes.ClientID %>').click();
}
}
return false;
}
</script>
Hope this will help
I have the following test ASPX page:
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var dlg = $("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
__doPostBack('TreeNew', '');
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
dlg.parent().appendTo(jQuery('form:first'));
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="New"
OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Texte</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
I use dlg.parent().appendTo(jQuery('form:first')); on close function to retreive the values from RadioButtonList.
It works well but before the page do the PostBack the div "Dialog" moves below the New button. Why?
I think that this is caused because you are calling:
dlg.parent().appendTo(jQuery('form:first'));
at the close callback. This will move the dialog. Why don't you call this immediately after creating the dialog?
try chaning
$(function() {
to
$(document).ready(function() {
also check where it fails with some sort of javascript debugger opera got builtin and FireFox got FireBug..