This article on StackOverflow (and the documentation above) point to a more-error-checked call, using the .fail and .done syntax.

Thanks.

I assumed no SON errors because I was able to capture the data in an IFrame:

 
      var data = {"DD":"2019-01-01","DP":"0000-00-00","MD":"120.00","M
+J":"2018-01-01","address1":"1327 North St","address2":"Ste 242","busi
+ness":null,"city":"Deluth","comments":"This is an insert test with ac
+tion converted to sub calls","email":"tj@resolve.net","forename":"Tre
+vor","id":65,"lastname":"Johnson","password":"xmk1041","phone_cell":"
+(517) 269-1014","phone_home":"(414) 956-9219","pin":"TbwmJ","position
+":"General Member","state":"MN","user_id":65,"username":"bwm65","zip"
+:"36925-6647"};

loadJSONFormData(data);
[download]

and load in to form fields using loadJSONFormData(data). <.p>

So as I said, I assumed no error in the JSON data

I will explore further

And checking the console.log reveals:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.xxx.org/httpsdocs/cgi-bin/update_tables.cgi?action=updatetable_167&kind=0&searchterm=19. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

I would appreciate some insight here:

I am used to drop downs being bound to database fields

I have a select drop down on a form used to populate the insert/update query sent to the server.

<td><select required id="position" name="position" onChange="changeFla
+g(1)" >                      <option value="0">Select
<option value="1">Board Member  
<option value="2">Administration
<option value="3">General Member
</select></td>
[download]

When I repopulate the form field with JSON

$('form').loadJSON(data);

, I expect the data from the database field to be displayed. All the other form input fields are populated correctly.

By the way, this: onChange="changeFlag(1) is not calling anything. A dummy

In reading:

Populating form element Form is populated with JSON object using the following JavaScript call: $('form').loadJSON(data); This call matches object properties with the form elements by name and depending on the type of the form element populates value. Following rules are used while the form elements are populated:

Multiple selection lists

When plugin matches property with multiple selection list element, it expect that property is array of values that should be selected in the list. Plugin selects all values in the multi selection list that exist in the property of the JavaScript object.

Assuming that a "select" control comes under the definition of "Multiple selection lists", it sounds as if it would work and display the applicable JSON content.

I set up a test with a select where I use a button to change the "value" of the select index and that works fine.

Evidently, $('form').loadJSON(data), does not address the indexing as implied above.

Where in your question does Perl come into play?

I think your question is mostly about jQuery, which is off-topic here. You should first check that sending the appropriate (hard-coded) JSON works. Then you can debug your Perl code until it creates the same JSON.

If you don't know what the correct JSON to create is, no fudging on the Perl side of the world will help you. You will need jQuery expertise, which certainly can be found. But this is not the forum for jQuery expertise.

The data back from JSON includes "position":"3" so the information is there.

The javascript looks good:

