Suppose you have to send three values: element Id, row and column compounded in one URL parameter. That is simple, parameters can be concatenated and delimited with special character. But how to send multiple of these complex URL parameters? This post should give an answer.
First I will show example where you might need such functionality – Drag and drop table content with JavaScript. Table content is dynamically changed and after arrangement is finished, user should have option to save table content. JavaScript code in this post is used only for demo to prepare concatenated URL parameters.
After “Send query” button is clicked, send_query() function will collect values from drop down menus, prepare query string and send to the PHP page. Prepared query string will be displayed in the box below button.
function send_query() {
// collect dropdown menus beneath DIV id="my_menu"
var menus = document.getElementById('my_menu').getElementsByTagName('select'),
selected_value, i, // selected value, loop counter
query = ''; // reset query variable
// open loop through each dropdown element
for (i = 0; i < menus.length; i++) {
// group 3 values to p parameter
if (i % 3 === 0) {
query += '&p[]=';
}
// set selected value and append to the query string
selected_value = menus[i].options[menus[i].selectedIndex].text;
query += selected_value + '_';
}
// replace _& with & and cut first '&' and last '_' character from query string
query = query.replace(/_&/g, '&');
query = query.substring(1, query.length - 1);
// write prepared query to the DIV element
document.getElementById('prepared_query').innerHTML = query;
// call multiple-parameters.php and show accepted parameters
window.open('multiple-parameters.php?' + query, 'Mypop', 'width=320,height=180');
}
PHP script will accept “p” parameters as many as needed. Because parameter name ends with [ ], PHP code implies array. In one PHP line you can accept array from _REQUEST object. Array members are strings like “4_1_3” and they should be detached (list / explode). Finally, variables $id, $row and $column are ready for printing or saving to the database.
// accept parameters (p is array)
$arr = $_REQUEST['p'];
// open loop through each array element
foreach ($arr as $p){
// detach values from each parameter
list($id, $row, $column) = explode('_', $p);
// instead of print, you can store accepted parameteres to the database
print "Id=$id Row=$row Column=$column<br/>";
}
Just for the note, you can have any number of concatenated values in one URL parameter, but this number should be followed with the same number of variables in list() function.
First of all, Redips is great. I’m working with it for the first time and I’m surprised of how well everything is explained and documented.
I was just wondering if it’s possible to save the table status every time something is moved?
tnx ;)
@Bram van Lieshout – I suppose that your question is related to the REDIPS.drag library and the answer is yes, it is possible. Actually it is needed to call AJAX function inside myhandler_dropped() and myhandler_deleted() event handlers to save table content. This way every user modification of content will be followed by content saving in background.
I hope I answered your question, and I’m glad you found my site useful.
Cheers!
@dbunic Thanks for the quick response. Yes you answered my question. Thanks for the help.
First of all, thank you for redips.drag. It is fantastic.
Regarding posting complex data, a much simpler way of dealing with complex structures like tables, etc. is to do the following:
1. In javascript, convert the table to a data object or array.
2. Convert the object/array to a JSON string, e.g.: mystring=JSON.stringify(myObject, null, “\t”);
3. URI-encode if necessary, e.g.: myURLparm=encodeURIComponent(mystring);
4. Send it via AJAX using POST method.
On the other end, PHP just does a json_decode() and everything is ready to go.
@Jonathan – Thank you for sharing solution with JSON method (posting complex data). It looks much simplier comparing to string concatenation and preparing many p[] parameters. You just gave me an idea about new post :)
Thank you once again.
Cheers!
hi. is excellent example for my need.
is possible and like send to a form register a chain extracted of database in form of chain for simulate a new registrations in database of other appplication?
dbunic, god day. Can you help me please with I think you could help me with this: It happens that I have a database that I want to feed another web site through your registration form. these data already stored in your order and required to send this form through a very concatenation, where each fits in the parameter string to be sent to the URL parameters.
example of this chain is something like the following:
http://123startpage.com/login.php?email=&password=&action=login as you can see these parameters we can extract from the database and cash them inserting the new registration form.
@RODOLFO – So, you want to pre-populate some registration form with data from your database? It is possible if there exists some kind of service to read parameters from query string and fill them to the form fields (e.g. PHP page will accept parameters and populate form fields). Other solution is a client side where JavaScript function will read/parse parameters from URL and fill them to the input fields. In both cases you need to have access to the input form you want to fill.
Hi,Is it possible to save the state of drag-and-drop changes applied on browser controls like textfield, dropdown etc and rendering the changes when accessing the same browser page, the next time.
Could you please let me know how to do it. I was able to do the drag-and-drop changes using javascirpt but am not sure how to save the state. Can I directly save the changes as an HTML or would i have to capture the changes in the database and read from the database when the page is access the next time?
Please advice.
Regards
Hari.M
@HMuddada – I will suggest you to read all drag and drop changes and to save to the database. This seems like the best option till web storage / web sql databases in HTML5 reaches the final shape. Please see example03 (you will have to prepare two tables in MySQL database) how to save table content. Instead of concatenating values in this example, JSON is the better method to send data to the server. JSON is on my TODO list for REDIPS.drag.save_content()
nice
Thank you so much , you solved what I was looking for .
Tremendous explaination….well done
I use the same code but the display does not appear !!! :/
Does anyone know where I can find a script or tutorial that explains how to save the final position of an item that was moved using the drag and drop script?
Tnx
@tunisienne_86 – Please download redips2.tar.gz package and go to the example03 (School timetable) example. There you will find readme.txt file with instructions how to prepare local LAMP server to test saving table content to the MySQL database. Inside is also version where each drop of the DIV element is saved. Little JS code is written inside myhandler_dropped() event handler which sends AJAX request with the new location of dropped DIV element. PHP on the server side will save new position and return OK message. Hope this two versions (saving whole table or saving each move) in example03 will focus you to the right direction.