Open modal box isn't working - javascript

This code open a modal box. But my problem is when I tried to open it with a different id for my edit purposes the modal box isn't working. I want to add this code <input type="button" value="Edit Item" id="edit">open a modal box using another id. But why isn't working?
<input type="button" value="Add New Item" id="add_new">
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
</div>
<script>
$(document).ready(function(){
$("#add_new").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});
</script>

You have to add the #edit to the click event handler as well, as you can see in this jsFiddle.
<input type="button" value="Add New Item" id="add_new">
<input type="button" value="Edit Item" id="edit">
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
<div>
And your Javascript:
$(document).ready(function(){
$("#add_new, #edit").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});

First, your HTML is broken as you haven't added closing tags for any of the following:
first div, form, table, second div.
Second, your script should have a type="text/javascript" attribute.

Related

Change Button Text

I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/

Scroll to the top of a scrollable pop div atomaticaly using jquery

First thing first, I am having a popup div, which contains a form
Here's is my div
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<tr>
<td colspan="2" align="left"><div id="display_msg_0"></div></td>
</tr>
<tr>
<td width="40%" align="left">Name:</td>
<td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
</tr>
<tr>
<td align="left">Type:</td>
<td align="center">
<input type="radio" name="rule_type" value="0" style="display:none;" />
<input type="radio" name="rule_type" value="1" checked="checked" style="display:none;" />
<div class="btn-group equal_btn">
<button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
<button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
</div></td>
</tr>
<tr>
<td align="left">Rule Active:</td>
<td align="center">
<input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;" />
<input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
<div class="btn-group">
<button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
<button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
</div></td>
</tr>
<tr>
<td align="left">Campaign ID:</td>
<td align="left"><input class="input_field" name="camp_id" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRange">Filter IP Ranges:</td>
<td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
<td width="10%" align="center">To</td>
<td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" id="rUAs">Filter users agents that contains:</td>
<td align="left"><input class="input_field" name="user_agent" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRefs">Filter referers that contains:</td>
<td align="left"><input class="input_field" name="referer" type="text" /></td>
</tr>
<tr id="rUrl" style="display:none;">
<td align="left">Send Blocked Clicks to:</td>
<td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
</tr>
<tr>
<td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Apply <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
Now, here is the jquery ajax function given below.. It checks for the validation and displays the validation message in a message div...
function submitRule(frmId,rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type:'POST',
url:'ajax/rule_update_process.php',
data: data,
dataType:'json',
success:function(jData)
{
if(jData.status==1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href='settings_rules.php';
}
}
});
}
Since the popup is a scrollable div, i want to scroll(only within the popup div) to the top so that i can show the message div with the error message..
here'sw how i am getting the screens,.
I used this piece if code to scroll to the top of the popup div to show the error message div,
but this piece of code doesn't seem to work..
What am i doing wrong??
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
replace ur last line of code with this
parent_div.scrollTop(0,0);
I will suggest a very simple apprach:
$("#apply_button").click(function () {
var error_message = $("#your_error_message").css("display");
if (error_message != "none") {
$("#add_message_0").scrollTop(0);
};
});
Code speaks for itself.
BR
You can use css only brother. Example this is your form.
<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>
you can use the class .has-error to set a css codes. your css codes will only use if the error message is displayed.
div{ overflow-y: scroll; }
div .has-error{ height: 400px; }
height will defend your current section height with errors message.
Something like this on fiddle demo
if the message is not visible on button click, add this to your click function code
$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}

How to set dynamic input name which generated dynamically using jquery live()

