• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Serialize a form submission

Explorer ,
Jan 10, 2014 Jan 10, 2014

Copy link to clipboard

Copied

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">

Views

866

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation
Resources
Documentation