I have the following code on page load that I use to show an error alert:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request.QueryString["message"] == "noemployees")
AlertDanger.Visible = true;
This is where the error is called. The page reloads and the error is shown.
if (payFitments == null)
{
Response.Redirect("Default?message=noemployees");
}
I have the following markup
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function () {
$(".alert").fadeTo(1500, 0).slideUp(500, function () {
$(this).remove();
});
}, 3000);
});
-------------------------
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
×
<strong>You must have at least one employee to process</strong>
</div>
How do I show this message without having to load the default page again? Not seeing examples on the web that show this clearly.
You're using JQuery remove, which effectively deletes the alert from your DOM. So showing it again without reloading your page is not possible.
But you could use JQuery detach instead. Then you can insert it again with appendTo.
var alert = null;
function showHideAlert() {
if (alert) {
alert.appendTo("body");
alert = null;
} else {
alert = $(".alert").detach();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<button onclick="showHideAlert();">Show/Hide alert</button>
<div class="alert">ALERT!!!</div>
</body>
Try serving a static html file and then using the alert function in Javascript. You can learn that here. Example for a button press:
<html>
<head>
<script>
function onError() {
try {
...
} catch (...) {
var error
error = "button was pressed"
alert(error)
}
}
</script>
</head>
<body>
<button id="myButton" onClick="onError()">do not click</button>
</body>
</html>
<html>
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" /><%-- Also Check Compatible View --%>
<%-- Put all your jQuery... Here I'm showing an example--%>
<script src="//ajax.microsoft.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.setTimeout(function() {
$(".alert").fadeTo(1500, 0).slideUp(500, function() {
$(this).remove();
});
}, 3000);
});
</script>
<form id="form1" runat="server">
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
× <strong>You must have at
least one employee to process</strong>
</div>
</form>
</body>
</html>
Note:- I think you have missed this... put your jQuery code inside your body tag...
Related
Asp.Net 4.5 (WebForm)
How can I invoke a js function in Iframe from code behind successfully?
I am using RegisterClientScriptBlock to fire JS function in aspx page that in turn invokes the JS function in html page of iframe.
The Client Button in main page works fine.
The Server Button does not work as intended. However it does recognize the iframe object and contentWindow.
Error
TypeError: Object doesn't support property or method 'TestFunc'
Any constructive help would be appreciated. Note: this is a stripped down example for clarity.
MainPage.aspx
<head runat="server">
<title></title>
<script type="text/javascript">
function InvokeJS(param) {
var iframe = document.getElementById("MyIFrame");
try {
iframe.contentWindow.TestFunc(param);
//=============================================================
//Would really like to use the .apply method over calling the
//function directly. This does work in pure HTML, but not aspx
//=============================================================
//var _ARGS = [];
//_ARGS.push(param);
//iframe.contentWindow('TestFunc').apply(null, _ARGS);
} catch (e) {
alert(e);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="ServerButton" runat="server" Text="Server" />
<input id="ClientButton" type="button" value="Client" onclick="InvokeJS('From Client');" />
<br />
<br />
<iframe id="MyIFrame" runat="server" src="Pages/Test.html" style="width: 700px; height: 300px;"></iframe>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
MainPage.aspx (CodeBehind)
Protected Sub ServerButton_Click(sender As Object, e As EventArgs) Handles ServerButton.Click
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, "InvokeJS", "InvokeJS('From Server');", True)
End Sub
Test.html (loads into iframe)
<head>
<title>Test</title>
<script type="text/javascript">
function TestFunc(param) {
document.getElementById("DisplayParam").innerHTML = param;
}
</script>
</head>
<body>
<h1>HTML Page</h1>
<h2 id="DisplayParam"></h2>
</body>
</html>
window.onload = TestFunc(); doesn't work because Test.html actually didn't fully loaded before the onload event raised, it's same with ServerButton, because the scriptblock was registered before the test.html loaded. that's why no TestFunc is not available to call.
You can try
<asp:Button ID="ServerButton" runat="server" Text="Server" OnClientClick="InvokeJS('From Server');" />
I don't think you like it if you want it to do something before run the script
Then play this trick
<script type="text/javascript">
//this is help check if postback by Server Button, if yes then invoke
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
if (args._postBackElement.id == '<%=ServerButton.ClientID%>')
$('#MyIFrame').load(function(){
InvokeJS('From Client');
console.log('load the iframe');
});
}
</script>
When i click on button to show the message i get one MessageBox that's normal but when i call the Jquery Dialog for the SCOND time i get two MessageBoxs! and when i call Jquery Dialog for the third time i get three MessageBoxs! Please help me!
Here is my Code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("[id*=Call_Dialog]").click(function() {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#ShowMessage").click(function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
})
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MyDiv" style="display: none">
<asp:Button ID="ShowMessage" runat="server" Text="Button" />
</div>
</form>
<p>
<input id="Call_Dialog" type="button" value="button" /></p>
</body>
</html>
Thanks, but how can i call the dialog with button click?
Dialog should be initialized only once not every time you click on something and regenerate
solution is put dialog initialization outside of click and you're done
$(document).ready(function () {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("[id*=Call_Dialog]").click(function() {
$("#ShowMessage").click(function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
})
})
});
to open jquery dialog : use this overload :
$("#MyDiv").dialog('open');
Here is the javascript code.
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if(filmName == "parker")
window.location.assign("http://www.google.com");
else
alert("hello");
}
</script>
If I enter any other string I get an "hello" alert and If I enter "parker" the page "http://www.google.com" wont get loaded. Why is this happening?
EDIT:
Ok as someone mentioned I did remove "http://www.google.com" and added "http://stackoverflow.com" but it did not resolve my problem. And I cant even load local html pages that are in the same directory
if(filmName == "parker")
window.location.assign("index.html"); // also "./index.html" or ./index/html
Even this is not working. What's wrong
I also have jquery libraries: that is Jquery UI and Jquery
This question needs more of info I think. Here are the final edits
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Other style and js libraries, including Jquery Ui and regular jquery -->
<script>
$(document).ready(function() {
$(".youtube").fancybox();
}); // end ready
</script>
<script>
$(document).ready(function(e) {
$('.tooltip').hide();
$('.trigger').mouseover(function() {
/* Rest of it, which is not necessary here */
</script>
<script type="text/javascript">
function myfunc()
{
var filmName = document.getElementById("mysearch-text").value;
alert(filmName); // for debugging
if(filmName == "parker")
window.location.assign("index.html");
else
alert("hello");
}
</script>
</head>
<body>
<div id='mysearch-box'>
<form id='mysearch-form'>
<input id='mysearch-text' placeholder='' type='text'/><!-- Input here guys -->
<button class = "none" id='mysearch-button' onclick = "myfunc()">Search</button>
<!-- press this button after entering "parker" -->
</form>
</div>
<!-- Rest of the HTML page -->
</body>
</html>
I assume you are using a form onsubmit event to call myfunc, if so you have to prevent the default behavior by return false; (for example)
HTML:
<form id="form">
<input type="text" id="mysearch-text">
<input type="submit" value="Submit">
</form>
JS:
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
var filmName = document.getElementById("mysearch-text").value;
alert(filmName);
if (filmName == "parker") window.location.href = "http://www.w3fools.com";
else alert("hello");
return false; //prevent the default behavior of the submit event
}
}
</script>
I have tested the following solution and it works perfectly:
setTimeout(function(){document.location.href = "page.html;"},500);
I'm working on asp.net and want to execute following javascript code.
I'm using VS2010.
<title></title>
<script type="text/javascript">
function myClosure() {
var canyousee = "here I'm ";
return (function theClosure() {
return { canyouseeIt: canyousee ? "yes" : "no" };
});
}
var closure = myClosure();
closure().canyouseeIt;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="myClosure();" />
</div>
How do i execute function myClosure() on button click so that It gives me confirm i.e popup for yes or no ?
Which code I need to put for confirm ?
How can I execute it on Button Click ?
thanks
I hope this can be of some help.
I must confess that what you want to achieve is not clear to me.
<title></title>
<script type="text/javascript">
myClosure=function() {
var canyousee = "here I'm ";
return (function () {
return { canyouseeIt: function(){return confirm (canyousee)}};
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="(myClosure())().canyouseeIt()" />
</div>
<html>
<head>
<script type="text/javascript">
function myClosure(){
var r=confirm("Press a button!")
if (r==true)
{
alert("You pressed OK!")
return true;
}
else
{
alert("You pressed Cancel!");
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="myClosure();" />
</div>
</body>
</html>
use
onclientclick="javascript:return YourFunction();"
<script>
function YourFunction() {
//Do your stuff
return true;
}
</script>
If you return true your asp.new onclick event will be called..
If you return false it wont be called..
as you call it, but prevent the post back by return false on
OnClientClick="myClosure();return false;"
I do not know nether understand the rest of your logic, but this is your issue right now.
I have an HTML link that opens a jQuery modal dialog which contains an iFrame. This iFrame contains a form that should close dialog after postback (Ok or Cancel).
In my postback I add a Javascript function to iFrame that closes the dialog and it works fine. However problem is, after user presses Ok or Cancel button, dialog closes and opens again! What am I doing wrong?
Here is my code:
Calling HTML page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/south-street.css" media="screen" id="themeCSS" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#dlgConfirm").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 550,
height: 300,
close: function (event, ui) { alert('closed') }
})
});
function fConfirm(tId) {
alert('ddd');
$('#dlgConfirm').children().attr('src', 'ConfirmTracking.aspx?tId=' + tId)
.load(function () {
$("#dlgConfirm").dialog('open');
});
return false;
}
</script>
</head>
<body>
<div style="display: none">
<div id="dlgConfirm" title="Confirm Tracking" style="padding: 0px">
<iframe style="margin: 0px; padding: 0px" marginheight="0" marginwidth="0" src="" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
Click me
</body>
</html>
iFrame Page
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmTracking.aspx.cs" Inherits="Chicken.ConfirmTracking" %>
<html>
<head runat="server">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
function CloseThis() {
parent.$('#dlgConfirm').dialog('close');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<asp:TextBox ID="edtTrackingNo" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnCancel" runat="server" onclick="Cancel_Click" Text="Cancel" />
</form>
</body>
</html>
iFrame Codebehind:
using System;
namespace Chicken {
public partial class ConfirmTracking: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
protected void Cancel_Click(object sender, EventArgs e) {
ClientScript.RegisterClientScriptBlock(this.GetType(), "none", "<script>$(function(){CloseThis()});</script>");
}
}
}
I managed to trace your problem, the load in function fConfirm(tId) triggers again after closing your dialog. It seems to be a bug. A messy way to fix this is adding a global variable to your page and set it to true to show that dialog is opened via function then before opening your dialog if the variable is true open the dialog. don't foget to set your variable to false again so you can re-open dialog if it is needed.
your function will look like below:
var loadedByFunction = false;
function fConfirm(tId) {
loadedByFunction = true;
$('#dlgConfirm').children().attr('src', 'ConfirmTracking.aspx?tId=' + tId)
.load(function () {
if (loadedByFunction) {
loadedByFunction = false;
$("#dlgConfirm").dialog('open');
}
});
return false;
}