I am new in JavaScript, I have a html table with two text fields and add button and now I write a little jquery script which generate two more text fields when click on add button all this work success but my problem is how to put different names and ids of these dynamically generated fields. My codes are below.
HTML Code
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
Jquery Code
$(document).ready(function() {
$('.addNew').live({
click: function(){
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
});
});
Please any help how to generate different names and ids of these fields.
I would use on() ( and off() ).
You set it to the parent container (in this case the table) and listen to the class 'addNew'.
Any time a new item with class="addNew" is added to the table, it will be active.
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table').on('click', '.addNew', function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
});
});
</script>
But notice: in your code you did this:
<input type="button" value="Add New" class="add" name="add" />
Of course this will not work; it has to be class="addNew"
First of all .live is depreciated since jq 1.7
Use .delegate
so..
$(document).ready(function() {
var idIndex=1;
$(document).delegate("click",".addNew",function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
idIndex++;
});
});
I have a suggestion that may work fine,
why not make the input field to be an array,
so when you submit it, it will be a group of input group together
or you can easily make the name id's to be base on tr index
like name_1 and id_1, name_2 and id_2

How to close the table on click in JavaScript?

I have a table which takes the user details. The code is as follows:
<table id="record" border=1>
<tr>
<td>Emp Name</td>
<td><input type="text" placeholder="Employee Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="Address"></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add">
<input type="button" value="Cancel">
</td>
</tr>
</table>
Now, when I click on the Cancel button, the table should close. How can I do this?
Just give the input button an id...
<input type="button" id="close" value="cancel">
Then add some Jquery...(assuming you are using jquery)
$(document).ready(function(){
$('#close').click(function(){$('#record').hide();});
});
DEMO HERE
Or theres the one liner...
<input type="button" value="cancel" onclick="$('#record').hide();">
DEMO 2
EDIT
And....Your request for just pure javascript...
<input type="button" id="close" value="Cancel" onclick=" document.getElementById('record').style.display = 'none';">
DEMO 3

Struts 1 Delete Confirmation using display tag in jsp

Im trying to show a delete confirmation box once the user clicks the delete button within the display:column. I have the dialog to show up but once the user confirms that he wants to delete the action is not getting called. The page just reloads without the row being deleted. Without the delete confirmation the row will be deleted successfully. Im doing something wrong with the confirmation. Any help would be appreciated, Thanks
What I have right now is:
jQuery:
$(".btnShowDeleteConfirmation").click(function (e)
{
ShowDialog(true);
e.preventDefault();
});
$("#btnClose, #btnNo").click(function (e)
{
HideDialog();
e.preventDefault();
});
$("#btnYes").click(function (e)
{
});
Javascript:
function deleteEntry(rowId)
{
document.getElementById('rowId').value=rowId;
document.forms['myForm'].action='/myAction/deleteAction.action?method=deleteRow';
document.forms['myForm'].submit;
}
display tag table:
<form action="" method="POST" id="mainForm" name="MyFormBean">
<display:table requestURIcontext="true" requestURI="/unavailability/loadUnavailability.action?method=loadForm" uid="myList" name="requestScope.unavailList" class="simple" pagesize="10" defaultsort="2" sort="list" cellspacing="0" excludedParams="*">
<display:column property="startDate" title="Start Date" width="18%" decorator="com.mhngs.util.DisplayTagDateWrapper" sortable="true" headerClass="sortable"/>
<display:column property="endDate" title="End Date" width="18%" decorator="com.mhngs.util.DisplayTagDateWrapper" sortable="true" headerClass="sortable" />
<display:column property="reason" title="Comments" width="30%" sortable="true" headerClass="sortable" />
<display:column media="html" width="10%" class="btnShowDeleteConfirmation">
Delete
</display:column>
</display:table>
<input type="hidden" name="rowId" id="rowId" />
</form>
HTML: This will be displayed once user clicks the delete button
<div id="overlay" class="delete_overlay"></div>
<div id="dialog_delete" class="delete_overlay">
<form method="post" action="">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Delete Row Confirmation</td>
<td class="web_dialog_title align_right">Close</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<label>You seleted a row to be deleted</label>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnYes" type="submit" value="Yes" onClick="javascript:deleteEntry('<c:out value="${myList.rowId}"/>')"/>
<input id="btnNo" type="button" value="No" />
</td>
</tr>
</table>
</form>
</div>
You haven't specified form name in html. Where have you mentioned "myForm" name in the form tag?
<form name="myForm" .. >

Categories