I have this javascript:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function ageProb() {
var DatePicker1 = $find("<%= RadDatePicker1.ClientID %>");
DatePicker1.get_dateInput()._textBoxElement.style.backgroundColor = "yellow";
DatePicker1.get_dateInput().focus();
}
</script>
When I run the code I get this error:"Impossible to modify the Controls collection because the control contains code blocks (like <% ... %>)"
If I move the Javascript into the Form section (I found this advice googling around) then the error does not occurs but I am under the impression that the function does not get the call:
ScriptManager.RegisterStartupScript(this, GetType(), "ageProb", "ageProb();", true);
I do I fix this problem?
Do this and it will work, but you should put it in the body:
<body>
<form id="form1" runat="server">
<asp:Panel runat="server">
<script type="text/javascript">
function ageProb() {
var DatePicker1 = $find("<%= RadDatePicker1.ClientID %>");
DatePicker1.get_dateInput()._textBoxElement.style.backgroundColor = "yellow";
DatePicker1.get_dateInput().focus();
}
</script>
</asp:Panel>
</form>
</body>
Related
I have a textbox in my asp.net that accepts different values, I wrote a script that every time I press F5 button,the values in textboxes be cleaned.When I run the code and press F5,the textboxes values exist. How can I solve this?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="wellDesigned0428._default" %>
<!DOCTYPE html>
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/StyleSheet1.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="body">
<div class="content ">
<asp:TextBox ID="txtCodePers" runat="server" CssClass="textbox" AutoPostBack="True" OnTextChanged="txtCodePers_TextChanged" MaxLength="4" ></asp:TextBox>
<asp:TextBox ID="txtName" runat="server" CssClass="textbox"></asp:TextBox>
</div>
</form>
<script type="text/javascript">
document.onkeydown = fkey;
document.onkeyup = fkey;
document.onkeypress = fkey;
function fkey(e) {
if (e.keyCode == 116) {
alert("f5 pressed");
document.getElementById("txtCodePers").value = "";
document.getElementById("txtName").value = "";
}
}
</script>
</body>
</html>
I think the issue is the id that you are using txtCodePers, it's the id from server side. Either set the clientid or check what is the id for the txtCodePers using vew source.
More than this, I would not recommend you to override the default behavior of f5 which is refresh. What if user users mouse? or uses the browser button for refresh.
The ClientID of your TextBox is not the same as given in the ID-property. So your javascript will not find the elements.
You can either use the ClientID in your script or in your simple case add the ClientIDMode-property to your textboxes:
ClientIDMode="Static"
This will result in the same ClientID as your ID and you don't have to change your javascript.
I am trying to populate my form in iframe. I need to input a value in textbox and select a value from dropdown menu.
webform1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="admin-lte/js/app.min.js"></script>
<script src="Scripts/jquery-2.1.3.min.js"></script>
</head>
<body>
<style type="text/css">
body {scrolling:no;
}
iframe {position:absolute;
z-index:1;
top:0px;
left:0px;
}
</style>
<form id="form1" runat="server">
<iframe id="frame1" src="WebForm4.aspx" width="100%" height="100%" frameborder="0">
</iframe>
<script>
function getElementWithinIframe() {
var iframe = document.getElementById('frame1');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
var quantity = innerDoc.getElementById("txtQuantity");
quantity.value = "5";
var submit = innerDoc.getElementById("btnQuantity");
submit.click();
}
</script>
</form>
</body>
</html>
webform4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProd" runat="server">
<asp:ListItem>Product1</asp:ListItem>
<asp:ListItem>Product2</asp:ListItem>
<asp:ListItem>Product3</asp:ListItem>
<asp:ListItem>Product4</asp:ListItem>
<asp:ListItem>Product5</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
this doesn't work. What am I missing.?
I've gone through multiple articles but I think I'm not getting it.
Javascript - Get element from within an iFrame
How to pick element inside iframe using document.getElementById
Any help is appreciated.
--
Thanks
In the javascript in the parent you use btnQuantity, while the button in WebForm4.aspx has the ID btnSubmit. So change the script to:
var submit = innerDoc.getElementById("btnSubmit");
Then call the function somewhere, either on a button click or on page load.
<input type="button" onclick="getElementWithinIframe()" value="ClickMe">
<script>
$(document).ready(function () {
setTimeout(function () { getElementWithinIframe(); }, 250);
});
</script>
I am trying to do a JavaScript in my WebSite that when i click a button a popup appears, but the Aspx reload the webpage everytime I click a button, the javaScript before the refresh works, but the page is reloaded and the page come back as it was without the popup. Is there any way to make the page do not refresh when I press a HTML button without affecting my aspx button functions?
Here is the HTML/ASPX:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/jqueryui.js"></script>
<script type="text/javascript" src="../Scripts/myjqTest.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div id="header">
<li><asp:LinkButton ID="loginoptionsButton" CssClass="loginoptionsButton"
runat="server" CausesValidation="False" ClientIDMode="Static"
OnClick="loginoptionsButton_Click">LOGIN</asp:LinkButton></li>
<li><asp:LinkButton ID="signuplogoutButton" CssClass="signuplogoutButton"
runat="server" CausesValidation="False" ClientIDMode="Static"
OnClick="signuplogoutButton_Click">CADASTRAR-SE</asp:LinkButton></li>
</div>
<div id="content">
<button id="TestJS" class="">Test</button>
<div id="Popup" class=""></div>
</div>
</form>
</body>
</html>
Here is the JS:
var test = document.getElementById("Popup");
test.addEventListener("click", function () {
if (test.className === "Hide") {
test.className = "";
} else {
test.className = "Hide";
}
});
Try this:
test.addEventListener("click", function (event) {
if (test.className === "Hide") {
test.className = "";
} else {
test.className = "Hide";
}
event.preventDefault();
});
I have two ASP pages. One head.master which has some contents as well as contents which are retrieved from the Default.aspx page. Because I can get script URL from the head.master page, I have it setup there along with the HTML/JQuery contents like this:
<!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 id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
... //other contents here
<asp:ContentPlaceHolder id="ContentPlaceHolderSearch" runat="server">
<!-- Search stuff goes here -->
</asp:ContentPlaceHolder>
... //other contents here
</form>
</body>
</html>
In my Default.aspx page I have the contents like this:
<%# Page Language="VB" MasterPageFile="head.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" title="WESTMED Medical Group - Top Doctors in New York" %>
<%# Register Assembly="Ektron.Cms.Controls" Namespace="Ektron.Cms.Controls" TagPrefix="CMS" %>
<%# OutputCache Duration="900" VaryByParam="none" %>
<asp:Content ID="topContent" ContentPlaceHolderID="topContent" Runat="Server">
... //other stuff goes here
</asp:Content>
<asp:Content ID="ContentPlaceHolderSearch" ContentPlaceHolderID="ContentPlaceHolderSearch" Runat="Server">
<input style="background: url(images/find.png) no-repeat; padding-left: 20px;" type="text" id="TextBox1" />
<input id="Button1" type="button" value="Search" class="locButton" />
<script type = "text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var textbox = document.getElementById("TextBox1").value;
if (textbox.length > 0) {
//alert("Search query is not empty and redirecting...");
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
alert("Search query is empty");
}
});
$('#TextBox1').keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^a-zA-Z0-9]/g, ''));
});
$('#TextBox1').keypress(function (e) {
var textbox = document.getElementById("TextBox1").value;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
if (textbox.length > 0) {
e.preventDefault();
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
e.preventDefault();
alert("Search query is empty");
}
}
});
});
</script>
</asp:Content>
Looking at the output HTML source of the page I see the following:
<!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 id="ctl00_Head1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<form method="post" action="/" id="aspnetForm">
... //other contents goes here
<input style="background: url(images/find.png) no-repeat; padding-left: 20px;" type="text" id="TextBox1" />
<input id="Button1" type="button" value="Search" class="locButton" />
<script type = "text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var textbox = document.getElementById("TextBox1").value;
if (textbox.length > 0) {
//alert("Search query is not empty and redirecting...");
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
alert("Search query is empty");
}
});
$('#TextBox1').keyup(function () {
var $th = $(this);
$th.val($th.val().replace(/[^a-zA-Z0-9]/g, ''));
});
$('#TextBox1').keypress(function (e) {
var textbox = document.getElementById("TextBox1").value;
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
if (textbox.length > 0) {
e.preventDefault();
window.location.href = "http://mymed.com/search_results.aspx?searchtext=" + textbox + "&folderid=0&searchfor=all&orderby=title&orderdirection=ascending";
}
else {
e.preventDefault();
alert("Search query is empty");
}
}
});
});
</script>
... //other contents goes here
</form>
</body>
</html>
But when I press the button nothing happens. I press the enter key nothing happens. I can enter special characters and it doesn't do the validation. I looked at other ASPX questions and I am thinking the script does not load before the contents. Please help me resolve this issue.
Console screenshot:
Answer for everyone else's benefit:
As you have found, in our chat, your CMS is already using jQuery under another alias.
The link you found was:
https://stackoverflow.com/questions/13438464/joomla-2-5-jquery-cannot-call-method-of-null
But if another jQuery is already in your CMS you will want to use that version instead.
Never assume anything when dealing with someone else's code. Use something like Fiddler2 to view what your browser is pulling down.
I'm using markdown and I've got some input such as **test** which makes the word test appear in bold test and I've converted it with html like so"
var converter1 = Markdown.getSanitizingConverter();
var editor1 = new Markdown.Editor(converter1);
editor1.run();
var d = document.getElementById("wmd_input");
var html = converter1.makeHtml(d.value);
alert(html);
And this alerts <b>test</b> the issue is I need to take this value, namely <b>test</b> and access this via server side code (asp.net). I tried assigning it to a variable like so:
document.getElementById("Label1").value = html;
But it doesn't seem to work, when I go to the code behind it shows Label1 as being empty.
Is this possible?
Edit
I tried to change it to a hidden field same issue:
<script type="text/javascript">
(function () {
var converter1 = Markdown.getSanitizingConverter();
var editor1 = new Markdown.Editor(converter1);
editor1.run();
var d = document.getElementById("wmd_input");
var html = converter1.makeHtml(d.value);
alert(html);
document.getElementById('<%= h1.ClientID %>').value = html;
var h = document.getElementById('<%= h1.ClientID %>');
alert(h.value);
})();
</script>
The issue I have is I have an asp.net server side button that when clicked I try to do this:
Label1.Text = h1.Value;
That is to store the value from the hidden field to a label but this doesnt work. When I put a break point in it shows h1 is empty ""....So I'm not sure what event or how to do this so that when I make changes to my textarea wmd_input that i should be able to see these changes in my server side code...
Here's my entire asp.net form:
<html>
<head>
<title>PageDown Demo Page</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/Markdown.Converter.js"></script>
<script type="text/javascript" src="js/Markdown.Sanitizer.js"></script>
<script type="text/javascript" src="js/Markdown.Editor.js"></script>
</head>
<body>
<form id="myForm" runat="server">
<div class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea cols="5" rows="5" id="wmd_input" class="wmd-input" runat="server"></textarea>
<div id="wmd_preview" class="wmd-panel wmd-preview" runat="server"></div>
</div>
<asp:button id="Button1" runat="server" Text="Set" onclick="Button1_Click"></asp:button>
<asp:button id="Button2" runat="server" Text="Get" onclick="Button2_Click"></asp:button><asp:label id="Label1" runat="server">Label</asp:label>
<asp:HiddenField ID="h1" runat="server" EnableViewState="true" />
<script type="text/javascript">
(function () {
var converter1 = Markdown.getSanitizingConverter();
var editor1 = new Markdown.Editor(converter1);
editor1.run();
var d = document.getElementById("wmd_input");
var html = converter1.makeHtml(d.value);
alert(html);
document.getElementById('<%= h1.ClientID %>').value = html;
alert(document.getElementById('<%= h1.ClientID %>').value);
})();
</script>
</form>
</body>
</html>
The asp:Label tag isn't an input control, so it won't get posted back to the server. I'd suggest using asp:HiddenField or asp:TextBox instead. (And Adil's point is crucial too, you need to make sure the client ID is actually what you think it is.)
Here's a test that works for me. On the first page load, the label shows "initial value", but the alert shows "updated". After postback, the label also shows "updated".
Edit Added the client-side update logic inside a client-side event handler.
<%# Page Title="Test" Language="C#" AutoEventWireup="true" %>
<script runat="server">
void Page_Load()
{
l1.Text = h1.Value;
}
</script>
<html>
<body>
<form runat="server">
<asp:HiddenField runat="server" Value="initial value" ID="h1" />
<asp:Label runat="server" ID="l1" />
<asp:Button runat="server" Text="do postback" />
</form>
<script>
document.getElementById('<%= Button1.ClientID %>').onclick = function () {
document.getElementById('<%= h1.ClientID %>').value = 'updated';
alert(document.getElementById('<%= h1.ClientID %>').value);
};
</script>
</body>
</html>
Labels don't post. You will have to use an input or textarea element (<asp:TextBox>). If you don't want the user to see the markup source, you can also use an <asp:HiddenField>.
you should be able to do what you want to do by using knockoutjs http://knockoutjs.com/examples/helloWorld.html You can use element binding.