Alternative to bind?

dev support
1

Migrating a coldfusion project over to lucee I see bind is not supported. I have a lot of bind to cfc calls on my pages. I am wondering what alternatives there are for this? Any other recommended libraries or methods?

2

@spacerobot, Can you provide some code examples please?

3

What do you mean exactly with “bind”? Cfajaxproxy, cfdiv and other AJAX related cftags? You might get lucky using the Lucees Ajax Extension, which you can install from your Lucee Administrator, but these tags are considered deprecated. I’d rewrite that.

You might find some help seeing this Repository from cfjedi.

Also, you might want to look into HTMLX which might help you with an alternative.

4

Thanks! Looking at the cfjedi repo I am going to try to piece something together with the demos. Specifically looking for this:

<div>
    <label for="employeeid" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Employee ID</label>
    <input type="text" onblur="fetchData" name="employeeid" id="employeeid" class="bg-gray-50 border border-gray-300 text-sm text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Unique employee ID number" required="">
</div>
<div>
    <label for="employeename" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Employee Valid</label>
    <div class="relative">
        <input type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" id="employeename" name="employeename" value="" readonly="true">

    </div>
</div>

I enter an employee ID then onblur hit a cfc to validate the ID. If it is valid it returns the name of the person, if not it says it is not valid for whatever reason.

5

If I’d be new to all that stuff, and need a fast solution without knowing much about javascript or jquery, I’d use this htmlx example for that:

.</> htmx ~ Examples ~ Inline Validation

1 Like
6

I have found generic javascript is less hassle. Here is the sample code that would “just work”


> 
>     <input type="text" onblur="fetchData()" name="employeeid" id="employeeid" >


> <!---<script>
>   function fetchData() {
>     var employeeId = document.getElementById("employeeid").value;
>     
>     // Make an AJAX request to the CFC
>     var xhr = new XMLHttpRequest();
>     xhr.onreadystatechange = function() {
>       if (xhr.readyState === XMLHttpRequest.DONE) {
>         if (xhr.status === 200) {
>           var response = JSON.parse(xhr.responseText);
>           if (response.valid) {
>             document.getElementById("employeename").value = response.name;
>           } else {
>             document.getElementById("employeename").value = "Invalid employee ID";
>           }
>         } else {
>           // Handle error
>         }
>       }
>     };
>     
>     xhr.open("GET", "/path/to/getEmployeeID.cfc?method=validate&id=" + employeeId, true);
>     xhr.send();
>   }
> </script>

Then in a generic cfc, called getEmployeeID.cfc you would have 
> <cfcomponent>
>     <cffunction name="validate" access="remote" returnformat="json">
>         <cfargument name="id" type="string" required="true">
>         
>         <!--- Perform your validation logic here --->
>         
>         <cfset var response = {
>             "valid": false,
>             "name": ""
>         }>
> 
>         <!--- Check if the ID is valid and set the response accordingly --->
>         <!--- Example validation logic --->
>         <cfif id eq "3400">
>             <cfset response.valid = true>
>             <cfset response.name = "Mr Anderson">
>         </cfif>
>         
>         <cfreturn response>
>     </cffunction>
 </cfcomponent>

See above

1 Like
7

Thank you all for the suggestions! htmx was the sort of thing I was looking for and was super easy to get hooked up. I just had to set the following and the .cfc to query and return the right result depending on the ID status.

<input type="text" name="employeeid" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
hx-get="#buildURL('cardrequest.checkempid')#"
hx-trigger="blur"
hx-target="##search-results"
>
1 Like