I am trying to create loader for my website but it is not working .I am using turbolinks classic for this operation.The loader loads after the page load which i don't want .I need when page is loading that time i need my loader to load and when the page gets load the loader should get disappear both things are not working.Here is my code
<div id="content-wrapper">
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
<div class="row">
<div class="col-lg-12">
<div class="main-box clearfix">
<div class="clearfix">
<div class="common_page gsb1">
<div class="hdr">
<div class="row">
<div class="col-md-3">
<h4>Dashboard</h4>
</div>
<div class="col-md-5">
</div>
<div class="col-md-4 pull-right">
<%=render 'common/date'%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<div class="table-responsive custom-bg">
<table class="custom-table" cellspacing="0">
<tr>
<td><table width="100%" border="0" class="tbl-second-lvl" cellspacing="0" cellpadding="0">
<tr>
<td> Name</td>
<td>Email </td>
</tr>
<tr></tr>
<%#dashboard.each do |dashboard|%>
<tr>
<td><b><%=dashboard[:NAME]%></b></td>
<td><%=dashboard[:email]%></td>
</tr>
<%end%>
</table></td>
</tr>
</table>
<%= will_paginate #dashboard %>
</div>
</center>
<%=render 'common/footer'%>
</div>
<script>
$("#retailer").attr("class","active")
$(document).on('page:load', function(event) {
$('.loader img').css("display","none");
});
</script>
But the loader is not loading the image Can anyone tell me how to do that.And I don't want to use ajax for this thing
set display to block initially :-
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
or just
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;'/></div>
and remove
$(document).on('page:before-unload', function(event) {
//remove $('.loader img').css("display","block");
});
As a result,the loader image will be not visible after document is loaded fully but is visible till then
Related
I want to get id of button click in the address bar to take relivent data from database like instagram did.
I want to get id from the adress bar using php to find the specific data from database according to the id of selected reference.
Note
The image below is the credit of #designer from post Stackoverflow Question.
My code snipest is:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary btnModal" data-target ="#scrapModal" href="washingPlan.php#scrapModal?id=' . $row['id'] . '" data-toggle="modal" >Service Include</a>
<div class="modal fade bd-example-modal-lg" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="scrapModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">WASHING PLAN SERVICES</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<input type="text" name="id" id="id" />
<thead>
<tr>
<th>S.No.</th>
<th>Washing plan Services</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>S.No.</th>
<th>Washing plan Services</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>test</th>
<th>test1</th>
<th>test2</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<form action="" method="post">
<div class="col-lg-8 m-4">
<label class="ml-1">Plans Include</label><br>
<input type="text" id="plans" name="plans" placeholder="" class="col-12" required>
</div>
<div class="row m-5">
<input type="submit" value="Reset" class="btn" style="background-color: #FF9933;letter-spacing: 0.6px;border-radius: 2px;color: #FFF;">
<input type="submit" class="btn" name="includeService" value="Add Value" style="background-color: #0891FF;;letter-spacing: 0.6px;border-radius: 2px;color: #FFF; display: inline-block;vertical-align: middle;">
</div>
</form>
</div>
</div>
</div>
Its address didn't not changed when I add data-target=modal. Is there any technique to make a modal like this?
Thank you in advance
I'd say you're looking for the History API, which allows you to manipulate the browser history (including the URL bar) using JS.
history.pushState() allows you to 'add' a page to the history stack, which will change the URL to whatever you specify.
If you listen to the window.onpopstate event, you can detect when the user navigates history using the browser controls (such as the back button), interrupt it and handle it yourself, all without reloading the page!
That should be plenty to get you started, it's a very useful API to take advantage of.
I am dragging and dropping 3 div's(div tag). one div tag contain object tag in side div tag, in that object tag i'm displaying PDF file. when page loads object tag display's PDF file, after drag and drop object tag will not show pdf file, object tag is blank.
HTML CODE
/* Display Box1*/
<div class="parent">
<div class="box child" id="child3">
<div class="box-header">
<h3 class="box-title">Information From Document Archive</h3>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; padding-left: 5px; max-height: 250px;">
<div style="z-index: -999;">
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
</div>
</div>
</div>
</div>
/* Display Box2 */
<div class="row">
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child1">
<div class="box-header">
<h3 class="box-title">Information From AI Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; max-height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 200px;">Field</th>
<th>Value</th>
</tr>
<tr>
<td>Permission Note</td>
<td><span class="text-red">
<asp:Label ID="lblPermissionNote" runat="server" Text="abcd"></asp:Label>
</span></td>
</tr>
<tr>
<td>Customer Comments</td>
<td><span class="text-red">
<asp:Label ID="lblCustomerComments" runat="server" Text="Test comments"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="parent">
<div class="box child" id="child2">
<div class="box-header">
<h3 class="box-title">Information From Mainframe Engine</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
</div>
</div>
</div>
<div class="box-body table-responsive no-padding" style="overflow: auto; height: 300px;">
<table class="table table-hover">
<tbody>
<tr>
<th>Field</th>
<th>Value</th>
</tr>
<tr>
<td>Consignment Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameConsigmentNumber" runat="server" Text="1234556789"></asp:Label>
</span></td>
</tr>
<tr>
<td>Account Number</td>
<td><span class="text-black">
<asp:Label ID="lblMainFrameTntAccountNumber" runat="server" Text="123456"></asp:Label>
</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
JQuery Code
$("document").ready(function () {
$(".child").draggable({
revert: true
});
$(".parent").droppable({
accept: '.child',
drop: function (event, ui) {
if ($(this).children().length > 0) {
var move = $(this).children().detach();
$(ui.draggable).parent().append(move);
}
$(this).append($(ui.draggable));
}
});
});
CSS
.parent {
/*float: left;*/
cursor: move;
border: 2px dotted silver;
}
Web Page Before Dragging
Web Page after dragging
Please suggest any solution.
Found solution. Instead of using <object> tag i used <iframe> tag. it worked for me.
Before:
<object data="file/DRAG.pdf" id="objpdf" class="col-sm-12">
</object>
Changed To:
<iframe src="file/DRAG.pdf" class="col-sm-12" style="height:300px;" frameborder="0"></iframe>
I have the following problem: I am using datatables with multi column filtering on top. If you watch the video at this link you can understand the problem:
https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0
When I resize the browser window, the input search fields are still visible causing an overflow in the table.
Obviously the datatable ha been initialized via javascript with the responsive option.
Here's the HTML:
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
VISUALIZZAZIONE OFFERTE ABITATIVE
<small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
</h2>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
{$sizeOffers = count($offers)}
{if $sizeOffers gt 0}
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
{else}
<div class="alert alert-warning">
Non c'รจ nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
</div>
{/if}
<hr>
<div class="text-center">
Aggiugi un'offerta
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
</div>
</div>
</div>
</div>
</div>
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
</div>
As you can see, offers.tpl is an included file and contains:
<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
......
</tbody>
Can you help me?
Create responsive tables by wrapping any .table in .table-responsive :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
I'm trying to make it so when you click on a row in the table, depending what row you press, it will display that data into the other panel. So when I click the first row, the Number in the table fills out the number in the other panel, under "Readings". As well as the Name in the table, filling out the Name field under "Readings". How would I go about doing this?
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<!-- end row -->
There you go pal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input
type="text"
id="numberInput"
class="form-control"
placeholder="Number"
disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input
type="text"
id="deviceInput"
class="form-control"
value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- end row -->
<script>
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#numberInput');
var device = document.querySelector('#deviceInput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
device.value = data[1];
}
})();
</script>
</body>
</html>
With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. So you can create a function that handles that click event.
You can either use the onclick attribute or addEventListener method of HTML elements. You can explicitly state the input to the function or calculate it. So say the function name is updateOther, you could do updateOther(1,'First') or updateOther(this). The latter will pass the row element that was clicked and you can extract the pertinent information.
$(document).ready(function(){
$(".gradeA").click(function(){
var currentRow = this;
var number = $(this).find("td")[0].innerText;
var name = $(this).find("td")[1].innerText;
$("form input[type='text']").val(number);
$("form input[type='device']").val(name);
})
});
I want to display a particular section of very large HTML page (say, "page1.html") through another HTML page (say, "page2.html"), which will contain the links to every section of page1.html. How can I achieve this using simple javascript, jquery, etc. page1.html is actually being rendered through splunk and page2.html is a normal html page that has links to various sections of page1.html. Can this be achieved?
Sorry, couldn't provide pictures as my reputation is below 10.
Let me clarify. There are a range of applications(over 100) on different servers. each application contains a master page like page1.html. There is a search box in page2.html where I type in or select the application whose statistics I want to view.
The sections refer to particular statistics I want to view, suppose I want view only server statistics on which the app is running, then I will click on a link or button (on page2.html) that will take me to that section of the master page (i.e., page1.html) where the relevant information is shown. Similarly if I want to see the application statistics I will click on a link or button (on page2.html) that will take me to that section of the master page where the application statistics are being displayed.
Here is the code for page2.html:
<body class="simplexml preload locale-en">
<a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
splunk<strong>></strong>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Application Dashboard HTML</h2>
</div>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>Application</label>
</div>
</div>
<div id="row1" class="dashboard-row dashboard-row1">
<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element1" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<center><h1 class="golden_gradient">$tok_application$ Application Status Dashboard</h1></center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="row2" class="dashboard-row dashboard-row2">
<div id="panel2" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="element2" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<table cellspacing="5" cellpadding="5" border="0" width="100%">
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadURL()"><font size="4"><p align="center"><b>Website Availability</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadDBStat()"><font size="4"><p align="center"><b>Database Availability</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBM()"><font size="4"><p align="center"><b>Batch Jobs</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadIT()"><font size="4"><p align="center"><b>Infrastructure Dashboard</b></p></font></a></pre>
</td>
</tr>
<tr>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadBusiness()"><font size="4"><p align="center"><b>Business Dashboard</b></p></font></a></pre>
</td>
<td width="50%">
<pre><a style="text-decoration: none" onclick="loadCMRegression()"><font size="4"><p align="center"><b>Capacity Management Regression</b></p></font></a></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
I want the section of the master page to printed inside
<div id="content"></div>
Also I am a newbie, so please kindly provide a little detailed explaination. Thanks in advance.
http://www.w3schools.com/html/html_iframe.asp has a method using iframes to display a web link.
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
[code taken from w3scools.com]