刷新后如何保持复选框处于选中状态,以便两个用户都能看到它

时间:2019-07-18 13:20:47

标签: javascript html perl

我不确定是否可行,但是即使刷新页面后也如何保持选中状态。如果用户1选中一个复选框并关闭Web浏览器,则用户2是否可以看到该复选框已选中?我正在尝试在当前的HTML页面上实现这一目标。我已经查看了本地存储,但似乎它只存储用户在本地执行的操作,只有该用户才能看到已完成的操作。预先谢谢你!

    print "             
<div id='wrapper'>
        <nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle' data-toggle='collapse' data-target=''.navbar-ex1-collapse'>
                    <span class='sr-only'>Toggle navigation</span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
                <a class='logo' href='#'>
                    <img src='images/ti-logo.png' alt='CoolAdmin' />
                </a>
                </div>
            <div class='collapse navbar-collapse navbar-ex1-collapse'>
                <ul id='active' class='nav navbar-nav side-nav'>

                    <li><a href='CriticalToolsMet.html'><i class='fa fa-globe'></i> METROLOGY</a></li>
                    <li><a href='CriticalToolsCMPIMP1.html'><i class='fa fa-globe'></i> CMP/IMP</a></li>
                    <li><a href='CriticalToolsDIFFWET.html'><i class='fa fa-globe'></i> DIFF/WET</a></li>
                    <li><a href='CriticalToolsPHOTO.html'><i class='fa fa-globe'></i> PHOTO</a></li>
                    <li><a href='CriticalToolsPLASMA.html'><i class='fa fa-globe'></i> PLASMA</a></li>
                    <li><a href='CriticalToolsTHINFILM.html'><i class='fa fa-globe'></i> THINFILM</a></li>
                </ul>
                <ul class='nav navbar-nav navbar-right navbar-user'>
                    <li class='divider-vertical'></li>
                    <li>
                        <form class='navbar-search'>
                            <input type='text' placeholder='Search' class='form-control'>
                        </form>
                    </li>
                </ul>
            </div>
        </nav>
        <div id='page-wrapper'>
            <div class='row'>
                <div class='col-lg-12'>
                    <h1>Critical Dashboard <small>PLASMA</small></h1>

                </div>
                </div>
            <div class='row'>
                <div class='col-lg-12'>
                    <div class='panel panel-primary'>
                        <div class='panel-heading'>
                            <h3 class='panel-title'><i class='fa fa-bar-chart-o'></i> Fab Dashboard - DMOS5 </h3>
                        </div>
                        <table class='table'>
                            <thead>

                            <tr>
                                    <th>ZUM_TOOL_GROUP</th>
                                    <th>MISTI</th>
                                    <th>STATE</th>
                                    <th>HRS</th>

                                </tr>
                            </thead>
                    </div>";

$sqlstr="Select 
CASE WHEN g.entity like 'ET328%' then 'CTVIA_YTR'                   
WHEN g.entity like 'ET328-A%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET328-B%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET329-A%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET329-B%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET330-A%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET330-B%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET331-A%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET331-B%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET332-A%' then 'VIA_ET_LIT'                 
WHEN g.entity like 'ET332-B%' then 'VIA_ET_LIT'                 
WHEN g.entity like 'ET333-A%' then 'VIA_ET_LIT'                 
WHEN g.entity like 'ET333-B%' then 'VIA_ET_LIT' 
WHEN g.entity like 'ET334%' then 'CTVIA_YTR'                    
WHEN g.entity like 'ET334-A%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET334-B%' then 'CTVIA_YTR'
WHEN g.entity like 'ET335%' then 'CTVIA_YTR'                    
WHEN g.entity like 'ET335-A%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET335-B%' then 'CTVIAETCHS'                 
WHEN g.entity like 'ET336-A%' then 'VIA_ET_LIT'                 
WHEN g.entity like 'ET336-B%' then 'VIA_ET_LIT'                 
WHEN g.entity like 'ET337-A%' then 'VIA_ET_LIT'                 
WHEN g.entity like 'ET337-B%' then 'VIA_ET_LIT' 
WHEN g.entity like 'ET338%' then 'CTVIA_YTR'                    
WHEN g.entity like 'ET338-A%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET338-B%' then 'CTVIA_YTR'  
WHEN g.entity like 'ET339%' then 'CTVIA_YTR'                    
WHEN g.entity like 'ET339-A%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET339-B%' then 'CTVIA_YTR'                  
WHEN g.entity like 'ET620%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET621%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET622%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET623%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET624%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET625%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET626%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET627%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET628%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET629%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET630%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET631%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ET632%' then 'MTL_ET_SOU'                   
WHEN g.entity like 'ETA32%' then 'MTL_ET_TOP'                   
WHEN g.entity like 'ETA33%' then 'MTL_ET_TOP'                   
WHEN g.entity like 'ETA34%' then 'MTL_ET_TOP'                   
WHEN g.entity like 'ETA41%' then 'SICR_ETCH'                    

         ELSE 'NONE'
       end as ZUM_TOOL_GROUP,
       g.entity as MISTI,
       t.cur_state      as STATE,
       ROUND(((SYSDATE-t.cur_state_dttm)*24),2) AS HRS

