I'm working on a project where users can choose squares of a big field and "book" them.
The grid is just a html table with each having a unique id (1,2,3...).
similar to this example: http://jsfiddle.net/MvFx9/
$
Now after they submit a simple form, the chosen squares turn yellow. i do this with javascript, search all elements by its id and change their class. And it works perfect.
What i want to do now is to change the class of each chosen element server-side. So that when a new user loads the page, he sees yellow squares, which are already booked by other users.
But i dont know how to do it, i guess its not possible with javascript, so i tried it with php. Is there a equivalent getelementbyid function and how can i change the class of each element?
Please give me an advice, thanks.
In some way, you will need to save which squares have been booked by others
The general idea :
1) Whenever a user click on a square, you save the id in a table in the database. You can use a form (it will reload the page) or if you want it cleaner, you perform an AJAX call.
2) When displaying the page, you retrieve the id that have been saved and set the class "already_booked" for them dynamically.
What you need is a database to know which spots are booked.Anything else will take you a long while to do and won't be as efficient.
DOMDocument::getElementById('element_id')
Use the PHP DOMDocument class to do this.
http://php.net/manual/en/domdocument.getelementbyid.php
Edit: didn't fully read the question.
http://docs.php.net/manual/en/domelement.setattribute.php
setAttribute("class", "already_booked");
Related
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.
I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable
I want to make a webpage where an user can add the title from a book he has read. These changes are reflected in real time on a list that contains all books he has introduced on the database, without the need to press any "reload" button. By example: there is no need to refresh (F5) the page to see the last book added.
I don't know if I can do this in PHP or in any other language, so I would like to know which is the best suited for something like this.
Thank you.
I think you are looking for Ajax. Would be able to asynchronously update the section of the page (the post in this case) without the need for page refresh.
You will want to do this with javascript, using the onchange event, and for a discussion on this you can look at: Call Javascript onchange event by programatically changing textbox value.
Basically, you react to the data being changed, then just send it immediately over using ajax to the server, but, you need to be aware of two things.
First, how will you handle errors, such as there is no book with that title, or the length is too long. I tend to put the error message in or by the place where they had the bad data.
The other is that you need to pass back the id when the data was inserted, so that when they change it again you can just do an update, so you will need to store that. I tend to put the database id I need in the element id, but you can keep it in an array in javascript, since it will maintain state for you.
I have a form with multiple input values from various select drop down menus. For example:
A member has 3 choices:
Your favorite color: 1) red; 2 ) blue, 3) green.
If the favorite color selected is red, use a javascript show() to reveal a new div with drop down element, asking to select a new set of options (and so on for blue and green).
I am able to do this easily but the issue I run into however, is in the use of the additional form field names. For example, regardless of the selection above, every choice will prompt the user to enter information in a textarea explaining their choice. I want to name this text area: "explanation". If explanation is filled out by the member with choice 1 above, however, choice 3's hidden explanation field will overwrite the value, thus forcing me to create "explanation1", "explanation2", "explanation3"...
This is a simplified version of what I am trying to accomplish but ultimately, I do not want certain POST variables to go from page to page AT ALL within a hidden DIV. Is this possible?
Thanks!
EDIT
I found this article which gives a good explanation for disabling input elements, it does not however get to my underlying basis which is that I want to have multiple input elements with the same name but appear only for various selections (so explanation is only valid if choices are 1,2,3 and 2,4 but just because 2,4 is not met, 'explanation' should not be set to disabled because of it)
How about setting the other fields (the hidden ones) to disabled? That way their values will not be posted along with the rest of your form.
So in the if-block where you decide which div-with-dropdown to show, just add:
$('#div1 .explanation, #div2 .explanation').attr('disabled', true);
Updated answer based on your comment. Just add a class to the answers, so they can have the same name. Make sure you don't give them the same ID, though. That's invalid HTML.
Man, it'll be very easy if you use Jquery, a JavaScript library. An example...
On a click, a input will appear...
$("#btn")click( function(){
$("#inputID").css({'diplay':'block'});
});
You'll resolve your problems using Jquery.. access the site to learn more... http://www.jquery.com
On php page in a form, One combo box has list of my Customer from mysql table customer. Another combo box has invoiceno stored in invoice table which has respective customer records. I want to select customer from first combo box and filter invoiceno from the second one according to the customer. Any one help me for php or java or Jquery or both codeings? Means if I select customer1 then in the second combo box should show all invoiceno respective to the custermer1. No Refresh or ReLoad or Post form Pl. If I get the first selection in a php variable format example $customer, it is enough for me. Thanks for any one help me.
Based on what is given, i think one is only restricted to pushing you in the right direction. In a case where you there a large number of customers, it most likely be that you are working with a database, thus the following process:
The Page of the selects is where you will need to make an AJAX request on change of the select element.
Using your JavaScript of your favorite JavaScript library you'll make the request passing a value that you'll query your database for.
Ofcourse you'll need to configure your PHP for GET or POST depending of you AJAX request, then query the database.
Format the databases output to be a valid HTML of your selected element.
Earlier you'll have configured your AJAX script to populate the proper element once the request has been successful.
You dont want to POST to the script. You dont want to invoke any server side activity. And you want to get the value user selects into a PHP variable. From what I understand, this means, you dont clearly get where PHP plays a role. The way you want it, you might want to use XAJAX : http://www.xajax-project.org But even this causes various REQUESTs to the PHP script internally.
I would suggest the below:
Do a natural join in the SQL query.
For a customer C1, there might be 100 Invoice numbers I1. The result of the query may be outputted in a JSON format. Something like this:
"RESULT" : [
"C1" : ["I1", "I2", I3"],
"C2" : ["I11", "I22", I33"]
]
ALL the data will be sent to the browser. This data can be stored as a Javascript Object. Use JSON.parse("<PHP response here>");
Whenever the users selection changes in a combo box, have a function in Javascript to load the corresponding values in the second list.
EDIT: In case, you are dealing with a larger database, and you expect a larger dataset, I would HIGHLY recommend XAJAX -- Simple and easy! :-)
If AJAX is not an option, you must load all the things (include customer & invoice), then you can use pure javascript/css to do that. It's a dirty work around, but it works.
First, let says that you have n customer, so you will have 1 combo box to select the customer; and n combo box for the invoices that associated with them. Those invoice combobox may have id = their ids in database.
Hide all the invoice combobox, with css : display: none
Use javascript: onchange to get the change event in the customer combobox, then show the approriate invoice combobox(display:block). This can be done easily by css property of Jquery, or simply manipulate by javascript replace function (to replace the html class of the combobox)
I'm sure that this way works, but the price is that you must load all data of customers & invoices, which maybe huge. So that if possible, you should try the AJAX approach like Thrustmaster & Babiker propose.