(function ($) {
    $.fn.loadJSON = function (obj, options) {

        function setElementValue(element, value, name) {
            var type = element.type || element.tagName;
            if (type == null)
                return;
            type = type.toLowerCase();
            switch (type) {

                case 'radio':
                    if (value.toString().toLowerCase() == element.valu
+e.toLowerCase())
                        $(element).attr("checked", "checked");
                    break;

                case 'checkbox':
                    if (value)
                        $(element).attr("checked", "checked");
                    break;

                case 'select-multiple':
                    var values = value.constructor == Array ? value : 
+[value];
                    for (var i = 0; i < element.options.length; i++) {
                        for (var j = 0; j < values.length; j++) {
                            element.options[i].selected |= element.opt
+ions[i].value == values[j];
                        }
                    }
                    break;

                case 'select':
                case 'select-one':
                case 'text':
                case 'hidden':
                    $(element).attr("value", value);
                    break;
[download]

At a loss. I don't see "value as either a global attribute or an attribute of select.

Attributes defines: value <button>, <input>,

• , <option>, <meter>, <progress>, <param>

  So it is an attribute of option not select

Little complement: Fiddler might be helpful for debugging. Windows and Mac OS X only. See also Fiddler.

Update: A Linux beta build is also available.

Best regards, Karl

Everything working perfectly

Now on to more detailed enhancements

DELETE W/O THE ENHANCEMENTS WORKS - ENHANCEMENTS UNTESTED

"delete" code below is supposed to delete record and if successful grab the next or previous record to send back to populate the originating form. If neither exist send error flag back to caller which is supposed to intercept the "data" looking for flag.

If previous or next record exist, send that back along with flag added to hash before encoded by JSOAN.

Same with delete record failure

I want to intercept the "data" to find the flags, act on them and then remove those flags before sending data on to populate the form. Is there any problem with doing that?

      var inquiryQuery = "http://www.xxxxxx.org/httpsdocs/cgi-bin/upda
+te_tables.cgi?action=delete_Record&user_id=" + userid + '"';

      var data; 

      $.getJSON(inquiryQuery, 
      function(data){
      //Check data for status flag. If flag, remove and send data on t
+o form      
      
      
        loadJSONFormData(data);
     });
[download]

Code from perl module

sub delete_Record {
    my $userid = $query->param('user_id');
    my $json = JSON->new; 
    my $result;
    my $count;
    my %success;
    my $key;
    my $value;
    my ($sth, $stmt);    
    warn("Delete record based on user_id = '$userid'");

    #Delete the desired record 
    $key = "DeleteRecord"; 
    $stmt =    "DELETE FROM users WHERE user_id = ?";
    $sth = $dbh->prepare ($stmt) or die "Error Preparing:\n" . $stmt .
+ "\nDBI returned: \n", $dbh->errstr;
    $sth->execute ($userid) or die "Unable to execute query: " . $sth-
+>errstr;
    $value = (SELECT ROW_  COUNT());
    if ($value == 0) {
      %success{$key} = $value; #Add "0" FLAG Delete failed no other ac
+tion follows
      $json = JSON->new; 
      $json->canonical(1);
      $json = encode_json(\%success);
      print "Content-Type: application/json\n\n";
      print $json;
      warn("Finished print $json");    
        exit(0);
    }
    elsif ($value >= 1) {
      %success{$key} = $value; #Update FLAG "1" Delete success

      #check previous record
      $stmt = "SELECT * FROM users WHERE user_id <= (SELECT MAX(user_i
+d) FROM users WHERE user_id < ?) ORDER BY user_id DESC LIMIT 1";
      $sth = $dbh->prepare ($stmt) or die "Error Preparing:\n" . $stmt
+ . "\nDBI returned: \n", $dbh->errstr;
      $sth->execute ($userid) or die "Unable to execute query: " . $st
+h->errstr;    
      $result = $sth->fetchrow_hashref();
      $count = $sth->rows;
      warn("count 1st Pass = '$count'");
      if ($count == 0) {
           #check next record 
        $stmt = "SELECT * FROM users WHERE user_id >= (SELECT MIN(user
+_id) FROM users WHERE user_id > ?) ORDER BY user_id ASC LIMIT 1";
        $sth = $dbh->prepare ($stmt) or die "Error Preparing:\n" . $st
+mt . "\nDBI returned: \n", $dbh->errstr;
        $sth->execute ($userid) or die "Unable to execute query: " . $
+sth->errstr;    
        $result = $sth->fetchrow_hashref();
        $count = $sth->rows;
        warn("count 2nd Pass = '$count'");
        $key ="ReturnedRecord";
        if ($count == 0) {
          warn("No other record must have deleted last one"); 
          %success( $key => $count); #Add "0" FLAG Failed to return ne
+w record after successful delete        
          $json->canonical(1);
          $json = encode_json(\%success);
             print "Content-Type: application/json\n\n";
          print $json;
          warn("Finished print 0 count $json");    
          exit(1);
         }  
        elsif ($count == 1) {
           warn("count = '$count'");
          $json->canonical(1);
          %success( $key => $count); #Add "1" FLAG return new record s
+uccessful
          %result = (%result, %success); #add %success flags to $resul
+t          
          $json = encode_json(\%result);
            print "Content-Type: application/json\n\n";
          print $json;
          warn("Finished print $json");    
          exit(0);
         }
       }
      elsif ($count == 1) {
           warn("count = '$count'");
           $json->canonical(1);
        %result = (%result, %success); #add %success flags to $result 
+         
        $json = encode_json(\%result);
        print "Content-Type: application/json\n\n";
        print $json;
        warn("Finished print $json");    
          exit(0);
        }
    }  
}
[download]

Why not encode a structure than keeps the record data and the flags separate

  my $json = encode_json({
        record => $data,
        ReturnedRecord => $return_count,
        DeleteRecord   => $delete_count });
[download]

then no need to delete anything

var url   = ".../update_tables.cgi";
var param  = {
    "action":"delete_Record",
    "user_id":userid,
  };
  
  $.getJSON(url, param, function(data){
    if (data.ReturnedRecord){
      loadJSONFormData(data.record);
    }
  }
[download]

Read more... (1381 Bytes)
poj

Pretty slick. Lots of shortcuts particularly the UNION.

Thanks much

Maddeningly, JavaScript will spit out an error-message to its console and keep going.

I could not possibly disagree more and this sounds like it was written someone who doesn't even have 10 years of experience, let alone 30. JS would stop, even freeze the browser in the early days on meaningless errors and there were no built in, or even optional install, dev panels. That was objectively maddening and why I stayed away from JS for years till the tools and default behavior in browsers improved.

You can also pause on exceptions/errors and step through the code with all the modern dev panels so there is no excuse for complaining about how JS will keep going. That is a matter of choice for the professional developer.

Everything working as long as I remember to push the button FireFox

I guess my real issue is this:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.xxx.org/httpsdocs/cgi-bin/update_tables.cgi?action=updatetable_167&kind=0&searchterm=19. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Don't understand "cross origin" since all same domain

Actually, my problem. Running access from form served up from host, Ok with CORS off. Running on HTML editor is the problem

Sorry for the shortsightedness