So what I have is a form and part of this form will be used to create a jquery dialog. From that dialog is a button, created from asp server control, that I will click. The server control has a function in the code behind that will be called when clicked. The problem I have is that the function in the code behind is not being called. Is there something fundamental that I am missing? Here is what the aspx page look like, stripped down to the bare minimum
<head>
<script>
function PreviewForm() {
$("#emailPreview").attr("style", "");
$("#emailPreview").dialog({
title: "Preview",
width: "890px",
modal: true
});
}
</script>
</head>
<body>
<form id="EmailSend" method="post" runat="server">
<table>
<tr>
<td style="text-align:right">
<input type="button" onclick="PreviewForm();" value="Preview" />
</td>
</tr>
</table>
<div id="emailPreview" align="center" style="display:none">
<fieldset>
<table>
<tr class="Row">
<td class="required">Subject:</td>
<td><asp:Label ID="lblSubj" Runat="server" /></td>
</tr>
<tr>
<td class="field" colspan="2" style="text-align:center">
<input id="btnBack" class="button" type="button" onclick="closeDialog(false);" value="Close" />
<asp:Button ID="Send" class="button" Runat="server" Text="Send"/>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
and the function in the code behind
Private Sub CmdSendClick(ByVal sender As System.Object, ByVal e As EventArgs) Handles Send.Click
lblSubj.Text.Trim(), pBody)
End Sub
When I try debugging the code not thing happens, the break point was not being hit. If I were to make the button visible and click from outside the dialog box that I created then it would work fine.
EDIT
I also tried it where I hide the button outside of the dialog and then click the button once the dialog is closed. so the closeDialog function will look like this with a new input button
function closeDialog(send) {
console.log(send);
if (send) {
$("#emailPreview").dialog("close");
GetFormControl('<%=Send.ClientID%>').click();
console.log(send + " TRUE");
} else {
$("#emailPreview").dialog("close");
console.log(send + " false");
}
}
<div id="emailPreview" align="center" style="display:none">
<fieldset>
<table>
<tr class="Row">
<td class="required">Subject:</td>
<td><asp:Label ID="lblSubj" Runat="server" /></td>
</tr>
<tr>
<td class="field" colspan="2" style="text-align:center">
<input id="btnBack" class="button" type="button" onclick="closeDialog(false);" value="Close" />
<input type="button" onclick="closeDialog(true);" value="Send Email" />
</td>
</tr>
</table>
</fieldset>
</div>
<asp:Button ID="Send" class="button" Runat="server" Text="Send"/>
</form>
I actually get the error
SCRIPT5007: Unable to get property 'click' of undefined or null reference
EDIT 2
As requested, also I do know about using eval, the no no of it, but I am maintaining some else's code here. So let's pretend it is ok
function GetFormControl(fControlName) {
var oControl = eval('document.EmailSend.' + fControlName);
if (oControl == null)
oControl = GetPageElement(fControlName);
return oControl;
}
The problem is that the jQuery UI Dialog function is appending the HTML for the dialog box outside of the form element. See the following question for the solution: jQuery UI Dialog with ASP.NET button postback
Answer: Change
$("#emailPreview").dialog({
title: "Preview",
width: "890px",
modal: true
});
to
var diag = $("#emailPreview").dialog({
title: "Preview",
width: "890px",
modal: true
});
diag.parent().appendTo(jQuery("form:first"));
Related
I am trying to get the text in a div to show when the textbox beside the div is focused on. I am not seeing that text
Below is the jquery script
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function () {
$('#newroleHelpDiv').load('help.html');
});
//when textbox loses focus
txtbox.blur(function () {
$('#newroleHelpDiv').html('');
});
});
</script>
Below is the ASP code
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td> <input type="text" id="newrole" /> </td>
<td> <div id="newroleHelpDiv" runat="server"></div></td>
</tr>
</table>
</fieldset>
</asp:Content>
Below is the help.html file where the help text is coming from
<div id="newroleHelpDiv">
You may add an employee to this role
</div>
id should be unique so if you have id="newroleHelpDiv" main html, you should use another id for your help.html
not sure if you could load the html file, but if loaded it only once, then you can show and hide like this:
$(document).ready(function() {
$('#newroleHelpDiv').load('help.html');
$('#newroleHelpDiv').hide();
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function() {
$('#newroleHelpDiv').show();
});
//when textbox loses focus
txtbox.blur(function() {
$('#newroleHelpDiv').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td>
<input type="text" id="newrole" /> </td>
<td>
<div id="newroleHelpDiv" runat="server">You may add an employee to this role</div>
</td>
</tr>
</table>
</fieldset>
I am using echo nest API and can't find the problem with my button, why doesn't trigger my function at all! I check my button in chrome debug and shows no activity.
If I enter it trigger the function, but when I click on the button it doesn't trigger my function ?!!!
I need another pair of eyes to check my codes , pleaseeee :)
Thank you!
//Search artists.
function search(){
inputField = document.getElementById("inputField");
callApiSearch ( urlRoot + inputField , parseData);
}
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
window.addEventListener( "load", start, false );
</script>
</head>
<body>
<form id="searchForm" action="#">
<center>
<table>
<thead style="align-text:center" ><img src="images/Logo.png" style="align:center"><br/></thead>
<tr>
<td>Search Artist:</td>
<td> <input id="inputField" type="search"> </td>
<td> <input id="searchButton" type="button" value="Search"></td>
</tr>
</table>
<div id="results"></div>
</center>
</form>
</body>
</html>
in chrome --- > F12 --- > Network
should display all the activities; however mine is empty ... please correct me if I'm wrong?
try this one
html
<form action="#" id="searchForm" name="searchForm">
<img src="images/Logo.png" style="align:center" /><br />
<table>
<tr>
<td>Search Artist:</td>
<td><input id="inputField" type="search" /></td>
<td><input id="searchButton" type="button" value=
"Search" /></td>
</tr>
</table>
<div id="results"></div><br />
</form>
javascript
$("#searchButton").click(function() {
inputField = document.getElementById("inputField");
callApiSearch(urlRoot + inputField, parseData);
});
Put your 'script' block at the end of your html code. Browsers parses html document in top-down fashion and when your following method parsed by your browser
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
, it doesnt know what 'searchButton' is, since 'searchButton' hasn't been parsed yet. Thus it is unable to add event listener to your button and it doesn't work on click
Want to disable the checkbox "animation" once the "3D" radio button is selected. and too un-disable once the "2D" is selected.
html code
<script type="text/x-handlebars" id="createProject">
<div class="projectForm">
<table cellpadding="10">
<tr>
<td> Project Name </td>
<td> <input type="text" name="projectName" /> </td>
</tr>
<tr>
<td> Project Description </td>
<td> <textarea name="projectDesc" > </textarea> </td>
</tr>
<tr>
<td> Pipleline Type </td>
<td>
<input type="radio" name="pipelineType" value="2d" id="2d" checked="checked" onclick="displayType"> 2D Pipleline <br>
<input type="radio" name="pipelineType" value="3d" id="3d" onclick="displayType"> 3D Pipleline </td>
</tr>
<tr>
<td> Project Roles </td>
<td> <input type="checkbox" name="projectRoles" id="animation"value="Animation Clean Up"> Animation Clean Up
<input type="checkbox" name="projectRoles" value="Background Painting"> Background Painting
<input type="checkbox" name="projectRoles" value="Casting & Recording"> Casting & Recording
<input type="checkbox" name="projectRoles" value="Color Styling"> Color Styling
</td>
</tr>
</table>
</div>
</script>
Im new at ember.js, I have the java code in the app.js. Would it be better if it was placed in another js file?
javascrirpt
function displayType() {
if(document.getElementById('2d').checked) {
document.getElementById('animation').disabled = false;
}
else {
document.getElementById('animation').disabled=true;
}
}
Any suggestion would be really helpful. Thanks.
The first thing I noticed is that you have forgotten to make your onclick calls into function calls:
onclick="displayType"
Needs to change to
onclick="displayType()"
Next, when I put your code into a jsfiddle, it was not finding the function because it was not in the global scope. When I changed the function definition from:
function displayType() {
to:
window.displayType = function () {
it solved the problem. This may be different depending on where you put your code.
Try the following to disable it:
document.getElementById('animation').removeAttribute('disabled');
try this solution,
remove <script type="text/x-handlebars" id="createProject"> and its closing tag.
Change your code from onclick="displayType" to onclick="displayType()" in first two radio buttons.
Shorthand, pass a variable to determine which radio button is clicked
function displayType(def) {
var checked = def === '3d';
document.getElementById('animation').disabled = checked;
}
HTML, pass a variable to the javascript function indicating whether its 3d or 2d thats clicked
<input type="radio" name="pipelineType" value="2d" id="2d" checked="checked" onclick="displayType('2d')"> 2D Pipleline <br>
<input type="radio" name="pipelineType" value="3d" id="3d" onclick="displayType('3d')"> 3D Pipleline </td>
I want to hide my form when I click on the submit button. My code is as follows:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "hidden";
}
</script>
<form method="post" id="test">
<table width="60%" border="0" cellspacing="2" cellpadding="2">
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold"
align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006">
<td>
<input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>"
/>
</td>
<td>
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="javascript:hide();" />
</td>
</tr>
</table>
</form>
But when I click on the "Find" button, that particular form is not being hidden.
It should be either
document.getElementById("test").style.display = "none";
or
document.getElementById("test").style.visibility = "hidden";
Second option will display some blank space where the form was initially present , where as the first option doesn't
Set CSS display property to none.
document.getElementById("test").style.display = "none";
Also, you do not need javascript: for the onclick attribute.
<input type="image" src="../images/btnFind.png" id="find" name="find"
onclick="hide();" />
Finally, make sure you do not have multiple elements with the same ID.
If your form goes nowhere, Phil suggested that you should prevent submission of the form. Simply return false in the onsubmit handler.
<form method="post" id="test" onsubmit="return false;">
If you want the form to post, but hide the div on subsequent page load, you will have to use server-side code to hide the element:
<script type="text/javascript">
function hide() {
document.getElementById("test").style.display = "none";
}
window.onload = function() {
// if form was submitted, PHP will print the below,
// which runs function hide() on page load
<?= ($_POST['ampid'] != '') ? 'hide();' : '' ?>
}
</script>
Using jQuery:
$('#test').hide();
Using Javascript:
document.getElementById("test").style.display="none";
Threw an error "Cannot set property 'display' of undefined"
So, fix for this would be:
document.getElementById("test").style="display:none";
where your html code will look like this:
<div style="display:inline-block" id="test"></div>
Replace hidden with none. See MDN reference.
There are two ways of doing this.
Most of the answers have correctly pointed out that style.display has no value called "hidden". It should be none.
If you want to use "hidden" the syntax should be as follows.
object.style.visibility="hidden"
The difference between the two is the visibility="hidden" property will only hide the contents of you element but retain it position on the page. Whereas the display ="none" will hide your complete element and the rest of the elements on the page will fill that void created by it.
Check this illustration
its a block element, and you need to use none
document.getElementById("test").style.display="none"
hidden is used for visibility
Maybe you can add a class like 'hide'.
Follow the example here : https://developer.mozilla.org/fr/docs/Web/API/Element/classList.
document.getElementById("test").classList.add("anotherclass");
you need to use display = none
value hidden is connected with attributet called visibility
so your code should look like this
<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>
you can use something like this....div container
<script type="text/javascript">
function hide(){
document.getElementById("test").innerHTML.style.display="none";
}
</script>
<div id="test">
<form method="post" >
<table width="60%" border="0" cellspacing="2" cellpadding="2" >
<tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center">
<td>Ample Id</td>
<td>Find</td>
</tr>
<tr align="center" bgcolor="#E8F8FF" style="color:#006" >
<td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td>
<td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td>
</tr>
</table>
</form>
</div>
Through JavaScript
document.getElementById("test").style.display="none";
Through Jquery
$('#test').hide();
this should be it try it.
document.getElementById("test").style.display="none";
i have three buttons in my view page says "Button1", "Button2" & "Button3" and i have three TextBoxes corresponds to each button says "TextBox1","TextBox2" & "TextBox3" . When clicking on any one button i m able to open one pop up window. Now i want to pass some values to the parent view from POP up view and pass that value to the TextBox associate with the button which is being clicked. How can i do this?
Edit
<input type="button" value="Buuton1" id="Button1" style="width:100px;font-family:Verdana; font-size:9px; onclick="window.open( '<%= Url.Action( "Popup", "Home" ) %>');" />
<input type="button" value="Button2" id="Button2" style="width:100px;font-family:Verdana; font-size:9px;" onclick="window.open( '<%= Url.Action( "Popup", "Home" ) %>');" />
<input type="button" value="Button3" id="Button3" style="width:100px;font-family:Verdana; font-size:9px;" onclick="window.open( '<%= Url.Action( "Popup", "Home" ) %>');" />
Give an id to the textboxes (for example textBox1), then try this..it's a simple JavaScript.
You don't need jQuery for this.
window.opener.document["nameForm"].getElementById("textBox1 ").value = "your some values will go here"
We can do this by using jquery OR Javascript. here we are going to discuss with email id updates.
in bellow example a pop up window will open with auto fill email id from parent window.
after update, a email will automatically update in parent window text box and pop up window will have closed autocratically.
Example:
1) Create file index.html as a parent windows
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<title></title>
<head></head>
<body>
<table>
<tr>
<td colspan=”2″>Example for update email id.</td>
</tr>
<tr>
<td>Email Id:</td>
<td>
<input type=’text’ name=”emailID” id=”emailId” value=”demo#demo.com”></td>
</tr>
<tr>
<td>
<input type=”button” name=”update” value=”Update”
onClick=’window.open(“update_popup.html”, “”, “width=400, height=300″)’>
</td>
</tr>
</table>
</body>
</html>
2) Create file update_popup.html as a pop up window where email id auto fill from parent window for update.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<title></title>
<head></head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script>
$(document).ready(function(){
//== pre fill parent window email id in popup window for update
var emailId = window.opener.document.getElementById(“emailId”).value;
$(“#emailId”).val(emailId);
//=== update updated email id in to parent window
$(“#Save”).on(‘click’,function(){
var updated_emailId = $(“#emailId”).val();
window.opener.document.getElementById(“emailId”).value = updated_emailId;
window.close();
});
});
</script>
<body>
<table>
<tr>
<td>Email Id:</td>
<td>
<input type=’text’ name=”emailID” id=”emailId” value=””></td>
</tr>
<tr>
<td><input type=”button” name=”Save” id=”Save” value=”Save”></td>
</tr>
</table>
</body>
</html>
for more click on.
http://www.delhincrjob.com/blog/how-to-get-the-parent-window-element-value-in-popup-window-using-jquery/