Page 1 of 1
<div> visibility after "submit"
Posted: Sat Oct 18, 2008 11:54 am
by alexandruc
Hello,
I have the following js function and code (I am not the creator of the function):
Code: Select all
<script type="text/javascript">
function tab(id){
document.getElementById('tab_Tab #1').className = 'tab_inactive';
document.getElementById('tabcontent_Tab #1').style.display = 'none';
document.getElementById('tab_Tab #2').className = 'tab_inactive';
document.getElementById('tabcontent_Tab #2').style.display = 'none';
document.getElementById('tab_'+id).className = 'tab_active';
document.getElementById('tabcontent_'+id).style.display = '';
}
</script>
<DIV CLASS='tab_active' ID='tab_Tab #1' onClick="tab('Tab #1');"><font face="verdana" size=2>1</font></DIV>
<DIV CLASS='tab_inactive' ID='tab_Tab #2' onClick="tab('Tab #2');"><font face="verdana" size=2>2</font></DIV>
<DIV STYLE='float: left; clear:both;'></DIV>
<DIV ID = 'tabcontent_Tab #1' CLASS='tab_content' STYLE='display: block;'>
<table>
<?
...cod..
?>
</table>
</DIV>
<DIV ID = 'tabcontent_Tab #2' CLASS='tab_content' STYLE='display: none;'>
<table>
<tr>
<form name="x" method=post><td><input name="x" type=submit value="OK"></td></form>
</tr>
</table>
</DIV>
The code above generates 2 tabs on a page, first's tab content being visible by default, the second tab's content becomes visible after onClick.
When I submit a form from the second tab, the page refresh and it moves back to the first tab.
How can it be done so that after refresh, it returns automatically on the second tab (or any other tab wished if there are more then 2 tabs)?
Code: Select all
if(isset($_POST['x']))
{
$some_stuff_here;
echo "action complete <meta http-equiv=\"refresh\" content=\"3\">";
// and here i need some (php) code that will return the page to the wanted tab...
// if I have several forms on a page, depending on the submit, the page must returs to the desired tab
}
Can anyone help?
Thanks,
Alex
Re: <div> visibility after "submit"
Posted: Sat Oct 18, 2008 2:02 pm
by califdon
Just swap the classes of the the two <div>s if you're responding to a form submission. Probably something like this:
Code: Select all
if(isset($_POST['x']))
{
<DIV CLASS='[color=#FF0040][b]tab_inactive[/b][/color]' ID='tab_Tab #1' onClick="tab('Tab #1');"><font face="verdana" size=2>1</font></DIV>
<DIV CLASS='[b]tab_active[/b]' ID='tab_Tab #2' onClick="tab('Tab #2');"><font face="verdana" size=2>2</font></DIV>
...
Re: <div> visibility after "submit"
Posted: Sat Oct 18, 2008 2:18 pm
by alexandruc
califdon wrote:Just swap the classes of the the two <div>s if you're responding to a form submission. Probably something like this:
Code: Select all
if(isset($_POST['x']))
{
<DIV CLASS='[color=#FF0040][b]tab_inactive[/b][/color]' ID='tab_Tab #1' onClick="tab('Tab #1');"><font face="verdana" size=2>1</font></DIV>
<DIV CLASS='[b]tab_active[/b]' ID='tab_Tab #2' onClick="tab('Tab #2');"><font face="verdana" size=2>2</font></DIV>
...
no.. it's not that simple
CLASS='tab_inactive' and CLASS='tab_active' are just the css clases for the table (how the tabs look on page). It has nothing to do with the visibility. The function is the one that changes the visibility of the tabs
(document.getElementById('tabcontent_'+id).style.display = '';).
Unfortunaltly I have no ideea how to make php click on the tab I want to be visible (after the form is submited)
Re: <div> visibility after "submit"
Posted: Sat Oct 18, 2008 2:30 pm
by califdon
alexandruc wrote:
no.. it's not that simple
yes.. it really is
at least, if I understand what you're doing, it is
CLASS='tab_inactive' and CLASS='tab_active' are just the css clases for the table (how the tabs look on page). It has nothing to do with the visibility. The function is the one that changes the visibility of the tabs
(document.getElementById('tabcontent_'+id).style.display = '';).
Unfortunaltly I have no ideea how to make php click on the tab I want to be visible (after the form is submited)
Take a look at what the javascript is doing. It is just setting the CSS style "display" to "none" for the tab that is hidden. You can do that just as well in your PHP. Of course, you haven't shown us your CSS styles for these two classes, so maybe I don't understand what you're doing, but that should be the whole point of having those 2 classes, one for active and one for inactive.
Re: <div> visibility after "submit"
Posted: Sun Oct 19, 2008 12:16 am
by alexandruc
sorry for not posting all the code.
here it's the css:
Code: Select all
.tab_active {
-moz-border-radius: 5px 5px 0px 0px;
border-color: #aaa;
border-width: 1px;
border-style: solid;
background-color: #0E4095;
color: #eae561;
float: left;
width: 150px;
cursor: default;
font-weight: bold;
padding: 2px;
font-size: 10pt;
text-align: center;
}
.tab_inactive {
-moz-border-radius: 5px 5px 0px 0px;
border-color: #aaa;
border-style: solid;
border-width: 1px;
background-color: #ddd;
color: #777;
float: left;
width: 150px;
cursor: default;
padding: 2px;
font-size: 10pt;
text-align: center;
}
.tab_content {
-moz-border-radius: 0px 10px 10px 10px;
width: 90%;
border-color: #aaa;
border-style: solid;
border-width: 1px;
color: #000;
float: left;
text-align: left;
padding: 10px;
}
as I said, in the css there is nothing related to visibility.
this is the only place it's mentioned:
Code: Select all
<DIV ID = 'tabcontent_Tab #2' CLASS='tab_content' STYLE='display: none;'>
(see my first post for the complete code)
I also think it's important to mention that all the code (the form, the js, and the php) it's on the same page.
When I tryed what you recomended in your first post, it just
doubled the tab header, without content.
(I really apreciate the help. Thank you)
Re: <div> visibility after "submit"
Posted: Sun Oct 19, 2008 5:42 am
by alexandruc
(sorry for double posting, but its quite a long post)
well i found a solution.. i don't know if it's the most elegant or the optimum solution...
all i had to do is generate a different code from every isset making the wanted tab visible as a different page.
I think it's not the best solution because the code in the page doubles with each form you want to submit (every isset has the whole page code in it to dispay the tab. not to mention if you have several forms in one tab with different issets)
something like:
Code: Select all
<?
if(isset($_POST['a']))
{
$some_code;
THE WHOLE PAGE CODE WITH THE WANTED TAB VISIBLE
}
if(isset($_POST['b']))
{
$some_code;
THE WHOLE PAGE CODE WITH THE WANTED TAB VISIBLE
}
....
// if no form is submitted.. display the page with the default tab visible (first tab)
if ((!isset($_POST['a']))&&(!isset($_POST['b']))&& ... (!isset($_POST['x'])))
{
THE WHOLE PAGE CODE WITH THE default TAB VISIBLE
}
originaly i wanted something like this:
Code: Select all
if(isset($_POST['a']))
{
$some_code;
a CODE line to make TAB VISIBLE in the body of the html code (something to simulate a click on the tab or to send the tab ID to the .js function)
}
if(isset($_POST['b']))
{
$some_code;
a CODE line to make TAB VISIBLE in the body of the html code
}
....
?>
<html>
<body>
html CODE containing all the WHOLE page (including the tab code)
</body>
</html>
but i guess it's not possible to alter the display of the page using an onLoad event in the isset makeing the html code change focus on the tab as desired. or is it?

Re: <div> visibility after "submit"
Posted: Sun Oct 19, 2008 1:16 pm
by califdon
CSS definitely does allow you to control visibility. The attribute is named display and can be set to over a dozen different values, one of which is "none", which makes the element invisible. You don't need to duplicate all those blocks of code. Set the display:none; attribute for all tab pages, in the style sheet, so all will be invisible, to start with. Then you can make the default one visible by setting just that one to display:block; (or whatever is appropriate) when you generate the page with php, depending on whatever your $_POST variables indicate. In your Javascript, you probably will need to change 2 attributes, "hiding" one tab and "exposing" the other.