Ok so I'll be honest, I have a good amount of experience with php/mysql, I've just started learning jQuery and I've done very little, but some with ajax. So using the terms ajax/jquery interchangeably are a bit confusing to me. Anyway as the title suggest I have a website with 5 items, and I want them to move (meaning, if a more recent one is entered, remove the last item, and put the new one on top), they are 5 of the most recent items in the database table, now I've coded jquery as a test so it fades out the last one, the whole thing moves down, makes room at the top, and fades in a new one. However, it's a test and has 0 interaction with the database, the one that fades in is just in a hidden div. So the jQuery part is taken care of.
So I'm unsure how to go about this, I was thinking maybe have ajax check a website off the page that has those 5 items in raw format, and if they change then to refresh?
Not looking for a "plz code 4 me" answer, just the concept of how it would work, or some links to get off to the right start.
edit - Also, the 5 items are ranked, so if I click item 3 I need it to move above item 2 refreshlessly, so this causes a whole other issue I assume.
Dan,
I made one example here please check http://jsfiddle.net/yB3zY/
You can write your ajax getting elements etc which is quite easy with jquery , assume your ajax returned five items ok.
var arrpropInfo = GetData();// which returns array of five items
if (arrpropInfo.length == 5 && (!CheckIFThatItemAlreadyExists(id))){
arrpropInfo.unshift(id); //adds at the first location
arrpropInfo.pop();// removes the last element
}
your array will have latest new 5 items, let me know if you need any other info.
Related
I have a dropdown menu that has school subjects listed. I also have a countdown timer for each subjects test date (many subjects share a date). I want to make it so that when the user selects the subject, the right countdown timer appears without the page refreshing.
Right now I have this working using PHP: I have 9 different countdown timer made in JavaScript (I used this tutorial from w3schools) and 9 separate PHP files like this:
$newSubject = $_GET["chooseSubject"];
if ($newSubject == "Math" OR $newSubject == "Chemistry") {
echo '<p id="subjectSet1"></p>';
echo '<p class="dates">October 16. 2019 klo 9:00</p>';
}
I have a button that redirects to a page that then shows the correct countdown timer.
However, I'm looking to achieve something like this:
https://yle.fi/aihe/artikkeli/2019/05/15/ylioppilaskokeiden-pisterajat-kevat-2019
Under the "Ylioppilaskokeiden pisterajat, kevät 2019" there is a select menu, and when you choose a subject it automatically shows the correct table.
This is where project design comes into play. If you expect your dropdown set to be small, you can simply render all of the content on page-load and then use JS/CSS to show/hide each block of content on change of the dropdown.
Alternatively, if you are expecting a larger dataset this could potentially affect your page load times and also make it longer for the browser to render the data (even when it is in a hidden element). In this situation I would look into using AJAX and load in content when you click on a section instead. This is slightly more complex but is;
A good learning exercise
More efficient in the long-term
EDIT:
If you're wanting to go down the show/hide route. This is simple enough using jQuery. There are a few options you could take however I would suggest toggle as a start - see docs here
For AJAX, this will take a bit more reading into. I would also suggest using jQuery's ajax function - see docs here
I want to display my data coming from sql db to front end. I want it to be displayed in some special manner.
Lets assume I have 8 element in total. I want to display only 3 data field at first in a row, and below that a message saying 'show remaining 5'.
Once someone click that another three should load and below a message would show 'show remaining 1'.
I am not asking for a ..read more type option. I want to display remaining data into segments, but not all at once. If anyone can guide me, what can I use or if there is any useful plugin, I am already grateful.
Thanks in advance for anyone who put some effort.
This sounds like something that would be done by JavaScript. This means building the whole table right away, but hiding all but the top 3 rows. Then hook a function to the "Show three more" button, that displays three more rows (until all is shown).
jQuery is a JavaScript library that is easy to get into and would help you get this kind of functionality going, but it is of course entirely possible to do without it.
If you are entirely new to web development with php, sql, html, and javascript I suggest looking at basic tutorials on how to accomplish the basics first, such as fetching data from a db, displaying that in html and how to modify the DOM with javascript.
You need to provide more information, but im gonna answer according to what i understood.
First you need to put the data in a table using <table><tbody><tr></tr></tbody></table>.
Then you can hide the other 5 data fields using css, you can use visibility: hidden or display:none.
Then you can display a message using bootstrap alert class thats says 5 other fields remaining.
Screenshot mockup: http://tinypic.com/r/y2qex/5
Problem: I have a table that has 53 columns; one for each week of the year, plus one with the user name. It will have anywhere between 10 and 80 rows, depending on the number of users for each area.
The users need to be set a “flag” for each week, such as Annual Leave, Training etc.
I currently have a table, which has a select box in each cell. The problem is this works for 5 rows, but once I start getting 20+ rows, the browser wont open the page, because there are just too many select boxes.
Whatever new selections are picked must be able to be queried, so I can save them in my DB.
What I’m after are some generic ideas (i.e. not specific code) on how I can better solve this problem. Once I get a good idea, I’ll go off an work out the exact coding.
My ideas so far:
- Make all cells text only, with the current selection, then have an ‘edit’ option beside each user, which opens their row as a modal window which can be editted
- Make all cells have a “onClick” event, causing a dropdown list to be generated at the point of click
But I’d be keen to hear how other people might approach/solve this problem?
If the options are the same for many select boxes, you could consider using one datalist for all of them, this would be more performant, and I'm guessing allow you to have more per page. Unfortunately this is an HTML 5 feature, so it would not be backwards compatible with all browsers.
http://www.w3schools.com/html5/tag_datalist.asp
Other than that, you could consider pagenating your table if it gets over a certain number of columns. Or do like a tumbr thing, where more columns load via ajax if they scroll to the right far enough. You idea also should work.
You might want to look at using a calendar feature, I'm sure there's a ton of Javascript calendars out there. I also have had a lot of success lately using DataTables. You could use DataTables + jEditable to create a click to edit table representation, that when clicked gives you a select box, but otherwise shows only text.
Perhaps you could have a single hidden select box on the page and display it on a cell when clicked, and handle the result of the click by writing a data-attribute to the cell, and perhaps doing a simultaneous XHR?
You could also just have a bunch of hidden form elements, but that would be gross.
Implementation-wise, you could do it with a single event handler attached to the table, with each cell having data-attributes representing name and week.
Anyway, this should be performant, even though it would require an extra 20 or so lines of js.
Maybe something like this could work for you:
var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
td[i].id='cellID_'+i;
td[i].onclick=function()
{
//make menu appear on this element id
}
}
I'm working for a client who asks me to prepare a module for its website (written using Yii) with the following features:
It shows 3 elements from a mysql_result, starting from offset=0.
The user can click on any of them to mark them as "read". That makes the desired item to disappear and to appear what would be the following item. That is, if you are showing items 3 4 5 and you click on 4, that item would disappear and appear the number 6, meaning the result would be 3 5 6.
The elements being shown are partial views and the button that "deletes" the item is a widget within each partial view.
The user can move through the list of items using some << and >> arrows to go back and forth the result.
One of the options the client gave to me was to show a list of pages ( 1 | 2 | 3 | 4... and so), but deleting items means the number of pages will decrease at some time in the future, plus if the amount is pretty big, I would need something more flexible such as only showing the current and other 4 pages at most. Another option is to keep the << and >> arrows.
I've tried to convince the client that pagination and a "live list" is a pretty bad idea, but he rejected the idea to limit the visualization to only the first 3 items (keeping in mind that eventually you will delete them and thus will be able to see the following items).
I'm developing it using Yii, MySQL and jQuery, and I'm not able to use CPagination because of this living list. I'm not asking the code, just some guidelines because I got lost the third time I tried doing it.
Some basics about the system:
I got a controller which loads the first 3 items of this module.
I got some actions in this controller that fetches the next item within a page (which may not be the same of the current object, though. One of my problems resides here), and the full page.
Each item is able to mark itself as "read", which will make the item not appearing the next time you fetch some results.
Every 1 second I check for items that have been marked as read, remove from DOM and append some new items using the action I defined in the second bullet.
Every time the user hits the << or >>, I reload the previous/next page (That would not be a problem apparently. If you're in the last page and there aren't more items to add, you just remain there. However if you empty the page, I don't have any method to detect that and scroll one page back).
As you may see, this headache would be easier without the pagination buttons, but the client obligues me to put them. What would you do guys? Thanks in advance
EDIT: The client decided to get the results in a random flavor. There is no more pagination, so the problem has disappeared. The #thaddeusmt answer may not have helped me really much, but I'll give it as valid, as it might be plenty useful for other people with similar problems than mine. Cheers
It seems to me like the CGridView or CListView should basically do this automatically. They support AJAX updating/paging out-of-the-box.
I assume that you have an AJAX action that like "actionMarkRead()" which you are calling when the user clicks. I assume that this sets some database field somewhere saying that the user has "Read" that item. To make this work with the CListView, just make sure that the CDataProvider has a condition which checks that "read" field (might have to JOIN a table, I don't know what your DB looks like). Then, when the list reloads via AJAX, it will have the correct # of pages to represent the smaller number of pages the CDataProvier query is returning.
I just tested this and it works!
The way I tested it is I set up a CGridView with 'ajaxUpdate'=>true,. Then in my CDataProvider I set 'pagination'=>1 to make it easy to test. Then I used the default AJAX actionDelete in my Controller to delete the items. Every time I deleted an item via that AJAX action link in the CGridView, the grid refreshed via AJAX and page count shrunk by 1. Seems to work like a charm!
Cheers and good luck!
Further to my question yesterday (here), I am working on a webpage that has a section that shows 'live' order details.
The top half of my webpage has Spry Tabbed Panels. One of the panels contains an include call to a separate php page that I have created (getOpenOrders.php). This contains an SQL query to obtain all open orders and then puts the details into a table.
As a result, the table of open orders is shown in the Spry panel. What steps do I now need to take to have this refresh every 15 seconds?
Do you really want to call the database every 15 seconds for each user? isn't that an overload?
I'm not saying that your database will be overloaded, but, thats how you shouldn't do things!
Edited
you should show an image, or the link to that page in order to gt an appropriate answer, because it all depends in what are you doing in the table.
because I don't know, I will give you an answer on what probably is happening.
Because you said that you're new to the ajax world, let's make things simple, and not to complicate on the you should return a JSON object and use it to re populate your table. :)
So we will start with 2 buttons (Previous and Next) so the user can move the data that is showing (you probably don't want to give him/her 100 lines to see right?)
let's say that you have 2 pages, a showData.php and getTable.php, in the showData.php you will need to load jQuery (wonderful for this) and add a little code, but where the table is to be placed, just add a div tag with an id="myTable" because we will get the data from the getTable.php file.
getTable.php file has to output only the table html code with all the data in, without no html, body, etc... the idea is to add inside the div called myTable all the code generated by getTable.php
Let's imagine that getTable.php gets a page variable in the queryString, that will tell what page you should show (to use LIMIT in your MySQL or PostgreSQL database)
You can use jQuery plugin called datatables witch is one of my choices, check his example and how small code you need to write! just using jQuery and Datatables plugin.
The first description follows the jQuery.Load() to load the getTable.php and add as a child of the div and wold do this for the previous and next buttons, passing a querystring with the page that the user requested. It's to simple and you can see the website for that, if you prefer to use the DataTables plugin, then just follow their examples :)
if you, after all this need help, drop me a line.
<META HTTP-EQUIV=Refresh CONTENT="15; URL=<?php print $PHP_SELF ?>">
This should be in between the head tags.
-or-
header('Refresh: 15');
This should be before the head tag and directly after the html tag.
As said by balexandre, a different method should be used. One that does not require a database hit every 15 seconds for every single user that is connected to the site. But, there is your answer anyways.
Although, balexandre makes a very good point, if you do decide that you need a refresh, you could simply do something like this in your JavaScript:
window.onload = function( )
{
setTimeout( 'window.location.refresh( )', 1500 );
}
(I've not tested the above code, so syntax may need to be tweaked a little, but you get the idea)