I'm using an Asp.net/C# environment and Visual Studio 2013 to create a web application.
I have a page (aspx) with only a single iframe in it, and a javascript method that uses jquery to put html into that frame.
<asp:Content runat="server" ID="MainSectionContent" ContentPlaceHolderID="MainSectionContentPlaceHolder">
<section runat="server" id="FrameSection" clientidmode="Static">
<asp:ContentPlaceHolder runat="server" ID="FrameSectionContentPlaceHolder" />
<iframe id="FrameContentFrame" name="FrameContentFrame" src="about:blank" seamless="seamless" onload=" loadFrameContent(); "></iframe>
</section>
<script type="text/javascript">
//<![CDATA[
function loadFrameContent() {
jQuery('#FrameContentFrame').contents().find('html').html('<%= FrameContent %>'); //FrameContent is a c# property which holds a syntactically correct html string
}
//]]>
</script>
</asp:Content>
In my code behind I fetch a long string from a server and store it in the property FrameContent. This long strings is syntactically correct html.
The result should be:
onload, the javascript method runs. The iframe is populated with html and thus the html string is shown to the user.
but what really happens:
nothing is shown. a Javascript error occurs saying "the function loadFrameContent is undefined". But its clearly there if I view the page source in my web browser. If I right click on the blank page where the frame should be, and choose "reload frame" (Google Chrome), the frame does show the Html.
So: the Html string is correct. the frame is correct. the frame can display the html correctly. However, the frame cannot display the Html onload, it needs an additional manual reload to actually show anything! I checked the page source on my browser and the Javascript function IS present, and the FrameContent property is populated with the correct html string.
As I see it, it looks like a timing issue. A blank iframe will be finished loading before your parent page, so it will call loadFrameContent before the parent page has finished parsing its dom (thus the method won't be registered). Get rid of the iframe onload and add this:
<script type="text/javascript">
//<![CDATA[
function loadFrameContent() {
jQuery('#FrameContentFrame').contents().find('html').html('<%= FrameContent %>'); //FrameContent is a c# property which holds a syntactically correct html string
}
$(loadFrameContent);
// Or if you're using an older version of jQuery
//$(document).ready(loadFrameContent);
//]]>
</script>
Related
i have this function on my aspx page:
<script type="text/javascript">
function pageLoad() {
//code here
}
</script>
and i need to override this function dymanically from my .cs
i have tried to use Page.ClientScript.RegisterClientScriptBlock and Page.ClientScript.RegisterStartupScript but that only creates a new javascript function.
Any ideas?
Try creating an empty div on your ASPX page with runat="server", and then setting the InnerHtml to the JavaScript code. This offers a lot of flexibility and will allow you to apply whatever logic you need depending on your situation.
.aspx
<div id="script" runat="server">
</div>
.cs
script.InnerHtml = "<script type='text/javascript'>//your javascript here</script>";
I'm having a difficult time getting around AutoPostBack with ASP.NET components, and was hoping someone can help. I've looked through multiple queries but nothing is really helping.
I have a 'Submit' button on my page that when clicked should do 2 things:
1. Run a server-side C# function that updates a bunch of <asp:Labels in a div tag.
2. Run a javascript animation that moves stuff around and makes the <div tag visible.
My functions work just fine by themselves, however my issue is with autopostback. If I use an <asp:Button the postback refreshes and the javascript animation is undone along with it. If I use an <input type="button" tag I am unable to run both the C# and Javascript functions. I've tried the following:
<input type="button" runat="server" onclick="c#function" onclientclick="javascriptFunction(); return false;"
** runat="server" seems to just enable postback on that button
<asp:Button
** C# function uses Page.ClientScript.RegisterStartupScript to invoke javascript function, but postback defeats the animation.
I'm hoping to keep the javascript animations as they make the interface very clean and intuitive, so any help in keeping it is greatly appreciated. Any suggestions?
You may use ajax. You can pass values to the server page thru ajax and let the server page handles (insert a record in table / send an email to someone / whatever....) it for you and return a result to you. Till you get your result. you can show a "Processing..." Message to the user.
Here is a plugin to have the block effect.
http://jquery.malsup.com/block/
The below is a small example of how to do it in ajax (with jquery)
HTML
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<head>
<body>
<input type="button" id="btnGetProd" value="Get Products" />
<div id="divProducts"></div>
<script type="text/javascript">
$("#btnGetProd").click(function(){
$("#divProducts").html("Processing your request....</div>").fadeIn(100, function ()
{
$.ajax({
url: "myajaxserverpage.aspx?mode=getprodcusts&category=3",
success: function (data) {
$("#divProducts").html(data).fadeIn(100);
},
error: function (req, textStatus, error) {
alert("Some error occured");
}
})
});
});
</script>
</body>
</html>
and you should have a page called myajaxserverpage.aspx which returns the content (ex: A list of products) for the div called "divProducts"
What the above code does is , When the user click on the button, it shows the text "Processing your request..." in the div and then make an ajax call to the aspx page.Once it receives the response, it put that to the div and then do a fadeIn effect.
what you are experiencing is expected. the browser will execute the javascript and then send a request to the server. the server processes the request and send a response. the client will then render the response. At this point any UI changes you made are discarded because a new request was received.
To get around this you will need to incorporate ajax into your page.
alternative way to reach your needs
1.let button do only javascript function
2.let javascript function do the postback after u finish your animation
ajax is not requirement
I'm trying to call a javascript alert from a master page, where i got an update panel. Within that a button and a text box.
I need to call the alert on clicking the button in my master page. So far it seems not working. Please help.
Page.ClientScript.RegisterStartupScript
(this.GetType(), "alert", "invokeMeMaster();", true);
This is what i wrote in my button click. invokerMEMaster include just an alert message.I need to reload the page on the ok button click of the alert. How can i do that as well?
Update Panel clears javascript code when Postback so try to put this code on the header.
<script type="text/javascript">
$(document).ready(
function(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {//put your code here}
});
</script>
You need a ScriptManagerProxy, with the ScriptManager residing in your content page
If I may guess your problem (psychic debugging): When the update panel updates the javascript is not rendered of fired on your page.
Try to register your javascript like in the update panel:
ScriptManager.RegisterClientScriptBlock(Page,typeof(string),"JavaScriptCall",script.ToString(), false);
If I understand your question correctly you have a JS function in a content page that needs to be called from the master page?
What I would do is add a hidden input control and an alert function to your master page:
<input runat="server" id="hdnAlert" name="Alert" type="hidden" />
<script type="text/javascript" language="javascript">
function AlertMe(){ alert(document.getElementByID("hdnAlert").value); }
</script>
You could then change the value of the input control from a content page:
HtmlInputHidden hdnTemp = new HtmlInputHidden();
hdnTemp = (HtmlInputHidden)Master.FindControl("hdnAlert");
hdnTemp.Value = "Message To Alert";
Then just have the button in your master page call the "AlertMe" function located in the master page.
I have a webpage with one <asp:updatePanel>. In the end of the webpage, some javascript method is added and called such as :-
The updatePanel code used is as follows:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Some controls like repeater etc..
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
alert('hi');
MethodCall();
</script>
After some ajax postback action happened on the page, when i see the webpage html using the "View Source". The script tag code area gets disappeared from the webpage html. And this causes the problem at the place where js method is called.
I don't understand why this is happening? Why it is removing the JS code block after the ajax postback action.
Pls suggest some workaround or any solution to my problem.
Thx
You can also add the following js function, that is called by the ASP.Net AJAX client script library.
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
get_isPartialLoad is true when a partial postback has occurred.
}
}
I have the following code in my aspx page in which Javascript is disbaled will appear only if javascript is disabled from browser
<div id="jsDiv" runat="server">
<noscript>
Javascript is disbaled
</noscript>
</div>
in C# code if i get the innerText or innerHtml of jsDiv at any time it will get the same result of div content either javascript is enabled or even disabled ... my question is : How can I detect the current innerText of the div that appear to user in the browser from C# code ?
index.html
<html>
<head>
<!-- Redirect in 10 seconds -->
<meta http-equiv="refresh" content="10;url=http://localhost/Default.aspx" />
<script>
<!-- Redirect to same page, with querystring js = true -->
window.location="http://localhost/Default.aspx?js=true";
</script>
</body>
Redirecting to new page <noscript>that does not need javascript</noscript>
</body>
</html>
In your Default asp.net page, you can check Request.QueryString["js"] for javascript support or not.
To detect if Javascript is enabled or not, you'll just have to get JS to alter some request in some way to indicate that it is present.
For example, you could rewrite the href of some links, or fill in a form input value, or (probably the best option) send an AJAX request back to the server. The server should then store that this particular session is JS enabled and take the necessary actions for future requests.
You can't use a Server Control to detect if the browser will have Javascript turned on or not for the current page. Reason: you're trying to predict the future since the page has not yet been sent to the client!
Use the techniques of nick's answer to detect JS, then store the answer in the user's session.
Added: See http://www.codeproject.com/KB/user-controls/CheckJavascriptEnabled.aspx