jquery tabledit dropdown: is it possible to retrieve values from mysql database?

问题

I'm using the jquery tabledit plug-in to update a database. Works perfectly like in the official examples.

I can succesfuly include a static dropdown with a fixed number of options (defined in custom_table_edit.js).

I'd like to be able to dynamically get those options from a database instead, but I don't know how to customize the code in custom_table_edit.js.

I can code this in php with a loop querying the database and generating a html <select> field. But I don't have knowledge of javascript or if it's even possible in this framework.

This is the custom_table_edit.js file. A dropdown is defined with three colour options. I want this dropdown to be dynamically produced.

// custom_table_edit.js

$('#example2').Tabledit({
    url: 'example.php',
    eventType: 'dblclick',
    editButton: false,
    columns: {
        identifier: [0, 'id'],
        editable: [[1, 'car'], [2, 'color', '{"1": "Red", "2": "Green", "3": "Blue"}']]
    }
});

I really haven't tried anything because i'd like to know if it's possible to do in this framework.

回答1:

Welcome to SO, nucelar.

What you are describing is a HTTP request from the client to server through JavaScript. This is commonly referred as AJAX or Asynchronous JavaScript And XML. This API enables you to manually send requests to the server and there are multiple implementations.

Because you are using jQuery I will recommend you to use the $.ajax function which is included in the jQuery library.

Down here I've made a very basic example of how to send a HTTP request to a server with the GET method to retrieve some data.

$.ajax({
  url: 'https://yourdomain.com', // Where to send the request to. Can also be a file.
  method: 'GET', // What method of request it uses.
  success: function(data) { // When a response is succesfully received.
    // Do something with the received data.
    console.log(data); // Show what the data looks like in the console.
  },
  error: function(jqXHR, textStatus, errorThrown) { // When an error occurs while making a request.
    console.log(jqXHR, textStatus, errorThrown); // Show the error in the console.
  }
});

In your case the url property value might be the URL of a PHP file in which you query the database and return the result, as you mentioned you are able to do.

The response of the AJAX function (which is stored in the data variable in the success method) can be text, as in a string, or even JSON if you want to send structured data.

Beware of the Asynchronous part. This means that the AJAX code does not stop the execution of the rest of your JavaScript code, but simply continues and comes back whenever the HTTP request has been completed.

I hope that this is enough to get you started. Good luck and don't hesitate to ask questions.

来源：https://stackoverflow.com/questions/58345486/jquery-tabledit-dropdown-is-it-possible-to-retrieve-values-from-mysql-database

标签

javascript

php

jquery

mysql

tabledit