http://coldfusion.com logo
Join Slack
Powered by
g
Sorry
r
You are probably asking how to do an ajax call
Let me whip up an example
g
It has to be ajax to be inside the modal?
r
Nope, you can attach an event handler to a button anywhere on the page and cause that to do the ajax call
g
Yeah, so it has to be an ajax call to submit the form inside the modal? Can't just be an http post?
r
Copy code
<div class="container">

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">Add Child to this Group Reg</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add Child to this Group Reg</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
  			<div class="input-group mb-3">
  			  <input type="text" class="form-control" id="last_name" placeholder="Lastname" aria-label="LastN" aria-describedby="basic-addon1">
  			</div>
	        <button class="btn btn-default" data-bs-dismiss="modal" id="search_button">Search</button>
        </div>
      </div>
    </div>
  </div>
</div>
 

<script>
	// i assume you are using jquery here

  $('#search_button').on('click', (evt) => {

    var search_term = $('#last_name').val();

    $.ajax({
      method: 'POST',
      url: '/docs/divs/action/act_childSearch.cfm',
      data: {
        lastName: search_term
      },
      success: (resp) => {
        // hand the resp here by updating the DOM
      },
      error: (err) => {
        //handle you error here
      }
    })

  });
</script>
I am using bootstrap v5 so i had to update some of the 
data-dismiss
and 
data-toggle
attributes
but this should get you on the right track
You would also want to sanitize the search term a bit, and maybe also add a loading notification while the ajax call is processing
you dont need a form at all in this context
g
The dialog isn't even opening when I use your html
r
Try this
Copy code
<div class="container">

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Add Child to this Group Reg</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add Child to this Group Reg</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
  			<div class="input-group mb-3">
  			  <input type="text" class="form-control" id="last_name" placeholder="Lastname" aria-label="LastN" aria-describedby="basic-addon1">
  			</div>
	        <button class="btn btn-default" data-dismiss="modal" id="search_button">Search</button>
        </div>
      </div>
    </div>
  </div>
</div>
 

<script>
	// i assume you are using jquery here

  $('#search_button').on('click', (evt) => {

    var search_term = $('#last_name').val();

    $.ajax({
      method: 'POST',
      url: '/docs/divs/action/act_childSearch.cfm',
      data: {
        lastName: search_term
      },
      success: (resp) => {
        // hand the resp here by updating the DOM
      },
      error: (err) => {
        //handle you error here
      }
    })

  });
</script>
g
OK, the dialog opens. So what does my act_childSearch.cfm have to do?
Just return a query?
r
It can return what you want to return. A csv, a json object, plain text, html anything
you will just need to handle that data correctly in the success method of the ajax call
its really up to you
g
I want to display records. I guess html.
r
in that case you could do something like this in your success method
Copy code
success: (resp) => {
        // hand the resp here by updating the DOM
        $('#someDivId').html(resp);
      },
g
What is the jquery code going to do with it?
Ah, OK
Thanks, lemme try it.
r
No problem. Im headed out to lunch so ill be back in an hour if you need more help
g
I'm kinda struggling with this. Can I just use a cfm file, or does it have to be a cfc call?
r
you sure can. So for example, in act_childSearch.cfm you could do something like this
Copy code
<!--- act_childSearch.cfm --->

<cfquery name="getChildren">
  SELECT * 
  FROM children
  WHERE last_name LIKE '%#form.lastName#%'
</cfquery>

<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>First</th>
      <th>Last</th>
      <th>Code</th>
    </tr>
  </thead>
  <tbody>
    <cfoutput query="getChildren">
      <tr>
        <td>#getChildren.id#</td>
        <td>#getChildren.first_name#</td>
        <td>#getChildren.last_name#</td>
        <td>#getChildren.code#</td>
      </tr>
    </cfoutput>    
  </tbody>
</table>
When the 
$.ajax
call returns, that html will be available in the in the 
resp
object, and you insert that html (plain text) into a div which alters the DOM of the webpage
You can also use a cfc if you wish aswell, there is not really an incorrect answer here.
g
Yeah, I tried just that. Nothing appears in the <div id="someDivId"></div>
r
Open up your devs tools (f12) and click on the 
network
tab and search for the http request. You should see what response you are getting.
g
What is this? data: { lastName: search_term },
What will my search term variable be in act_childSeaarch.cfm?
What scope?
r
that is the 'form' data you are passing along with the http request to 
act_childSearch.cfm
you can access that via 
form.lastName
g
K, do I need a "name" attribute in my text input though?
r
No, the 
name
attributes are only required when you use a form element. When the form is submitted those will be the names of the keys that are passed to the server
g
OK, I see a 500 error in the Network tab.
But I can't tell what the error is.
Oh wait, I got a response!
r
Ok. Now you can click on
g
Had a typo.
r
Yeah you can click on the different tabs to get a whole bunch of information. The Preview tab will show the rendered html (if the response is actually html)
g
Hey, is there a way to make the dialog bigger for the response?
r
Sure, depending on what version of bootstrap you are using you could probably add a class to change it appearance, or you could specify custom CSS
do you know what version you are on?
g
Bootstrap v3.3.7
r
you should be able to add 
modal-lg
to the div with the class 
modal-dialog
g
OK, now for the important part. Can I make these records links when I click one it will close the modal, and report the page with the unique identifier for the record clicked?
data-dismiss="modal" will close the modal right? But how to repost the main page?
r
So for bootstrap 3 you can do this
Copy code
// use this to the hide modal
$('#myModal').modal('hide')

// use this to the show modal
$('#myModal').modal('show')
g
OK, but would I make an html link for each record?
Sorta like you did with the button? Could put this js inside the output loop. $('#search_button').on('click', (evt) => {
I got it!
Had to pass another variable into the searchChild thing, and made that work. Then got the link to close the modal and post the selection to the page. Thanks a bunch. This is kinda fun!
r
Good morning. Glad you got that sorted
5 Views
Open in Slack
PreviousNext
Powered by