From Entity_Grp_Lst g
left outer join trk_id_def t
on g.facility = t.facility
and g.grp_type = t.grp_type
and g.entity=t.entity
and g.grp_type = '720'
WHERE t.cur_state NOT IN ('PROD','NM','TERM','NULL','IDLE', 'YER', 'I05', 'I07', 'TFKT', 'EMOD', 'DVLP', 'MFGM', 'PENG', 'EENG')
and Entity_Grp_type = '041'
and g.ENTITY_GRP in ('PLASMA')
and (g.entity like 'ET328%' or                  
g.entity like 'ET328-A%' or                     
g.entity like 'ET328-B%' or                     
g.entity like 'ET329-A%' or                     
g.entity like 'ET329-B%' or                     
g.entity like 'ET330-A%' or                     
g.entity like 'ET330-B%' or                     
g.entity like 'ET331-A%' or                     
g.entity like 'ET331-B%' or                     
g.entity like 'ET332-A%' or                     
g.entity like 'ET332-B%' or                     
g.entity like 'ET333-A%' or                     
g.entity like 'ET333-B%' or     
g.entity like 'ET334%' or                   
g.entity like 'ET334-A%' or                     
g.entity like 'ET334-B%' or 
g.entity like 'ET335%' or                   
g.entity like 'ET335-A%' or                     
g.entity like 'ET335-B%' or                     
g.entity like 'ET336-A%' or                     
g.entity like 'ET336-B%' or                     
g.entity like 'ET337-A%' or                     
g.entity like 'ET337-B%' or     
g.entity like 'ET338%' or                   
g.entity like 'ET338-A%' or                     
g.entity like 'ET338-B%' or     
g.entity like 'ET339%' or                   
g.entity like 'ET339-A%' or                     
g.entity like 'ET339-B%' or                     
g.entity like 'ET620%' or                   
g.entity like 'ET621%' or                   
g.entity like 'ET622%' or                   
g.entity like 'ET623%' or                   
g.entity like 'ET624%' or                   
g.entity like 'ET625%' or                   
g.entity like 'ET626%' or                   
g.entity like 'ET627%' or                   
g.entity like 'ET628%' or                   
g.entity like 'ET629%' or                   
g.entity like 'ET630%' or                   
g.entity like 'ET631%' or                   
g.entity like 'ET632%' or                   
g.entity like 'ETA32%' or                   
g.entity like 'ETA33%' or                   
g.entity like 'ETA34%' or                   
g.entity like 'ETA41%' )

AND ROUND(((SYSDATE-t.cur_state_dttm)*24),2) > 48  
order by ZUM_TOOL_GROUP ASC

";
$sth = $dbh->prepare($sqlstr);
$sth->execute();
$sth->bind_columns(undef, \$ZUM_TOOL_GROUP, \$MISTI, \$STATE, \$HRS);
while($sth->fetch()) {

   print "

                            <tbody>
                                <tr class='row100 body'>
                                    <td class='cell100 column1'> <input type='checkbox'/>$ZUM_TOOL_GROUP</td>
                                    <td class='cell100 column2'><FORM ACTION='http://d5lxgenwebapp01z.dal.make.xxx.com/get_de1_de2_misti_comments.pl' METHOD='POST' target='_blank' NAME='userInput2'>
        <INPUT TYPE='hidden' NAME='eq' MAXLENGTH='8' VALUE='$MISTI'>
              <INPUT TYPE='hidden' NAME='pages' SIZE='3' MAXLENGTH='2' VALUE='50'>
        <INPUT TYPE='submit' NAME='submit' VALUE='$MISTI'></form></td>
                                    <td class='cell100 column3 $STATE'>$STATE</td>
                                    <td class='cell100 column4'>$HRS</td>

                                </tr>

   </tr>";
}

print "</tbody>
                        </table>
                    </div>
                    <p >Email: <a href='mailto:r-medina@xx.com?subject=CRITICAL TOOLS DASHBOARD WEBPAGE'>R-
                                M</a></p>
                </div>

                </div>
            </div>
        </div>
    </div>";
$sth->finish();
$dbh->disconnect();

print "


</body></html>";

2 个答案:

答案 0 :(得分:1)

运行plackup

use strict;
use warnings;
use autodie qw(:all);
use Plack::Request qw();
use HTTP::Status qw(HTTP_OK HTTP_METHOD_NOT_ALLOWED);

my $file = 'global-checkbox-status';
my $app = sub {
    my ($env) = @_;
    my $req = Plack::Request->new($env);
    if ('GET' eq $req->method) {
        my $status = eval {
            open my $fh, '<', $file;
            !!$fh->getline
        } ? 'checked="checked"' : '';
        my $html = <<~"HTML";
        <html xmlns="http://www.w3.org/1999/xhtml">
            <body>
                <form method="POST">
                    <label for="global_checkbox">Checkbox with global status:</label>
                    <input type="checkbox" id="global_checkbox" name="global_checkbox" $status />
                    <input type="submit" />
                </form>
            </body>
        </html>
        HTML
        return $req->new_response(
            HTTP_OK, ['Content-Type' => 'application/xhtml+xml'], [$html]
        )->finalize;
    } elsif ('POST' eq $req->method) {
        {
            open my $fh, '>', $file;
            $fh->print(!!$req->parameters->get('global_checkbox'));
        }
        return $req->new_response(
            HTTP_OK, ['Content-Type' => 'text/plain'], ['done']
        )->finalize;
    } else {
        return $req->new_response(HTTP_METHOD_NOT_ALLOWED)->finalize;
    }
};

答案 1 :(得分:-1)

选中该复选框后,您必须发布其值并将该值存储在服务器上(文件或数据库中)。

-> HTML Checkbox automatically send POST

页面加载后,您必须读取存储并设置复选框值。