How to position dynamic content so that other content doesn't move - javascript

I have tried to set the message after user clicked on the save button. Message should be 'Record has been saved successfully!' Next to the Save button or aligned to the right side of the table. Here is my HTML:
<tr>
<td align="center">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
<span id="msgSave"></span>
</td>
</tr>
Javascript:
document.getElementById("msgSave").innerHTML = "Record has been saved successfully!";
Current message will show but Save button will slide to the left. I don't want my button to move once message shows up. Is there any way to fix that? Should I set the standard width or something else is wrong in my HTML.

If you align your tr to the left, there will be no slide
<tr>
<td align="left">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
<span id="msgSave"></span>
</td>
</tr>
I don't know if your layout allows you to align left, but it's an solution

The problem is that your table cell will adjust when the content inside it changes! That's the nature of table cells using centered content.
Instead you could do something like:
<tr>
<td width="30%" align="center">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
</td>
<td width="30%"><span id="msgSave"></span></td>
</tr>
Note that I added widths to the cells - this should keep them the same layout whatever content is in them (more or less).
A better approach would be DIV's though as they don't resize/move like table cells will.

Or inside the same td element put the span enclosed by a p element like this :
<p><span id='msgSave'></span></p>
Since there is a default break for p elements.

Related

Dynamic text in input form through JavaScript

I have a html input form which uses a table with 3 columns for proper alignment of HTML controls. The input data is used to generate a MySQL query. In column 1 there is text which helps the user understand what the controls in column 2 mean. In column 2 there are dropdownlists or text input. In column 3 there is the submit button and a help button (not relevant).
<div class="input_frm">
<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">
<table class="input_tbl">
<tr>
<td class="a">Select province</td>
<td class="b"><select id="selProvincie" name="Alfa" onchange="ProvincieChg()"></select></td>
<td class="c"><input class="button_face" type="submit" value="Submit"></td>
</tr>
<tr>
<td class="a">Select region</td>
<td class="b"><select id="selRegiune" name="Beta" onchange="RegiuneChg()"></select></td>
<td class="c"></td>
</tr>
...
</table>
</form>
</div>
My question is: How can I change the text in column 1 (in lower rows) through JavaScript based on user input (in upper rows) ? Can I reference the cells of the table in the JavaScript DOM ? Or... ?
Here is the solution to my question: span tags and Javascript
You enclose the text in span tags
<td><span class="aa">This text can be changed in Javascript</span></td>
and then you can change it in JavaScript.

How to display a table inside a modal popup window which is part of a larger form

I have some code below that contains a form which contains a hiddenTable element that will show up once you click the search button. My question is: how would I display the table in a modal popup window while still having it be apart of the same form. The table contains a comment box and a submit button, I want the comment to be submitted along with all the other field's data inside the form.
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button"
value="Search"
onclick="document.getElementById('hiddenTable').style.display='block';">
<table id="hiddenTable" class="form_table" style="display:none;">
<tr>
<td class="form_field_name">Enter a comment</td>
</tr>
<tr>
<td class="form_field_entry">
<textarea required ="true"
name="textarea" rows="10"
cols="50"
placeholder="Please enter a description for the performed task."></textarea>
</td>
</tr>
<tr>
<td class="form_field_entry">
<cfinput type="submit" name="createPeriod" value="Submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Please excuse my messy code.
I agree with #Dan that it might be a pain for a ux standpoint to make this an extra modal, but if that's the result you want, you can surround your table in a div and add javascript to make the box "popup". Add CSS styles to create the black transparent background on click, and you will have a very simple modal popup.
I created a codepen for a reference - http://codepen.io/anon/pen/brEHI

unable to hide and show a particular table row with the same id names inside a div using jquery

