I'm new here and I'm very new at programming but I need some serious hand-by-hand help here.
I was searching jquery and found a script to drag and drop stuff on the screen, basicly i just want to move some divs around, thats the easy part, the script I found has a callback function that writes onto the div that you just moved "dropped", this is exactly what I need but instead of writting dropped I want to save the 2 postion variables into a database (mysql), this is so that if I close the browser and open it again the div's will be on the last place I dropped them.
Can you help? Is there a jquery user interface with this already built in ?
I think this is easy to do with jquery ajax functions right? basicly I should send the serialized data (json right?) into a page that processes that data once its feed into it, then jason returns the handler with success or even with some output right?
It would be cool for the dragabble div to have a handler with last know position retrieve by jason from an external page that acts like a buffer to the database.
Is this the correct pipeline?
Best Regards
Joricam
you have kind of a vague question here, but I can try to help you get closer to the answer.
Imagine two sides of the puzzle:
When the page loads, the two (or more) DIVs are drawn on the screen. If you want them to draw in a specific order, you need to keep track of that in the database. So be sure your db has a field called something like display_order, and then display the DIVs in that order. (You can usually just add ORDER BY display_order to the SQL, so they are retrieved in the order you want, and then draw the DIVs right out in a loop.)
When someone drags and drops a DIV, you use AJAX/JSON/etc to tell your PHP script the new order. In this case, when that happens, rather than draw the word 'dropped' in the DIV, you should instead immediately update the display_order fields in the database. This way you are remembering each DIV's position.
Does that help/make sense?
UPDATED: thinking more about your question, here is the pseudo code:
in "display.php":
Fetch the contents for each DIV from the database, with ORDER BY display_order on the rows.
Draw them on the screen, looping through each database row.
Also in this HTML, use the jQuery script you already have to call another PHP script (dragged.php) when a row is dragged.
in "dragged.php":
This script is called when a row is dragged on the screen.
Currently it puts the word "dropped" in the DIV that is dragged. That's not helpful, so remove that.
Instead, you now know (from the variables passed to you) that a specific DIV needs to be in a specific place.
So grab a list of the DIVs from the database, then change the order of them (by altering the display_order column) based on the new position(s) you know.
Save that back to the database, so when display.php is called again next time, it draws the DIVs in the order you want.
Hope this helps explain further. If you are still struggling, I respectfully suggest you try to write the code, and post a more specific question about the part that you're stuck on. This will help you get a good answer quickly. (You may also want to Google this one a lot; I'm sure there are code samples out there showing how to do all this.)
Related
I have a page that is full of tables (generated by a foreach loop) and every row displays, among other things, a month.
Now I want to give the user the ability to choose a month and have only the table rows for that current month displayed (or no table at all if that month is missing from the table). A bit like the filtering function in Angular JS.
I'm still a bit new to php and the only solution I can up with is to handle the whole thing somewhat clumsily with modifying CSS classes and having the superfluous rows hidden by CSS.
What would be a more efficient way to do this?
Your problem is related with the filter alternate of angular into php.
As you know php is server side. So, if you want to get the filter after a reload or by ajax method, you need a $_GET variable.
Use a different query string in your url for each click of each button. Then retrieve the GET variable and use it to get data from database for relevant category.
I'm looking to create a poll/form that will allow the user to select a starting 11 for a football game (or soccer if you're American), and then submit it and then see an image of the most popular team selection among the fans (maybe most popular for each position instead of most popular team selection all together).
Ideally I would like the form to have options for formation (4-4-2, 4-3-3, 4-5-1 etc) that would change the layout/inputs on the form (but this is definitely not essential, would just be a nice touch - I would just stick with 4-4-2 otherwise).
My dream idea is that there will be a dashboard on the bottom that had player profile pictures that can be dragged and dropped into their positions; However having simple drop down boxes would work too (as long as a player cant be used twice - which is another stumbling block because you don't want the same player to be in both CB positions.)
Design Concept (Results page would basically be the same just without the bottom dashboard):
I have absolutely no idea how to approach this as it is way more complex than anything I have attempted in the past. (Forgot to mention I would like to be able to reset the results every week or so if possible)
So if someone could let me know if its do-able, and if it is, take me through how to do it step by step or even mock one up for me it would be much appreciated.
Thanks.
It doesn't have to be a form.
Here how you do it:
Create the divs for the squares on the field.
Assign each of them a unique id e.g.
id="square-1"
and give them a common class e.g class="field-square"
Create the divs for the squares outside the field. Give them a common class, and a unique id for each.
When you drop the squares, have a function that extracts the ids when they are dropped.
Then simply post them to your PHP site with jQuery.post()
Update
To extract the ids, in your callback (after you have dropped the square) do something like this:
square_id = square_id.replace('square-', '');
Since you've not assigned number ids (which you should, so that you can easily change the players in future by getting them from a database), you can simply get the ids using $(this).attr('id') in your callback.
Also look up http://api.jquery.com/jQuery.post/
I wouldn't even think about dragging and dropping at this point. Outline what the minimal viable product would be and come up with a set of steps to do that.
Going off the data you provided I would suggest something like this...
1) Build an html form that list simply a list of all the positions and a dropdown of all the possible players that can fill that position.
2) Fill out the form (select the players) and on form submit get the data echo'd as an array.
3) Create the graphic...I see two approaches....(1) server side (GD or Imagick are probably what you are going to want to use) or (2) CSS/html images
Either one will a fine approach....this step should probably be broken into little steps...start with simply displaying a list and an image of the player next to it...
HTML would be
echo "<img src='/images/players".$_POST["position1"]."' alt=''/>";
//(NOTE YOU HAVE TO CLEAN ANY DATA YOU ARE OUTPUTTING PROPERLY)
Imagick would be something like..
$bg = new Imagick("/images/bg.jpg");
$position = new Imagick("/images/players".$_POST["position1"]);
//Second image is put on top of the first
$bg->compositeImage($position, $position->getImageCompose(), 5, 5);
//new image is saved as final.jpg
$bg->writeImage('final.jpg');
Okay. So I don't have any example code to show, but after doing a bit of research and learning the basics of PHP, I think the answer to my question should be pretty simple.
Here is the scenario, as I would like it to be:
On the homepage there will be several team names, with scores next to them. Like "house-points" in Harry Potter.
Below the score is a small text-field. Below that is a submit button.
The user will put a number in the text-field, press submit, and that number will be added to the team's total score.
NOW. I know how to achieve all of that with JavaScript. Easy. What I want to know IS:
How do I make that new number (the new score total) STAY there. I need to permanently alter the HTML when that submit button is pressed.
All I know is that I need to use PHP. I know the basics of PHP, so whatever the answer is, just throw it at me and I'll figure it out.
Sounds like what you want to do is submitting forms. First drop the JavaScript, you won't need it. What you need is to put your text fields in a form and when you submit you can fetch your values with $_<GET|POST|REQUEST>['<name_of_field>'].
Then you will need to store it somehow. The best way to do it is to use a database like MySQL or MongoDB to store it, but it could be a bit tricky if you are just learning this, so maybe you would like to stick to files. You could do this with INI files and PHP's INI functions.
Lastly you will need to print out the correct values to the website. Now this is easy: Just edit your HTML file to do something like
<?php echo $score['team1']; ?>
for each team after retrieving the correct values at the top or something. (Don't forget to rename the HTML file to .php as well).
Now you should be all set to save your scores. =)
If you mean really permanent you'll have to send it to a database via Ajax (combination of PHP and Javascript). OR write it to a text-document, which is less good.
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.
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.