I am working on a project for drag and drop items in a shopping cart. For an item dropped into the cart, I am trying to implement jQuery $.ajax. The result back from the PHP is pre-pended with '`' and I can not figure out why.

This is the javascript:

    drop: function(event,ui) {
        var id      = $(ui.draggable).data('id');
        var aisle   = $(ui.draggable).data('aisle');
            url   : base_url+'/index.php/groceries/jquery_append_to_list',
            cache : false,
            type  : 'post',
            data  : {
                'id' : id,
                 'aisle' : aisle
            success    : function(data) {
                $('#target').append('<p data-id="'+id+'" data-aisle="'+aisle+'" class="draggable">'+data.item+'</p>');

This is the PHP script:

function jquery_append_to_list(){
    $id     = $this->input->post('id');
    $aisle  = $this->input->post('aisle');
    $arr    = array(
                    'r' => '1',
                   'id' => $id,
                'aisle' => $aisle,
                 'item' => 'Rye Bread');
    $data   = json_encode($arr);
    echo $data;

For the PHP, I am using Codeigniter as the framework. The PHP is very basic right now as I am debugging this problem so I am trying to return static response values.

The item showing up in the shopping cart is 'undefined' instead of 'Rye Bread' for the JSON array is coming into the browser as `{"r":"1","id":"7","aisle":"1","item":"Rye Bread"}.

I have stepped through the PHP with an IDE and $data is {"r":"1","id":"7","aisle":"1","item":"Rye Bread"}. Somewhere in jQuery's handling it is prepending '`' to the array.

I am using

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

as the jQuery sources. These are the same sources I use for other projects and the returns on those .ajax calls don't come back with a '`'.

The encoding in the ...

I found a solution to this challenge here

It was necessary to downgrade to the MariaDB 1.5 JDBC connector

From https://mariadb.com/kb/en/library/about-mariadb-connector-j/ item 4 under the Table of Contents, Requirements. There is only mention of Java.

Also, I have found that although Mariadb is a fork of MySQL and is supposedly 100% compatible, for O/JDBC use don't mix-up the two. What might work with MySQL offered by Oracle does not apply to Mariadb/MySQL.

I am trying to establish a connection between LibreOffice ( and Mariadb (10.1.29)/mysql. I have researched various resources on the web but am stuck not being able to establish a connection

preliminary steps taken:

  • the file mariadb-java-client-2.4.0.jar is downloaded from https://downloads.mariadb.com/Connectors/java/connector-java-2.3.0/
  • JRE is installed and enabled under LibreOffice Tools > Options > Advanced
  • in that Advanced tab, Class Path is set with mariadb-java-client-2.4.0.jar (I have tried with a path /opt/mariadb-java-client-2.4.0.jar and /home/<my user name>/mariadb-java-client-2.4.0.jar)

Based on web site and youtube tutorials, the next steps are to connect via LibreOffice Base. Using the wizard:

  • Connect to an existing database MySQL is chosen from the dropdown
  • after clicking Next >>
  • Under some video and how-to tutorials, there has been a third option of Connect directly... Is this a further clue that something is not set properly?
  • I choose Connect using JDBC...and click Next >>
  • I provide the database name, the server (have tried localhost and and port number 3306
  • for the MySQL JDBC driver class I change the string to org.mariadb.jdbc.Driver according to https://stackoverflow.com/a/41842833/7932473
  • upon clicking Test Class, a dialog with The JDBC driver could not be loaded appears

I have used JDBC connections before under LO 3.x and MySQL before Mariadb came along. Ultimately, I want to use a connection to my database for further analysis of the data using Calc. Is this still possible? If my memory is not failing me, it is possible to open a Base registered ...

Thanks @rproffitt. The library you pointed me to for NLP is working well.

I have a medical situation also and keep an extensive amount of my own records on my phone.

For transferring data from my pc to my phone, Wi-Fi Droid works very well. It sets your phone as a server while activated and provides a URL in the app which you point your PC browser to. The web page it serves provides a comprehensive file manager utility for copying data back and forth. It doesn't use blue tooth. It uses your data plan or network connection, provided your network is under Wi-Fi, which it sounds like you have already done.

If you want to keep a comprehensive log of your phone calls, SMS Backup & Restore by Carbonite accesses the SMS or phone logs or both (your choice) and has features to upload the date to Google Docs or Dropbox. Third option would be access them from your phone using Wi-Fi Droid. The files are in XML and can be parsed by Excel into a human readable spreadsheet.

Hope this helps

@rproffitt: Thank you for http://compromise.cool/. It looks promising and I am running tests.

@Reverend Jim: No, you are bending my example to make it more diffiult with the second possibility Joe Smith and family.... That is not an example I provided

From the start of the string 'and' will only be sandwiched between two names like:

Bridget Burns and Jack Jones will be away...
Jack Jones, Gracie Burns and George Burns have three days in...

I need some kind of an if or look ahead on a comma , or the word and - Regex concepts I am familiar that exist but not sure how to do - to capture after the first name. It is not impossible.

Kindly don't go bending my example to make up how this is an impossible situation to program. It is possible with some reliabilty. rproffitt's contribution of http://compromise.cool/ shows good promise from testing I have done so far. The existence of this library shows it is possible.

@Reverend Jim: I am pretty sure all of your questions are answered in the examples and what I wrote.

All of the strings have the names at the start of the line:

As for how the names will appear, that is in the examples as well. Two to three names, all with first and last only, no hyphenated surnames or first names. In cases of more than one name, separated by a comma; comma and conjunction 'and' if there are three names.

The challenge I need to resolve is getting a sub-string from strings such as those below. Each line is of an array so I am iterating and working on one line at a time in a JavaScript loop. All of the strings have the names at the start of the line:

Joe Smith will run...
Jane Jones will follow...
Bridget Burns and Jack Jones will be away...
Jack Jones, Gracie Burns and George Burns have three days in...

The sub-string I need is the name(s) at the start of each string. My JavaScript is handling an example of the first or second line adequately by:

substr   = replace(/^(\w+ \w+ )(?:.*)/g,"$1").trim();

will output Joe Smith or Jane Jones respectively.

Is there a method to extract just the names, preferably as one variable?

I have some experience with regular expressions but not enough to reliably extract what I need from examples such as these.

Using .on() is the solution! Thanks a lot for your help, Dani!

To anyone else reading this to find a solution to a challenge they might be having, the complete solution is not simply a case of changing

    var idx = $(this).data("idx");


$("button.btnGenerate").on("click", (function(e){
    var idx = $(this).data("idx");

To understand the use of .on() Google "jquery .on for elements dynamically added" to understand the constraints. It is important that the event be bound to an element of the DOM that is hard-coded/not added to the DOM dynamically by JavaScript/jQuery. The code cited in my original post is added dynamically. Therefore so are the buttons with the class btnGenerate. It is necessary to bind the event to a DOM element farther up that is NOT added dynamically. From my original post, one or more code blocks wrapped with <fieldset> are appended to form . Therefore, the JavaScript becomes:

$("form").on("click", ".btnGenerate", function(e){
    var idx = $(this).data('idx');

The page/browser behaves as intended and the information appears in the console instead of the click triggering a form submission.

@Dani: "Is the html code available when the javascript runs?"

If you mean fully formed in the browser, yes. These fieldsets that appear as an example in my original post and the button I am clicking on are rendered by JavaScript. The code I am clicking and the data expected to be acted upon/returned are fully formed in the browser window and perfect from a syntax point of view.

Is there a difference between code that is hard-coded in an HTML file and then displayed in the browser versus DOM elements (i.e., fieldsets, div's, HTML appended to forms) placed in the DOM by JavaScript/jQuery?

Your raising this question was another possibility I wanted to explore. Testing I did was with hard-code HTML and the JavaScript worked as intended. It is with code that is placed in the DOM by JavaScript/jQuery that the page is reacting to submit the form.

The JavaScript is wrapped in 'document.ready' tags. I am planning to try .on() instead of .click()


The discrepancy was a mistyping here, not a copy and paste of bad code.

Trying to troubleshoot this, I am really at my wit's end. In sandbox tests I have done, the code works as designed. By sandbox, I mean a stripped down static minimal version of the code.

Trying it on the development version of this project, if I set Developer Tools debug on the line '(e).preventDefault();' and click the button there is no return from jQuery. There are other buttons on this site that have '(e).preventDefault();' and jQuery provides a response such as:

e = jQuery.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 911174.1000000002, jQuery112405340923011436065: true, …}

I have tried to run the code in Incognito so no other plug-ins or extensions might interfere. Something appears to interfere if

    var idx = $(this).data("idx");

executes and submits the form

I am a novice at JavaScript an jQuery. I am writing a project and trying to incorporate $(this) to read a data attribute. Once the data attribute is determined and assigned to a variable, I intend to use that to access other form elements.

Instead of reading the data attribute as intended, clicking the button is submitting the form.

This is a code sample:

<fieldset class="new_inputs" id="new_inputs1">
    <label for="file_input_1">Input File:1</label>
    <input class="fileRenamingFormInput" name="file_input_1" id="file_input_1" type="text" value="">
    <select class="fileRenamingFormSelect" name="destinationFile_1 id="destinationfile_1">...</select>
    <input class="fileRenamingFormFileOut" name="file_out_1" id="file_out_1" type="text" value="">
    <textarea class="copyCommandBlock" name="copyCommandBlock1" id="copyCommandBlock1"></textarea>
    <button type="submit" class="btnGenerate" id="btnGenerate1" data-idx="1">Generate command</button>  <- Button Javascript might act on
    <button type="submit" class="btnCopy" id="btnCopy1" data-idx="1">Copy</button>

<fieldset class="new_inputs" id="new_inputs2">
    <label for="file_input_2">Input File:2</label>
    <input class="fileRenamingFormInput" name="file_input_2" id="file_input_2" type="text" value="">
    <select class="fileRenamingFormSelect" name="destinationFile_2 id="destinationfile_2">...</select>
    <input class="fileRenamingFormFileOut" name="file_out_2" id="file_out_2" type="text" value="">
    <textarea class="copyCommandBlock" name="copyCommandBlock2" id="copyCommandBlock2"></textarea>
    <button type="submit" class="btnGenerate" id="btnGenerate2" data-idx="2">Generate command</button> <- Button Javascript might act on
    <button type="submit" class="btnCopy" id="btnCopy2" data-idx="2">Copy</button>

This is the JavaScript

    var idx = $(this).data("idx");

The logic I am seeking to employ is:

  • When "button.btnGenerate" is clicked, don't submit the form
  • assign data-idx to variable idx
  • once I have variable idx, I can more efficiently use it plus text strings to get form values from sibling or other form elements. For example, if var idx = 2;

    var fnIn = document.getElementById(fileinput'+'idx').value
    var fnOut = document.getElementById(fileout'+'idx').value
    var str = 'cp '+fnIn+' '+fnOut;
    document.getElementById('copyCommandBlock'+idx).value = str;

With the page loaded in the browser there could be ...

Is it possible to attach a jquery autocomplete input to a form initiated by ajax editing a table?

I have the following method for making a table cell editable using AJAX. I.e., user clicks on the cell and it transforms to a mini form. Hit Enter and the changes are sent to a script, updating a database and the new content is sent back to the table.

This code I am certain is error free and working. I want to expand functionality so the input for the new value comes into the DOM using jQuery ui autocomplete.

$(function (){
    $('tbody').on('click','td:not(.exclude)',function() {
        displayForm( $(this) );


function displayForm( cell ){

//start new, what I am attempting to expand
    var availableTags = [
        source: availableTags
//end new, what I am attempting to expand

    var column          = cell.attr('class'),
        column          = (column.indexOf(" ") > 0) ? column.substr(0, column.indexOf(' ')) : column,
        table           = cell.closest('table').attr('class'),
        id              = cell.closest('tr').attr('data-id'),
        striping        = cell.closest('div').attr('class'),
        cellWidth       = parseInt(cell.css('width'),10),
        cellWidth       = parseInt(cellWidth * .96).toString()+'px',
        rank            = cell.attr('data-rank'),
        prevContent     = cell.text(),
        method          = cell.attr('data-method'),
        form            = 
        //formatted here for legibility.  Otherwise, it is all one contiguous string
        '<form action="javascript: this.preventDefault">
            <input id="temp_ajax_form_input" style="text-align:center" type="text" name="newValue" size="4" value="' + prevContent + '">
            <input type="hidden" name="id" value="' + id + '">
            <input type="hidden" name="rank" value="' + rank + '">
            <input type="hidden" name="field" value="' + column + '"> ...


My profound apologies for my earlier reply and thanks for your solution.

The first reply to you regarding this answer was before a few cups of tea to get started. That lack of tea combined with a fuzzy head from looking for and trying different solutions yesterday and I couldn't wrap my head around what you had posted.

Rectifying those things and looking at the above, BAM! it works. Thank you!

rproffitt commented: Bam Bam goes Bam Bam Bam! +12

Thanks diafol but your method is premised on redfining the array different from how it is when I query the database.

I have 3 td's in a portion of a table. Sometimes, the data coming in from the database is less than 3. I need a method that will lay-out the data precisely compared to a rank in the table.

Ideal situation:

  |-name => Joe
  |-rank => 0
  |-name => Dick
  |-rank => 1
  |-name => Mike
  |-rank => 2


    <td data-rank="0">
    <td data-rank="1">
    <td data-rank="2">

Problem situation:

  |-name => Dick
  |-rank => 1
  |-name => Mike
  |-rank => 2


    <td data-rank="0">
    <td data-rank="1">


    <td data-rank="0">
    <td data-rank="1">
    <td data-rank="2">

This is the for loop I am running. I think I need the array function prev to move the pointer back but can not get my head around it.

for ($i=0; $i<3; $i++) {
    $a  = array("class"=>"genre", "data-rank"=>$i,"data-method"=>"update");
    $o .= $this->td_new($a);
    if ( array_key_exists($i, $r1) && ($r1[$i]['rank'] == $i)  ) {
        $o .= $r1[$i]['name'];
    } else {
        $o .= "&nbsp;";
    $o .= $this->td_close();
return $o;

With the above, I am ending up with 3 blank td's. Sub-functions like $this->td_open and $this->td_close work perfectly. Detail about exact output had been left out too keep things brief and focussed on where I need help. Instances the array is 3 keys, output is perfect.

Thanks for taking the time to read this.

I never said I was not in favour of upgrading to LibreOffice 5. This is not an issue whether upgrading to the most recent version has bearing. LibreOffice 5 like LibreOffice 4 still requires JRE or JDK to work which I stated from the outset is the challenge.

Side bar: There is indication LO developers will eliminate Java dependencies by moving to Python, but we have not reached that milestone yet.

I upgraded to LibreOffice 5 and am still getting the same message after going through the database wizard:

The connection to the data source "tst4" could 
not be established

SQL Status: HY000

The connection to the external data source could
not be established. No SDBC driver was found 
for the URL 'sdbc:embedded:hsqldb'.

You do the google research on that error and it comes back that Java is not working with LibreOffice 4 or 5.

I have tried both LibreOffice 4 or 5 with the various flavours of Java JDK or JRE installed on my system and nothing prevails as a solution.

@rproffitt: I looked at the video you suggested. Attached is a screen shot of when I start the database wizard LOBase.png

Doesn't matter if it is LO 4 or 5. Java of some form is required.

At the least, Java is required to use the internal database engine of LO. I am not trying to connect through a JDBC or ODBC to a MySQL database. I would need to resolve this anyway if I was connecting to an external database.

Still looking and hoping for help.

I am trying to create databases in Ubuntu 14.04 running LibreOffice 4.4.3 and can not due to not connecting with JRE or JDK.

Research carried out and things I have tried lead me to understand I need JDK-8 now instead of JRE. Is this accurate?

JDK-8 and Java 8 are installed. From the command prompt:

$ sudo update-alternatives --config java

  Selection    Path                                           Priority   Status
  0            /usr/lib/jvm/java-8-oracle/jre/bin/java         1081      auto mode
  1            /usr/lib/jvm/java-6-openjdk-i386/jre/bin/java   1061      manual mode
  2            /usr/lib/jvm/java-7-openjdk-i386/jre/bin/java   1071      manual mode
* 3            /usr/lib/jvm/java-8-openjdk-i386/jre/bin/java   1069      manual mode
  4            /usr/lib/jvm/java-8-oracle/jre/bin/java         1081      manual mode

$ sudo update-alternatives --config javac

  Selection    Path                                        Priority   Status
  0            /usr/lib/jvm/java-8-oracle/bin/javac         1081      auto mode
  1            /usr/lib/jvm/java-6-openjdk-i386/bin/javac   1061      manual mode
  2            /usr/lib/jvm/java-7-openjdk-i386/bin/javac   1071      manual mode
* 3            /usr/lib/jvm/java-8-openjdk-i386/bin/javac   1069      manual mode
  4            /usr/lib/jvm/java-8-oracle/bin/javac         1081      manual mode

From LibreOffice Menu Tools -> Options -> Advanced the following is chosen

Oracle Corporation 1.8.0_111 with path /usr/lib/jvm/java-8-openjdk-i386/jre

Parameters and Class Path sub-dialog boxes are empty also

Since I have several entries for java, I have tried each of them as an alternative and the corresponding entry under Tools -> Options -> Advanced

Thanks for taking the time to read this. Can anyone offer insight how to solve this?


Thank you for the reply. Your example did not address a key requirement: I have more than one table. From my post earlier this week:

Consider the following as an example of data. I would have anywhere from 1 to 20 such forms on a page.

Your structure of:

    function loadAll(targetField){

helped to solve the question of how to invoke the javascript. It may not be pretty and at this time probably clumsy but this is what I put together. The exact data model has changed from my earlier posts but this is the abbreviated gist of it:


<table data-dbrow="20">
        <td id="show_20"></td>
        <td id="production_number_20"></td>
        <td id="segment_20"></td>
        <td id="production_date_20"></td>
        <td id="release_date_20"></td>

The value held in the attribute data-dbrow could be anything from 1 to 800+


function genCommand() {
    var tableArray              = [];
    var tableArray              = document.getElementsByClassName('tuple');
    for (var i = 0; i < tableArray.length; i++) {
         var x                  = tableArray[i].getAttribute('data-dbrow');
         var show               = document.getElementById('show_' + x).innerHTML;
         var production_number  = document.getElementById('production_number_' + x).innerHTML;
         var segment            = document.getElementById('segment_' + x).innerHTML;
         var production_date    = document.getElementById('production_date_' + x).innerHTML;
         var release_date       = document.getElementById('release_date_' + x).innerHTML;
         var record             = document.getElementById('record_' + x).innerHTML;
         var filename_in        = document.getElementById('filename_in_' + x).innerHTML;
         var models_or_title    = document.getElementById('models_or_title_' + x).innerHTML;
         var link_path          = document.getElementById('link_path_' + x).innerHTML;

I am working on defining the many variables in an array that will be looped to define them. The key part is I now have a method to loop the 1-10 or 20 tables ...


Millions of ways of doing it though.

Can you show just one?

Since onload is not available, the challenge comes back to how do I initiate a function that will look at all form tags, for example, and read all data-id atrributes so I have an array I can loop through?

If I can form an array of all the database row numbers stashed in each data-id, I can grab the sets of id's, no?


It is a typo. Correction: copy error. It was valid in the source.

The browser is not even getting to that line. As stated above, the console.log value does not show and no errors are showing in the console.


Thank you for your second reply. Yes, I did try it.


<td colspan="5" data-id="1">
    <textarea id="textarea_1" onload="genCommand(1)" class="command" name="command"></textarea>


function genCommand(dbrow) {
    var message = 'test ' + dbrow;
    var target  = 'textara_' + dbrow;
    document.getElementById(target).value = message;

I loaded the browser and set a breakpoint in the debugger on the first line, then reloaded. The script does not fire. No pause by the debugger. No messages of syntax error in the console. No iteration of dbrow in the console. All textareas on the page are empty.

I am back to working on this project after a considerable hiatus working on other jobs. As in my original post, I am doing this project to expand the small amount of javascript skills I already have.

Consider the following as an example of data. I would have anywhere from 1 to 20 such forms on a page. This application is an expanded form of editing a database over simple columns along a row for the data is too wide at times to be visible on the width of a screen. As well, it is in a form for now for, eventually, I want to be able to edit the data using ajax in which clicking on a cell would become a form input.

This is an example of what I have designed based on research carried out so far. I am thinking it is the simplest based on my skill level and the precision it gives for drilling down through the DOM. If there is another way to do it that is simpler, I am open to it. Keep in mind though, I want to use vanilla javascript as much as possible for I plan on using jQuery for ajax I want to add later. I am not concerned about cross-browser compatibility. An admin tool, I only use most recent versions of Firefox or Chromium on Ubuntu.

<form id="row_105">
  <table id="table_105">
        <td id="show_105">
          show name
        <td id="production_number">
        <td id="sement_105">
        </td> ...

I am starting a project that has been managed using a spreadsheet until now but needs to be converted to a mysql/php application. The amount of rows in the spreadsheet has exceeded something that can be easily sorted, filtered and edited.

A particular field has a weak entity that is not worthy of its own field in the database. It concatenates data from other fields in the same database record plus some arbitrary text. I want to display this concatenation in a textarea for each record. The application will display anywhere from 1 to 10 rows on a screen page. Each record is a table. Only the Command syntax is a form element, in this case textarea. All other record data is static text rendered by php. Below is a depiction of the web page and each record.

| Record:          | 1                                                                             |
| FileName:        | This_is_a_file_name.mkv                                                       |
| Production Date: | 2010-02-28                                                                    | 
| Release Date:    | 2010-10-01                                                                    |
| Project ID:      | J0290                                                                         | 
| Command:         | mv /current_location/This_is_a_file_name.mkv \                                |
|                  |    /new_location/This_is_a_file_name-J0290-Prod_2010-02-28-Rel_2010-10-01.mkv |

| Record:          | 2                                                                             |
| FileName:        | Another_File_name.mkv                                                         |
| Production Date: | 2011-12-20                                                                    | 
| Release Date:    | 2012-03-15                                                                    |
| Project ID:      | H0500                                                                         | 
| Command:         | mv /current_location/Another_File_name.mkv \                                  |
|                  |    /new_location/Another_File_name-H0500-Prod_2011-12-20-Rel_2012-03-15.mkv   |

In the mark-up, I plan something like

I want to use Javascript on the textarea that renders the Command but am stuck getting started. Javascript is great ...

Two thumbs up @ pixelsoul

Thank you for this bit of redirection on my work. It solved the problem perfectly and now all 415 records (and growing) load as they should.

Thanks for the input. At least I know it's not an anomoly that the performance is different in two browsers nor that My problem can not be replicated