I am creating a website and there are some pages containing the <div> tags as the wrapper of <table>. A <tr> of each table contains a <form> and another <tr> contains some <a> tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said html structure is created dynamically. Every <div> contains the same id and every <tr> also containing the <form> assigned the same id. Below is my example htmlfor the better explanation.
HTML
<div class='static_archive'> // First Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
<div class='static_archive'> // Second Wrapper
<table>
<tr>
<td>Some data</td>
<td>Some data</td>
<td>
<a id='show_hide_details' href='#'>Show/Hide Button</a>
</td>
</tr>
<tr id='form_container'>
<td colspan='3'>
<form>
<input type='text' name'first' />
<input type='text' name'second' />
<input type='text' name'third' />
</form>
</td>
</tr>
</table>
</div>
jQuery
$(document).ready(function(){
$("#form_container").hide();
$("#show_hide_details").click(function(){
$("#form_container").toggle();
});
});
As soon as the page loads, $("#form_container").hide(); hides all the <tr> containing the <form>. By clicking hide/show button with the toggle effect, hides and shows the every content with the same id.
I want to show only one form at a time when a particular button is hide/show button is pressed. How can i control such behavior?
With a new record fetched, a new DIV is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.
Here is the jsfiddle with my code structure jsfiddle
Every clicked hide/show should effects the respective form.
I have edited my post. Please have a look now.
You can use $(this) to do the toggle with particular block.
$(this).closest('tr').next("#form_container").toggle();
You should not use same id for multiple elements, assign class and use that
$(this).closest('tr').next(".form_container").toggle();
I think u want this or may this help u.
You can not have same id's for different controls.So u can have id's staring with same string
You can use ^ here:
$(document).ready(function(){
$("[id^='form_container']").hide();
$("#show_hide_details").click(function(){
$(this).parents().next("tr").toggle();
});
});
jsfiddle
I assume you want to show all of them hidden first. Obviously, you have to replace the id's with class.
$(document).ready(function(){
$(".form_container").hide();
$(".show_hide_details").click(function(){
$(this).parents("tr").next().toggle();
});
});

Tab through a table inside content editable div?

I am trying to figure out how to tab through HTML tables cells inside a contenteditable div. I know most people would say why are you doing that in the first place. I am working on a text editor that allows the user to insert a pre-formatted table where ever they want. I have tackled inserting the table dynamically at the users cursor but I cannot figure out how to let the user tab from the content to the html table and through each cell. I have tried input boxes which allows them to tab through but it leaves selector bars on each corner and still requires the user to double click on the cell to add content. I have also tried just table cells and it will not tab to the cells it just jumps over them. Any help would be much appreciated... after conquering the tracking of the cursor for inserting the table I thought I was home free... :(
<div id="divbilltext" runat="server" contenteditable="true" style="height:auto;">
<table>
<tr>
<td>
<input type="text" id="a" tabindex="1"/>
</td>
<td>
<input type="text" id="b" tabindex="2"/>
</td>
<td>
<input type="text" id="c" tabindex="3"/>
</td>
</tr>
</table>
</div>
tabindex would be the most consistent way of achieving this:
http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex
however tabindex is supported by specific elements only: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

To retain vertical scroll positon even after clicking save button in JS

function successfullySaved()
{
document.getElementById("successfullySaved").value.focus();
}
this function doesnt wrk..
should i try with using scrollBottom?
plz suggest me code so that the succesful msg(comes into pic only onclick of Save button in my case) which is getting displayed at the bottom of the page shd retain the scroll bar in same position even after clicking Button.
<td style="padding-left: 345px">
<button class="save" type="button" title="Save" id="Save" name="Save" onclick="javascript:validateSettings(),successfullySaved('successfullySaved');">
<spring:message code="button.save"/></button>
</td>
<table id="successfullySaved">
<c:if test="${saveSuccess eq true}">
<tr> <td>
<spring:message code="security.successful.save"/> </td>
</tr>
</c:if>
</table>
Use this style for table#successfullySaved
position:fixed;bottom:0;
There's no need to set the focus in this case, the message will always appear at the bottom of the viewport.
If you need to support MSIE<7 too, you have to build a workaround by setting the position to a value depending on document.body.scrollTop , because of MSIE doesnt support position:fixed in elder versions.

Categories

Resources