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();
});
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 have a master page Like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="../Styles/Style.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
</Scripts>
</asp:ScriptManager>
<div id="Page">
<div id="divMaster" style="width:200px; height:200px; border:1px solid red;"
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<script>
$("#divMaster").click(function () { alert("div in Master Page has been clicked);});
</script>
</form>
</body>
</html>
my content page:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="serve
<div id="divContent" style="width:200px; height:200px; border:1px solid red;" runat="server"></div>
<script>
$("#divContent").click(function () { alert("div in content page has been clicked);});
</script>
</asp:Content
in Master page showing and hiding div works but in content page not work.
My question?
why jquery (showing and hiding div )doesn't work in my content page?
You could hold your js code in a separte file, lets say script.js
In your master page:
<script src="path/to/script.js"></script>
In your js file (script.js):
$(document).on('event', '#element', function() {
// your code here ..
});
The on() function will identify any element with id element, even if this element is loaded dynamicaly after page load
EDIT
You just have to include (in your master page only), first the jquery file and then your script.js file
Your code in a separate file:
$(document).click(
function () {
$("#KadreNemayeshePayam").hide(1);
}
);
$(document).on('click', '#DivPayamha', function (e) {
e.stopPropagation();
var knp = $("#KadreNemayeshePayam");
if (knp.is(":hidden")) {
knp.show(1);
ListePayamhaRaBegir();
}
else {
knp.hide(500);
}
});
function ListePayamhaRaBegir()
{
var vizhegiha = {};
vizhegiha.url="/Modiriat/Modiriat.Master/GetMessages";
vizhegiha.type = "POST";
vizhegiha.data = null;
vizhegiha.contentType = "application/json/:charset:utf-8";
vizhegiha, datatype = "json";
vizhegiha.success = function (data) { $('lvPayam').bind(data); };
vizhegiha.error = function () { };
$.ajax(vizhegiha);
}
//=========================== ===============
$(document).on('click', '#KadreNemayeshePayam', function (e) { e.stopPropagation(); });
//=========================== ===============
$(document).on('click', '#NavarAbzar', function (e) { e.stopPropagation(); });
NOTE
In this line:
vizhegiha.success = function (data) { $('lvPayam').bind(data); };
lvPayam is not a valid html tag, so it should be $('#lvPayam') or $('.lvPayam')
In addition to previous answer i must say that your element's ID will in case this is a server control (runat="server" attribute is seted) be probably the dynamic. So you should use '#'+'<%=lvPayam.ClientID%>' as the Id.
Because of runat="server" it is not working.
Use
<div id="divContent" style="width:200px; height:200px; border:1px solid red;"></div>
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>
This is code for Firefox.
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Hidden1" type="hidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Popup" />
</div>
</form>
</body>
</html>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = "Hello";
Button1.Attributes.Add("onClick", "javascript:InvokePop('" + TextBox1.ClientID + "');");
}
PopupWin.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtValue" runat="server"></asp:TextBox><br />
<br />
<input type="button" id="btnReturnValue" value="Return value back" onclick="ReturnValue();" />
</div>
</form>
</body>
</html>
pop.js:
function InvokePop(fname)
{
val = document.getElementById(fname).value;
retVal = window.open("PopupWin.aspx?Control1=" + fname, 'Show Popup Window', 'height=90,width=250,resizable=yes,modal=yes');
retVal.focus();
}
function ReturnValue()
{
var newValue = document.getElementById("txtValue").value;
if ((window.opener != null) && (!window.opener.closed))
{
window.opener.document.getElementById("TextBox2").value = newValue;
}
window.close();
}
In this case I click button on Default.aspx page and open Popup.aspx as popup window. I enter some value to text box in Popup.aspx and press button. The new value appears in second text box on Default.aspx page.
That works, but how can I pass the new value entered in Popup.aspx page to some handler in Default.aspx page and use it further? For example, I can have another ASPX button on Default.aspx page and when I click it I can use the value entered in Popup.aspx page.
Well what you can do is the following:
Add a hiddenField on the first page. Im calling it "hfPopupValue".
In pop.js u are currently doing this:
window.opener.document.getElementById("TextBox2").value = newValue;
You can change this to:
window.opener.document.getElementById("hfPopupValue").value = newValue;
Afterwards you can just read the value from the hiddenField.
This should solve your problem.
Have you thought of using jQueryUI's Dialog, which lets you keep all controls on the same page, meaning cleaner code.
It also doesn't look as nasty as a JavaScript popup window.