Hard refresh removes the search cookie:
cookieId.bs.table.searchText
All other cookie values are maintained including filter values.
Using the refresh button keeps the cookie value. My main issue is the following:
Why does the value get removed with a hard refresh?
I just noticed that the live example has two search options, which I'm not understanding why is happening. The local environment shows only one search. Removing data-search="true" removes both searches.
Code below is available in this live example
Update:
I'm noticed that removing the jquery script only shows one search box instead of two, but the issue still persists with regards to caching. When there are two search boxes, the second box retains the cache. Again the two searches never occur in my local environment.
Update: Removing data filter control options fixes the cookie search issue. Seems like data-filter-control="true" might be the cause.
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<h1 id="title"></h1>
<div id="toolbar">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="xxx"><span class="glyphicon glyphicon-facetime-video"></span>
Other Dashboard </a> </li>
<li class="nav-item">
<a class="nav-link" href="xxxx"><span class="glyphicon glyphicon-tag"></span> X Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="xxx"><span class="glyphicon glyphicon-user"></span> Personal Dashboard</a>
</li>
</ul>
</div>
<table id="table"
data-cookie="true"
data-cookie-id-table="cookieId"
data-cookie-expire="2y"
data-toggle="table"
data-toolbar="#toolbar"
data-show-columns="true"
data-show-refresh="true"
data-show-button-text="true"
data-auto-refresh="true"
data-flat="true"
data-search="true"
data-filter-control="true"
data-sort-name="env"
data-sort-order="desc"
data-detail-view="true"
data-detail-view-by-click="true"
data-detail-view-icon="false"
data-detail-formatter="detailFormatter"
data-url="/data.json"
data-mobile-responsive="true"
data-show-search-clear-button="true"
data-show-button-icons="true"
data-buttons-class="primary">
<thead>
<tr>
<th data-field="env" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Environment</th>
<th data-field="job_id_href" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true" data-sorter="sortTable" >Job</th>
<th data-field="repo_id" data-sortable="true">Repo Id</th>
<th data-field="created_by" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Created By</th>
<th data-field="version_id" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Version</th>
<th data-field="state" data-cell-style="stateCellStyle" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">State</th>
<th data-field="duration" data-sortable="true">Duration</th>
<th data-field="telemetry_ui_href" data-sortable="false">Telemetry</th>
<th data-field="spark_ui_href" data-sortable="false">Spark</th>
<th data-field="logs_ui_href" data-sortable="false">Logs</th>
<th data-field="success_ratio" data-cell-style="cellStyle" data-sortable="true" data-sorter="sortSuccess">Success</th>
<th data-field="update_time_pst" data-cell-style="lastUpdateCellStyle" data-sortable="true">Last Update (PST)</th>
</tr>
</thead>
</table>
</div>
<div class="container">
<br>
<button onclick="darkModeToggle()">Toggle Dark Mode</button>
<a target="_blank" href='__health'>Health</a>
<a target="_blank" href='XXX>Hubble</a>
<a target="_blank" href='XXX'>GitHub</a>
</div>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/cookie/bootstrap-table-cookie.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/addrbar/bootstrap-table-addrbar.min.js"></script>
```
Related
I have a table and want to add a "View Details" button for each row which links to a further details page, I have easily added the button but am looking for a little help to be able to make it open to the specific message it's related too.
My Current View:
#extends ('layout')
#section('content')
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/filtering.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<div class="row align-items-center">
<div class="col">
<h1>
MESSAGES R US
</h1>
</div>
<div class="col ">
CREATE MESSAGE
</div>
<div class="col ">
VIEW DETAILS
</div>
</div>
<div class="form-group"> <!-- This works-->
<table id="userTable" data-page-length='5' cellspacing="0"
class="table table-bordered table-striped table-hover table-condensed"
role="grid">
<thead>
<tr>
<th scope="col">CREATED</th>
<th scope="col">USERNAME</th>
<th scope="col">TO/FROM</th>
<th scope="col">UPDATED</th>
<th scope="col">MESSAGE ID</th>
<th scope="col">STATUS</th>
<th scope="col">ACTION</th>
</tr>
</thead>
<tbody>
#foreach ($messages as $message)
<tr>
<td>{{$message->created_at}}</td>
<td>{{$message->username}}</td>
<td class="text-center">
#if ($message->direction == 'from')
<span class='badge badge-warning'>from</span>
#else
<span class='badge badge-success'>{{$message->direction}}</span>
#endif
</td>
<td>{{$message->updated_at}}</td>
<td>{{$message->message_id}}</td>
<td class="text-center">
#if ($message->status == 'FAIL')
<span class='badge badge-danger'>FAIL</span>
#elseif ($message->status == 'received')
<span class='badge badge-info'>received</span>
#elseif ($message->status == 'delivered')
<span class='badge badge-primary'>delivered</span>
#elseif ($message->status == 'queued')
<span class='badge badge-warning'>queued</span>
#elseif ($message->status == 'read')
<span class='badge badge-success'>read</span>
#endif
</td>
</td>
<td>
<div class="col ">VIEW</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div
#endsection
I have built this in Laravel, when VIEW is clicked it just displays the same table without being specific to the message's row, I don't know how to link it to further display the MESSAGE ID details. This is a leisure project so excuse the formatting and UI. I am new to laravel with previously using ASP.NET MVC. Any help is appreciated.
I understand the concept which I need to make it work. Use the message_ID as the key for the button, then utilize that tables data (MESSAGE_ID - MESSAGE_TEXT) I just need the help to connect the dots. :)
First you have to declaration the "details route" in your route. Your route maybe will looks like this
Route::get('/message/{id}/details', 'YourController#details')->name('message.detail');
and then in your views the button will be call this route. so your Button views will be looks like
VIEW
And hen last in your controller. you must have method that you declare before in route (in my example the method name is "details").
public function details(Request $request, $id){
// your detail code here
}
i have a multiple pages application that i build in Laravel, i want to use Vuejs in some parts of the application.i have six modules customers,invoice,products,stocks,dashboard,analysis.
The customers,products,stock are just basic crud so i use Laravel.
How to do i turn the invoice,analysis,dashboard in single page applications. i have tried but when i use chromes back arrow to redirect back, i get 404|page not found.
this is my invoice/index.blade.php file, it loads everything corrently
<div class="row">
<div class="col-md-12">
<invoice-index></invoice-index>
</div>
</div>
inside my component, when i click on any link i a 404 error. i have tried router-link , 'a href' none is redirecting me to invoiceform
<template>
<div class="row">
<div class="col-md-12">
<div class="tile">
<div class="row pb-3">
<div class="col-md-12">
<div class="tile-header">
new Invoice
</div>
</div>
</div>
<div class="tile-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th> # </th>
<th style="with:20%"> Date </th>
<th> Number </th>
<th> Customer </th>
<th> Due Date </th>
<th> Total </th>
<th style="width:100px; min-width:100px;" class="text-center text-danger"><i class="fa fa-bolt"> </i></th>
</tr>
<tr v-for="invoice in allInvoices" :key="invoice.id" class="py-0 text-center" >
<td class="align-middle py-0">
<a href="#" class="nav-link text-info font-weight-bold">
{{ invoice.id }}
</a>
</td>
<td style="width: 10%">{{invoice.date}}</td>
<td >{{invoice.number}}</td>
<td >{{invoice.customer_id}}</td>
<td >{{invoice.due_date}}</td>
<td >{{invoice.total}}</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="Second group">
<i class="fa fa-edit"></i>
<i class="fa fa-trash"></i>
</div>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
I this is my routes
const router = new VueRouter({
routes: [
{
path:'/dashboard',
component: DashboardComponent
},
{
path:'/invoices',
component: InvoiceIndex
},
{
path:'/invoices/create',
component: InvoiceForm
}
],
mode:'history'
});
For SPA with Vue.js, You must define links using vue-router. When defined routes using vue-router, you can use your vue.js routes and only calls components. So you can build SPA. You can find details on here.
https://router.vuejs.org/
I hope it helps you. But It can be hard to implement if you are new on Vue.js
I'm really new to MVC hope you can give me a detailed instructions on this.
I have a query in my repository that returns pending users who have a certain role_id. Now my issue is this I when the administrator clicks on the anchor tag of id idMessenger below
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
I want to show the pending messengers only in the
<div class="col-md-2 left-aside">
<div class="scrollable">
<ul class="inbox-nav capitalize-font">
<li>All Pending Applications </li>
<li>Clients<span class="label label-danger pull-right">{{$elderly->count()}}</span></li>
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
</ul>
</div>
</div>
<!-- /.left-aside-column-->
<div class="col-md-10 right-aside">
<div class="scrollable">
<div class="table-responsive">
<table id="datable_1" class="table display table-hover contact-list" data-page-size="10">
<thead>
<tr>
<th>Appication ID</th>
<th>Name</th>
<th>Email</th>
<th>Senior Citizen Number</th>
<th>Role/Submitted as</th>
<th>Date of Submission</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach($allPending as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->scn}}</td>
<td><span class="label label-danger">{{$user->roles->name}}</span></td>
<td>{{$user->created_at}}</td>
<td>
<i class="fa fa-check"></i>Approve
</td>
<td>
<i class="fa fa-trash"></i>Delete
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Can you please teach me how to do it in ajax.
I want to make a newsletter template for mailchimp & campaign monitor ..
I know in newsletters we have to use table layout and inline styles and i have already done that in my template but i wonder if there are any specific rules i must follow to make my template valid for mailchimp & campaign monitor ?? or just use the following html for the both ??
This is my code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table width="100%" align="center" bgcolor="#ebebeb">
<tbody>
<tr>
<td>
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr align="center">
<td style="padding:9px 18px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">
<p><span style="font-weight: bold;">Hello friend,</span><br /><br />
Why you make everything from scratch?! Now you can find thousands of full source code on the internet and save your time. Here you can find some awesome of them for your upcoming apps! </p>
<p align="left" style="font-weight: bold;">Don't re-invent the wheel!</p>
<p align="right" style="font-weight: bold;"><span align="left">- NileWorx</span></p>
</td>
</tr>
</tbody>
</table>
<br />
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr align="center">
<td style="padding:9px 14px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<div align="left">
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Football Logo Quiz - Android</h3></a>
<p style="text-align: justify;">Football Logo Quiz is a worldwide game. +10,000,000 are playing logo quiz games and we filled it with many good features. It has an admin panel and use AdMob to monetize it. It is easy to customize!</p>
<div style="font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight: bold;display:inline-block;width: auto; background-color: green;padding: 8px;color: #FFFFFF"><a style="color:#FFFFFF;text-decoration:none;" href="" target="_blank">VIEW FULL</a></div>
</div>
</td>
</tr>
<tr><td><hr /></td></tr>
<tr align="center">
<td align="center">
<table align="left" width="280" >
<tbody>
<tr>
<td style="padding-top:9px;padding-left:10px;padding-bottom:9px;padding-right:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Success Quotes - Android & iOS</h3></a>
<p style="text-align: justify;">SuccessQuotes is an android motivational application. It has SQLiteDatabase with 1000 success quotes for more than 180 authors and sharing features.</p>
</td>
</tr>
</tbody>
</table>
<table align="right" width="280">
<tbody>
<tr>
<td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Facebook Feeds Notifier - Android</h3></a>
<p style="text-align: justify;">Never miss an important post!! .. keep in touch with your favorite facebook pages without opening the facebook application..</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br />
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;">
<p style="text-align: right;" align="right">
Codecanyon: <a style="text-decoration: none;color:#49ADBD" target="_blank" href="http://codecanyon.net/user/NileWorx/portfolio?ref=NileWorx">Our portfolio</a>
<br />
Skype: <span style="text-decoration: none;color:#49ADBD">nileworx.support</span>
<br />
E-mail: <a style="text-decoration: none;color:#49ADBD" href="mailto:nileworx.contact#gmail.com">nileworx.contact#gmail.com</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
ahmed, this is Ros from Campaign Monitor here. One thing is writing HTML code, however if you want to use our email editor, you will need to use our template language to create editable areas in your template. Note that our template language differs from MailChimp's, so you will need to make two versions of your template.
If you're stuck on the code, I would highly recommend you create and export a template from our email builder.
Thanks, eng.ahmed - let us know if you have any other questions!
I am using Watir (watir-webdriver) with Ruby to write an automated testing script.
I am trying to get the text which is random numbers, in this case 103QUL6M, from the HTML. Since the random number text is different every time I run the script, I want to make sure my code works every time. After I get the text I want to store it in a variable.
<div id="folio-main">
<div id="main">
<form action="/servlets/ProcessAction?identifier=orderConfirmationForm" method="post" name="orderConfirmationForm">
<div id="header">
<div id="info">
<div id="OrderDetails" class="detailsLT">
<h3>Order Details</h3>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="tdLabel"> Order Number: </td>
<td class="tdData">**103QUL6M**</td>
</tr>
<tr>
</tbody>
</table>
<ul class="listLinkCol">
<ul class="listLinkCol">
<ul class="listLinkCol">
</div>
<div id="OrderHelp" class="detailsRT">
</div>
<div style="clear:both;"></div>
<p>
</form>
</div>
</div>
</div>
</div>
Easy Peasy.
$browser.div(:id => "OrderDetails").table(:index => 0).rows[0].cells[1].text