asked on

How to set select value in select2 plugin using ColdFusion and ajax

Good day,

I have a ColdFusion program which uses an ajax call to populate a SELECT2. The ajax starts populating the SELECT2 after the 3rd character has been entered. What I am looking for is to display the selected value in SELECT2 after the submit button has been pressed. In other words, assume the word “play” is entered. After the submit button has been pressed, I would like to show “play” in the SELECT2. Below please find the CFM and CFC I am using. Any help is greatly appreciated.

comboBoxSelect2Json.cfm
======================

<SCRIPT LANGUAGE="JavaScript">
    function prcForm (form) {
       document.forms[0].action = 'comboBoxSelect2Json.cfm';
       document.forms[0].submit();
    }
</SCRIPT>

<cfif  NOT structKeyExists(form, "hdnMortgCashRMaint00")>
	<cfset valMortgCashRMaint00 = "">
<cfelse>
	<cfset valMortgCashRMaint00 = hdnMortgCashRMaint00>
	<cfdump var = "#itemName#">
</cfif>


<html lang="en">
    <head>
        <title>Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    </head>
    <body>
        <cfform name="vldContactInfo" method="post" action="">
            <div style="width:520px;margin:0px auto;margin-top:30px;height:500px;">
                <h2>Select Box with Search Option Jquery Select2.js</h2>
                <select class="itemName form-control" style="width:500px" name="itemName"></select>
                <INPUT TYPE="button" NAME="btnSubmit" Value="Submit" onClick="prcForm(this.form)">
                <input type="hidden"  name="hdnMortgCashRMaint00"  size="45"  value=
                <cfoutput>"#valMortgCashRMaint00#</cfoutput>
                ">	
            </div>
        </cfform>
        
        <script type="text/javascript">
            $('.itemName').select2({
              placeholder: 'Select an item',
              minimumInputLength: 3,
              ajax: {
                url: 'jSonAutoComplete.cfc?method=lookupName2&returnformat=json',
                dataType: 'json',
                 data: function (params, page) {
                            console.log(params);
                 	
                    return {
                       parmSearch: params.term
                    };
                 },
                delay: 250,
                processResults: function (data) {
                  return {
                    results: data
                  };
                },
                cache: true
              }
            });
            
        </script>
    </body>
</html>

Open in new window

jSonAutoComplete.cfc
==================

<cffunction name="lookupName2" access="remote" returntype="String" >
	    <cfargument name="parmSearch" type="any" default="">
	

		<cflog text="#parmSearch#" file = "jSonAutoComplete" >	

	
		
		<cfset myVar = structNew()>
		<cfset myVar.aResult=ArrayNew(1)>
		<cfset myVar.qry="">
		<cfset myVar.returnStruct = "">	
	
	    
	    <cfquery name="myVar.qry" datasource="pftsadata">
	        SELECT 
	        	luId, 
	        	luLookupName
	        FROM 
	        	userLookup

Open in new window

Julian Hansen

What happens when you press submit? Does this submit the form and if so how

A) Normal form post
b) AJAX

If (A) then what happens after the form is submitted - do you come back to the same page?

It is not really clear what you are asking. It sounds like "How do I display the selected value in a <select> after the form has been sent to the server (submitted) and is then re-rendered"

Is this the case?

_agx_

(no points...)

>> and is then re-rendered
@Julian Hansen - Sounds like it, yes. I ran the code Errol Farro posted and it does a normal form submit, to the same page.

Julian Hansen

@_agx_
So what he needs to do is record the select value and then set the default value when he re-renders the page. Needs someone with CF knowledge to help him - any chance you can pick it up

SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Errol Farro

ASKER

That is exactly what I need.

The value is indeed returned as stated in the

<cfif structKeyExists(FORM, "itemName")>
do something with the FORM.itemName value here
</cfif>

I need the FORM, "itemName" to be filled in the select2 after the form has been submitted

Example
User type "happy" which has a value of 12
When the user presses submit, value 12 is returned in form.itemName
I need the select2 to be filled with value 12 and display "happy"

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

_agx_

(no points...)
@leakim971 - Well that's refreshingly simple :) If that's all it needs, you can get rid of the extra variable, and just do this.

<select class="itemName form-control" style="width:500px" name="itemName">
<cfif structKeyExists(form, "itemName")>
<cfoutput><option value="#form.ItemName#">#form.ItemName#</option></cfoutput>
</cfif>
</select>

Julian Hansen

@leakim - thank you that is what I was trying to say - just don't speak ColdFusion

_agx_

Yeah, I was too focused on thinking it had to be done with javascript I missed the obvious ;-)

Errol Farro

ASKER

Many thanks gents - this is exactly what I was looking for !!!!!!