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>
Related
I have this page in cshtml.
This page execute submit in "formImpressao" (ASP.NET PAGE)
CSHTML page
#using Web.Mvc.Helpers
#{
string msgSucesso = "test";
}
<div id="divSucess">
<h5 style="background-image: url('themes/base/images/48/ico_ok.gif'); text-align:center; background-repeat: no-repeat; font-family: Verdana; color: #1d7100; font-size:'72'">#msgSucesso</h5>
</div>
<div id="HiddenFormTarget" style="display:none;">
<form id="formImpressao" method="post" target="frmPrint" action="/VisualizarRelatorios/ImprimirRelatorio.aspx"></form>
</div>
<iframe id="frmPrint" name="frmPrint" width="0" height="0" runat="server">
</iframe>
<script language="javascript" type="text/javascript">
$("#formImpressao").submit();
</script>
ASPX Page (ImprimirRelatorio.aspx)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ImprimirRelatorio.aspx.cs" Inherits="Views.Views.ImprimirRelatorios.ImprimirRelatorio" %>
<%# Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%--<!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></title>
<script src="../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body style="margin: 0px">
<form id="form1" runat="server" style=" width:100%; height:100%;" >
<div style=" width:100%; height:100%; overflow-y:hidden; overflow-x:hidden" >
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<rsweb:ReportViewer ID="rptRelatorio" runat="server" Width="100%"
Height="100%" ProcessingMode="Remote" >
</rsweb:ReportViewer>
</div>
</form>
</body>
</html>
<script language="javascript">
function Imprimir()
{
var viewer = $find("rptRelatorio");
var isLoading = viewer.get_isLoading();
var impresso = false;
if (!isLoading) {
$("input[type='image']:not(:disabled)[title*='Print']").click();
impresso = true;
}
if (!impresso) {
setTimeout(Imprimir, 1000);
}else {
$("#divSucess").style.backgroundColor = "red";
}
}
$(document).ready(function () {
setTimeout(Imprimir, 4000);
});
</script>
The Imprimir function on validates whether the report was printed within Reporting Services.
If printed, it needs to assign to div divSuccess, the attribute: style.backgroundColor = "red".
The problem is that the asp form does not see the divSuccess and the cshtml page does not display the asp form.
How can I call a js function inside the asp page to play the DOM of the page that has the "divSuccess"?
Are there other ways to do this?
The two pages do not talk.
You could send AJAX request to get content of ImprimirRelatorio.aspx page. In success handler you could parse response to get inner HTML of body tag of the ImprimirRelatorio.aspx page, set result to some container (without <iframe>) and call Imprimir function (see details in AJAX documentation). Note, the Imprimir function should be a part of success event handler of should be defined in the calling page.
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 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>
I have a page which is attached to a masterpage. In this page i have update panel and in it have i have a asp.net panel.
This panel has gridview which shows data from database. Currently I have fixed width and height of the panel. So if user screen resolution is bigger than that specified width and height, then it leaves blank spaces.
I want to avoid this. I have read that we can use javascript to get screen resolution of user screen. I tried this in a page which is not attached to any masterpage and called that javascript function in the body of that page and it worked fine. But i dont know how to do this in a page attached to a masterpage. The code that used is:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function getWidth(width)
{
document.getElementById('Panel1').style.width = width+'px';
}
</script>
</head>
<body onload="javascript:getWidth(screen.width)">
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Dotted" Height="50px" Width="125px" ScrollBars="Horizontal">
</asp:Panel>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
}
function EndRequestHandler(sender, args) {
getWidth(screen.width)
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function getWidth(width)
{
$get('<%=Panel1.ClientID%>').style.width = width+'px';
}
</script>