So this is what I'm doing.
I'm using the DataTables plugin, and also the magnific popup plugin. What I'm trying to do, is have a table of users, load dynamically from a database, and loaded into the DataTables, table. There is a link, in each row, for the specified user. Now, what I'm trying to do, is when you click the link, instead of going to another page, it create a popup with the data. It doesn't work. I debugged it sort of, and what I'm seeing, is since, the data is pulled from the database, through ajax, the popup plugin, doesn't see the data. Is there a way to get around this? I'm trying to make it as efficient as possible, and reduce CPU load on the server, so..
<table id="player_table" class="display">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Last IP</th>
<th>Total Commands</th>
<th>Total NPC Clicks</th>
<th>Total Object Clicks</th>
<th>Total Item Clicks</th>
<th>Last Trade</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>142</td>
<td>Dayghost</td>
<td>127.0.0.1</td>
<td>325</td>
<td>568</td>
<td>1433</td>
<td>12503</td>
<td>16:42</td>
<td>more Info</td>
</tr>
</tbody>
</table>
This table is loaded dynamically, and has 150 random whatevers in it.
The following is the ajax, that gathers the data.
$('#player_table').dataTable({
"processing": true,
"serverSide": true,
"ajax": "serverside/handler.php"
});
This is the popup module
$('.popup').magnificPopup({
midClick: true,
type: 'ajax'
});
The popup module, will only work, IF and only if, the data was loaded at the time the page was made. It won't work on the data gathered through ajax. I tested this on a test button.
I edited the usage of the .popup class
Although I can't see any html elements with the class .popup on them in your code (?) I'm guessing what you need to do is call Magnific popup after your content is generated.
Order of events would be:
Page is loaded with the static data
Magnific is initialised on the data currently on the page
Data is refreshed using AJAX
Magnific no longer tied to any elements on the page, so magnific needs to be reinitialised
This would be as simple as calling:
$('.popup').magnificPopup({
midClick: true,
type: 'ajax'
});
After the AJAX content has loaded.
I figured it out.
I put function..
$('.popup').magnificPopup({
midClick: true,
type: 'ajax'
});
into a onComplete setting in DataTables.
Related
I have a page one.html that contains a hyperlink
<a href="#">Open second page<a/>
When this link is clicked I want to open second.html in a pop up modal.
My second page contains a simple table which I want to show, like:
<html>
<div class="table-responsive-md">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>adidas</td>
<td>one of the top sport brand.</td>
</tr>
</tbody>
</table>
</div>
</html>
If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.
But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.
I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).
I have problem with my table.I use jQuery function .hide().
$("#table").hide();
And that works perfectly, but there is one problem.After reloading page, my table shows up for couple seconds and then hide.
I have been trying many things, i put .hide() function first in list but still nothing.
I used $("#table").css("display", "none"), but still i have same problem.
What should i do?
You could do something like,
Add style to table For Example,
<table id="table" style="display: none">
<thead>
<tr>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>Thiru</td>
</tr>
</tbody>
<table>
You do not need to use jQuery to hide content on load, just use display: none.
#table {
display: none;
}
To answer to your question, I you are using hide() into a $(document).ready(function() {}). So it is executed after your page is fully loaded.
I'm working on a portal which has a set of forms that can be accessed from the main screen and then a page which has reporting based on a users submissions to said forms.
The forms write to a singular Google spreadsheet where data is manipulated and a "Status" is thrown out.
I have got this status, among other data onto my reporting screen and at the minute it is static until the users physically refreshes the page.
I am wanting to make it so that this report refreshes automatically, say every 60 seconds, so any changes are reflected to the user.
I've spent time researching, and have managed to get two options which seem to be in the beginning stages of working, but I am unable to work out how to solve the issues I'm still having.
One choice was to do a meta refresh. The code for this is:
<meta http-equiv="refresh" content="60;url=HereIsTheURL"/>
This version works, but only in the first instance. i.e the page successfully reloads the first time, but when the second instance comes around all I get is a blank white screen.
The second choice I have been using is with JS. The code is:
<script type="text/javascript">
setTimeout(function () {
location.reload();
}, 60000);
</script>
However, this simply returns a blank white screen every time.
Further information:
I am using HTMLService in Apps Script.
The page on which the Log/report appears has the full script URL + "?page=pagename"
Does anybody have any ideas how to change the code so that the page refreshes properly every time?
Updated below with HTML content:
<div id="content" >
<h1>Change Log:</h1>
<br>
<br>
<div id="users-contain" class="ui-widget">
<table id = "user" style="width:100%" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Change Request Date</th>
<th>Change Request</th>
<th>Status</th>
<th>Completed By</th>
<th>Date Completed</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
AFAIK, you can't use location.reload because of redirecting security issues (wild guess), but you could reset the whole page, with setTimeouts in the Javascript HTML, and update the page, if you'd share you HTML code we could help on how to update them.
Im new to jquery and need some help.
I have written a table that act like a grid with help from jquery.
When a user click on Name column the user will be redirected to the details page.
Now I want to know if I can do this in a better way?
And should the JS code be in the page or in a separated JS file?
Here is the code.
<table id="grid">
<thead>
<tr>
<th data-field="name">Namn</th>
<th data-field="location">Ort</th>
<th data-field="phone">Telefon</th>
<th data-field="buildinmonth">Bygga inom</th>
<th data-field="houselot">Har tomt</th>
<th data-field="created">Skapad</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td><span id="open" data-id="#item.Id">#item.Name</span></td>
<td>#item.Location</td>
<td>#item.Phone</td>
<td>#item.BuildInMonth</td>
<td>#item.HouseLot</td>
<td>#String.Format("{0:d}", item.CreatedDate)</td>
</tr>
}
</tbody>
</table>
<script>
$("#grid").kendoGrid({
scrollable: false,
sortable: true
});
$("#grid #open").click(function () {
window.location.replace("/lead/details/" + $(this).data("id"));
});
</script>
In this scenario, dont need to use any jquery click event, when the html table is loading that time we can give a <a> tag like,
<td>#item.Name</span></td>
When a user click on Name column the user will be redirected to the details page. Now I want to know if I can do this in a better way?
This seems ok. The only thing I feel can be adde to this is on hover of the Name column, you can show a tooltip of "Show more details" or something more intuitive.
And should the JS code be in the page or in a separated JS file?
Yes I always prefer to have all my JS code in a seperate file. The advantage of doing so is that you can minify the JS code later on.