0 Replies Latest reply on Jan 10, 2014 8:48 AM by gwarmonger

    Serialize a form submission

    gwarmonger

      I have a form (working on someone else's messy app that is no longer at my work so I am a bit confused at what they did) that prints out list items from a database. There is a button to add an entry then save it to the database. I have that working. Each item that is already in the database has an id of "sort_serialize" which had a unique number appended to it upon submission like "sort_serialize_103".  But that is no longer working. The new additions get added to the database without the appended number. I am not sure how to make that work. 

       

      I've been trying to use JQuery "serialize" on them but I can't get that to work. If it were up to me, I'd have used MySql and just used Autoincrement on an ID column but we are using Oracle which does not have Autoincrement. Oracle has the features "Triggers" and "Sequences", neither of which I know how to use. Does anyone have any ideas on this. I put some code below....it's a bit of a mess (like I said, I didn't write this app or I'd have a better idea of what is happening).

       

      There are buttons, one button "EDIT" adds the "contenteditable="true" allowing to click and edit an item in place. That works, but I don't know how to submit it to update the database.

       

      Another button, "SORT" removes the contentedible and adds a "sortable" class from JQUERY and allow the items to be dragged and dropped. "Serialize" is also being called on this items. The idea is to be able to save the new order to the database, but it is also not working.

       

      And finally the "ADD" button creates a new LI item with edit in place.

       

      Each item has it's own SAVE button with it's own form ACTION. Each save button gets displayed with the click of the above buttons.

       

      The editing, the sorting, the adding item works but nothing saves to the database except the add item (but without it's unique ID).

       

      Sorry, that is a lot of stuff but I am very stumped here. Thanks in advance.

       

       

      Page code

      <script type="text/javascript"> 
      //  $(function() {
      //    // create a reference to our list
      //    $sortable = $("#sortable");
      //    // make our list sortable
      //   $('#sortme').sortable({
      //        update: function(event, ui){
      //        var postData = $(this).sortable('serialize');
          //    console.log(postData);
              //}
          //});
      //    // disableSelection is a handy (as yet undocumented feature)
      //    // of jQuery UI that stop the user being able to select the text inside the element
      //    $sortable.disableSelection();
      //    // bind the 'sortupdate' event to our list
      //    // sortupdate only fires when the user stops sorting the element
      //    $sortable.bind('sortupdate', function(event, ui) {
      //     // console.log($(this).sortable("serialize"));
      //      $.post(
      //        "remote.cfc", 
      //        {method:"reorder", data:$(this).sortable('serialize')}
      //      );
      //    });
      //  });
      
      
      var sortableLinks = $("#sortable");
      $(sortableLinks).sortable();
      var linkOrderData = $(sortableLinks).sortable('serialize');
      
      </script>
      </head>
      <body>
      <cfset application.dsp = 'display: none;'>
      <cfif isdefined('url.id')>
        <cfset id = #url.id#>
        <cfquery datasource="db_cie" name = "qGetFacultyCV">
          select a.fname, a.lname, b.full_citation, b.pub_date, b.id, b.faculty_id
          from nrc_faculty a, publications b
          where a.faculty_id = #id#
          and a.faculty_id = b.faculty_id
          order by sort_order, a.lname 
              </cfquery>
        <!---    <cfoutput> #qGetFacultyCV.faculty_id#</cfoutput>
      <!------>    <cfif '#qGetFacultyCV.full_citation#' NEQ ''>
      --->
        <cfset thisString="#qGetFacultyCV.id#">
        <h1>
        Edit CV For: <cfoutput>#qGetFacultyCV.lname#, #qGetFacultyCV.fname#
          </h1>
        </cfoutput>
        <h3>Select publication to edit:</h3>
        <cfoutput> 
          <!---  <input name="faculty" type="hidden" value="#id#" />---> 
        </cfoutput>
        <form action="update-sort.cfm?faculty_id=<cfoutput>#qGetFacultyCV.faculty_id#</cfoutput>" name="sort_serialized"method="post" id="frm-sort">
        <ul id="sortable">
          <li></li>
          <cfloop query="qGetFacultyCV">
            <cfoutput>
              <li "id="section_id_#qGetFacultyCV.id#" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>#qGetFacultyCV.full_citation#</li>
            </cfoutput>
          </cfloop>
        </ul>
        <input type="submit" id="deleteBtn"name="delete" value="Delete Publication" />
        <input type="submit" id="saveBtn" value="Save" style="display:none" OnClick="document.forms['sort_serialized'].action = 'addaction.cfm'" >
        <input type="submit" id="editBtn" value="Save" style="display:none" OnClick="document.forms['sort_serialized'].action = 'updateaction.cfm'">
        <input type="submit" id="sortBtn" value="Save" style="display:none" OnClick="document.forms['sort_serialized'].action = 'update-sort.cfm?faculty_id=<cfoutput>#qGetFacultyCV.faculty_id#</cfoutput>'" >
        <input type="hidden" name="sort_serialized" id="sort_serialized" value="" />
        <input type="hidden" name="faculty_id" id="faculty_id" value="<cfoutput>#qGetFacultyCV.faculty_id#</cfoutput>" />
        <!---<cfelse>
          <h1>This faculty member has no publications on record.</h1>
          <input type="submit" name="add_pub" value="Add Publication" />
        </cfif>--->
      </cfif>
      </form>
      <button id="editbutton">Edit</button>
      <button id="sortbutton">Sort</button>
      <button id="addbutton">Add Publication</button>
      <h3 id="drag" style="display:none">Click and drag to sort.</h3>
      <h3 id="edit" style="display:none">Click and type to edit.</h3>
      <script type="text/javascript">     
      
      $('#frm-sort').submit(function(){
        $('#sort_serialized').val($('#sortable').sortable('serialize'));
      });
      
       </script>
      

       

      "Add" action

       

      <cfinsert datasource="db_cie" TableName="PUBLICATIONS" formFields="id,full_citation, faculty_id">
      <cflocation 
          url = "http://www4.uwm.edu/cie/nrc-edit/editcv.cfm">
      

       

      "Edit" action

       

      <cfinsert datasource="db_cie" TableName="PUBLICATIONS" formFields="id,full_citation, faculty_id">
      <cflocation 
          url = "http://www4.uwm.edu/cie/nrc-edit/editcv.cfm">
      

       

      "Sort" action

       

       

      <!--- <cfif StructKeyExists(form, "sort_serialized")>
      
        <cfset variables.id = ReReplaceNoCase(form.sort_serialized, "(&){0,1}section_id\[\]=", ",", "all") />
      
        <cfloop from="1" to="#ListLen(variables.id)#" index="index">
      
          <cfquery name="qryOrder" datasource="db_cie">
            update publications set
             sort_order = <cfqueryparam value="#index#" cfsqltype="cf_sql_integer" />
            where id = <cfqueryparam value="#ListGetAt(variables.id, index)#" cfsqltype="cf_sql_integer" />
          </cfquery>
      
        </cfloop>
      <!--- <cflocation url="http://www4.uwm.edu/cie/nrc2/getcv.cfm?faculty_id=#faculty.id#">
      ---></cfif>
      --->
      
      <cfinsert datasource="db_cie" TableName="PUBLICATIONS" formFields="id,full_citation, faculty_id">
      <cflocation 
          url = "http://www4.uwm.edu/cie/nrc-edit/editcv.cfm">