So I've been struggling with finding a simple and efficient solution for the following problem. The solution I have now works, but since I'm working on this for the sake of learning ...
So, the case:
I have a PHP page which gets loads of persons from a DB, then sorts them and finally puts all persons
in a html list. What I'm after is a elegant solution to edit these persons by clicking on them from the list. I've found a jQuery pop-up solution that looks brilliant, but not so easy to use for beginners.
Since there are several persons I need to produce a different pop-up window depending
on which person is clicked. The problem is that the jQuery pop-up is based on the html being pre made, which is obviously hard since I don't know which person the user will click.
The best I've come up with so far is sending a GET -variable to the page with the person list, which then checks if there is a valid variable from GET and produces the HTML for the clicked person based on the id/variable. The problem with this is that I have to essentially run the same query twice; once to get all persons and once to get the clicked person. It isn't a big problem, it's more that since I'm new with jQuery I'm wondering if there is a simpler/better solution. I'm not really sure what jQuery can and can't do.
Thanks for any replies.
I'd start by asking why you don't ask the database to sort/ORDER the values before sending them back to your PHP page? It's well-suited for that sort of thing.
You could know which person was clicked if you added the database id to each element and passed that around. Have jQuery add it to the DOM element for each row in the HTML table.
kinda the standard way would be to pass the persons as JSON, and use the jquery templating system to build the forms. Of course this could be a bit daunting to a beginner, but its not that hard.
For a school project we have to build a web app. I'll be creating something where people can keep track of their classes, their homework, and their free time. A planner/calendar. (I'm making it sound really lame here but hey, I'm tired and English isn't my first language ;) )
I'll be working in CodeIgniter for the PHP logic, combined with the usual.. CSS, jQuery, mySQL. PHP is a requirement for the course; I chose to do this in CI because well.. I wanted to learn the framework. We kind of have to show off what we can do at this point of our 'school career'.
Anyway, I would like to ask for some insights regarding a feature I want to implement. At the top of my page, I would like to show a bar which contains the days of the month. Below the day number, I would be showing how many tasks are added on that day by means of some dots. When the user clicks previous or next, I want to show the previous/next month's days. I also want some sort of slider underneath this box which the user can use to slide left and right, and cycle through the days that way. I hope that made sense?
EDIT 2: I want the slider to be dynamic. If the user slides to the previous or next months, or clicks the buttons, I want it to load the days of the previous/next months and show those. Also, say we're at the 26th of a month, the slider would have to show something like 10-31 of this month AND 1-10 of the next month. I suppose I'll also have to change my month indication (not like in the image here) so a user knows when another month starts (I'll show them the name of the month).
Here's a picture (don't mind the day numbers being messed up, I was lazy doing that correctly in Photoshop. will fix that tomo):
I've been looking at the jQuery UI sliders. I suppose I'd have to grab the number of days from a database or by using PHP? I guess the cal_days_in_month function could come in handy here. When the user clicks on the arrows or slides left or right, I don't want the page to refresh. Should I go with ajax calls there? I'm not quite sure how to implement this, to be honest. The numbers are also links to a calendar type of view which shows underneath this bar.
Could I possibly use the CI Calendar class for this? Or is it more for full-fledged google calendar-type of calendars? I thought this screencast could perhaps be useful?
If possible, could someone please provide some insights on how to start working on this and which plugins/etc I could perhaps use? I'm not sure where to start, to be honest. I'm sure I can work this out somehow, but I guess it'd be nice to get a kickstart by means of some help here. The main problem I'm seeing is the slider/next/previous thing and loading in the previous/next month's days.
Thanks in advance.
EDIT: I realise some people might say/think 'OMG, why don't you just use the skills you have instead of trying something you have to ask us about!'. Well, this is because I actually want to learn something while doing this project. Keep in mind, I'm not asking for lines of code here, I'm just asking for some insight on where to start and what stuff to use; perhaps little snippets that can help me out. Thanks.
UPDATE:
I got a very basic 'day bar' working. Still without a slider, nor do the previous and next buttons work, but hey.. at least it fills it in dynamically. It shows the 5 days previous to the current day, then this month till the end. Whatever is left to fill in gets filled with days of the next month. Quite basic. However, I do have a couple of questions!
Since someone told me yesterday that I was breaking design patterns by doing some stuff the way I was doing it, I'm extremely paranoid about the way I'm working now and I would really like some feedback from 'CodeIgniter pro's'. To fill in the 'day bar', I created a helper with a couple of methods. (One method to dynamically fill that 'month year' thing you see in the picture, another method init() which loads the list of the days, like I explained before). I loaded this helper in the controller and I'm now using the methods in my view:
<ul>
<?php
init($current_day_of_month, $current_month,
$current_year, $days_in_current_month, $show_history);
?>
</ul>
The helper then echoes my day values in my view. Is this good or bad practice? I kept thinking the wrong way when I wanted to start writing the code for this.. I wanted to have a function somewhere in my controller and then call it from the view, but I read that I shouldn't be doing it like that.. that I had to reverse my logic. I find it hard to wrap my head around the fact that I have to do this by sending arrays of data to my view (from my controller), so I opted for creating the helper. Good? Bad? Any tips, resources I should read, screencasts I should watch? Thanks a bunch.
This seems pretty straight forward to me. I don't really have time to write the whole thing now. but heres what steps I would take.
1) create a model which gets all the tasks for a month, and uses that to create an array of {date}=>{num_tasks} e.g. {'1'=>3,'2'=>1, "3"=>0, ...}. //hint: use a regular SQL count OR just loop thru and tally them.
2) create a controller function to return this array as JSON. Something like this:
public function get_month($month, $year) {
$tasks = $this->task_model->get_each_days_taskcount($month, $year);
$json = json_encode ($tasks);
echo $json;
}
3) write a html page which has a javascript function to call this controller function with AJAX. Something like:
function fill_calendar(month, year) {
$.get('some_controller/get_month/' + month + '/' + year, function(data) {
// parse the JSON then
// do something with the data here like $('#calendar').append();
});
}
4) Load this month with something like this:
$(function() {
var d = new Date();
var tmonth = d.getMonth();
var tyear = d.getFullYear();
fill_calendar(tmonth, tyear); // populate with this month
});
5) make the prev and next buttons work with something like
$('#prev_button').click(function() {
fill_calendar(current_month - 1 , tyear);
// you will probly need to make this calculation smarter than just minus 1
});
The key thing if you want your system to be dynamic is to make the data transmission short. So using Ajax, as icchanobot says, send the request for a specific month. Use get:
'some_controller?m=' + month + '&y=' + year
or even:
'some_controller?next' // or previous
The controller has to get data for the correct month, but not send back the whole month - only the data needed for your display, in a format as tight as possible. You could query how many events run on which days of that month:
SELECT day, count(event)
FROM event_table
WHERE DATE BETWEEN 'yyyy-mm-01' AND 'yyyy-mm-31'
GROUP BY day
ORDER BY day;
query needs adapting to your data structure - use a function to get the day from a complete date, and maybe use indexes so that the query returns the data fast.
Then the controller returns a string as short as you can make it, of the relevant data sorted in day order:
1=3,15=1,29=2
That would mean "1st=3 events, 15th=1 event, 29=2 events". If you don't want the number of events then "1,15,2" is enough. Empty days aren't transmitted.
the data is received by an ajax event handler on your web page and you parse it by using split, then populate the slider by using a loop.
Your biggest drag, in a very dynamic application, is if it slows down when you repeatedly ask for the next month and the next.
A few tricks:
Update the display while waiting for data; you send your query, and while it is being processed, you can slide the month into view, with the correct number of days, looking disabled so that the user knows immediately that they will get their data, and that it is in progress. Then when the data comes, populate and highlight. It will feel instant though it isn't.
Avoid processing information the user doesn't want anymore. If somebody clicks "next" three times, they want the data for july, not may, june and july. Don't process what you don't display.
Cache data you've already asked, unless you want the system to return dynamically to the server for the latest state of the calendar. You've asked for the data for May and June, but not displayed it; when the user hits "back", don't ask for that data again.
Good luck!
I really don't see the complication about this.......
If you just use the jQuery UI DataPicker and modify the js file so it stores the days in a slider, then put the data in a jQuery UI Slider and you should have almost what you require.
Does anyone know of a link to a site that has a tutorial/code on good way to paginate information coming from a database? (without page refresh) I have spent the better part of the day looking for a site that has what I need. Most are dealing with static/fixed data in the forms of lists etc.
I need one that has something like this for my tables:
Data Data Data Data
Data Data Data Data
Records 1 to 8 of 27 First Previous Next Last
We just implemented a few things using this plugin for JQuery:
Datatables.net
It works on basic html tables and has support for AJAX. Basically you would just write a PHP page that returns a partial result from your database in JSON, etc. The plugin will handle making the AJAX call and displaying the data.
This is only a very partial answer (sorry, not much time atm) but look for the 'LIMIT' command in mysql. It lets you pull back only a certain set of records, say records 11-20. I use that when I do pagination.
Again, this isn't complete, but hopefully it'll help!
I've worked with this one quite a bit. jQgrid... seems to be pretty well maintained.
http://www.trirand.com/blog/
You know when you start searching in an autocomplete search box, you get a list of possible results. From those results, say you click one of the items on the list, I want to take that item and perform another search to give another list of results. Just exaclty like how google works. if you dont understand me try typing into google search box something like 'ja'. It will give a list of possible results,when you select one of them, it does another search and gives another set of results.
Pls does anyone know how to do this with scriptalous autocomplete? or anyother way Any example on the net, will really really appreciate it.
I ma using codeigniter frame work (php) by the way
You can definitely do it. Personally I would do it in jQuery using the Autocomplete from jQuery UI.
http://jqueryui.com/demos/autocomplete/
You could get it to load the results like it usually does but format them differently or extend the jquery ui. Would be fairly simple.
Since its possible in jQuery its definitely possible to do with the scriptaculous autocompleter but I am not familiar with it.
You would look at the place where the output is displayed:
<div id="autocomplete_choices" class="autocomplete"></div>
If you can style this the way you want it instead of it being like a dropdown then you will have your instant.
I have a php code that fetches data from mysql. The data has (say) 15 rows. I want to display only 5 rows at a time to the user, with links to each of the set (3 in this case) such that when a user clicks on either of the links, the same page will show the corresponding results. Since, php code has the final result set, I don't want a solution that involves me to navigate to other pages and possibly re-calculate the next set of solutions (5~10 or 10~15). How can I do this? Thanks in advance.
If I am using javascript or ajax, how can I achieve this? I don't know javascript much.
You can try loading everything in your page and simulating the pagination thanks to javascript.
An example in jQuery here
It sounds like you want to send the Data as a complete set to the client but not let him display everything to the user. So use Javascript to just show you the pages 1*page_number to 5*page_number (with a for-loop).
By far, the easiest solution in this situation is a Dom-based Grid system. I recommend checking out Datatables. In essence, the Datatables code will take a fully-formatted html table and reformat it to include only the amount of rows you tell it to, with paging on the bottom as you've requested. In addition, you can turn on such features as filtering, toggle-able length, sorting, and selection. Once you get the hang of it, the additional code takes no more than a minute per table and the features are outstanding.
This is really straightforward. Use PHP to output ALL of the table, with all the rows. The only gotcha here is to include the full html, including <thead> and <tbody> Give the table an id such as "example"
Now, include the files that you download from the datatables site--datatables.js and Jquery.js. Instantiate the jquery like this:
$(document).ready(function() {
$('#example').dataTable();
} );
That's it. As you can see from the examples, it's a really cool tool. Good luck.