Dynamically output Bootstrap modal

Question

Can anyone explain how I can structure my CF component/output page to utilise the Bootstrap modal display dynamically? The code below works but I need the modal window to display only the output relating to the ‘cat_ID’, at the moment it displays all or some results, but never just those relating to that specific iteration of the 'cat_ID' Many thanks in advance...

<!---invoke services.cfc ---> 
<cfinvoke component="components.services" method="getServices" returnvariable="services"> 
</cfinvoke> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <!-- Bootstrap core CSS --> 
    <link href="dist/css/bootstrap.css" rel="stylesheet"> 
    <http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Services</title> 
  </head> 

  <body> 
    <div class="container"> 
      <!-- Example thumbnail + text --> 
      <cfoutput query="services" group="cat_ID" groupcasesensitive="no"> 
        <div class="col-md-3"> 
          <div class="thumbnail"> 
            <img src="images/some.jpg"> 
            <div class="caption"> 
              <h4>#cat_ID#</h4> 
              <p>#type_en#</p> 
              <p><button class="btn btn-default" data-
 toggle="modal" data-target="###cat_ID#">View Details »</button></p> 
            </div> 
          </div> 
        </div> 
      </cfoutput> 

      <!-- Modal --> 
      <cfoutput query="services"> 
        <div class="modal fade" id="#cat_ID#" tabindex="-1" role="dialog" aria-labelledby="One" aria-hidden="true"> 
          <div class="modal-dialog"> 
            <div class="modal-content"> 
              <div class="modal-header"> 
                <button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button> 
                <h4 class="modal-title" id="myModalLabel">#title_en#</h4> 
              </div> 
              <cfoutput>        
                <div class="modal-body">        
                  #company# <br /> 
                  #title_en# 
                  #Replace(desc_en, chr(13), '<br>','ALL')#<br />       

                </div> 
              </cfoutput> 
            </div><!-- /.modal-content --> 
          </div><!-- /.modal-dialog --> 
        </div><!-- /.modal --> 
      </cfoutput>       
    </div> 
    <!-- Bootstrap core JavaScript 
         ================================================== 
    --> 
    <!-- Placed at the end of the document so the pages 
         load faster --> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="dist/js/bootstrap.min.js"></script> 
  </body> 
</html>

The ‘services.cfc’ component:

<cfcomponent displayname="Services" hint="ColdFusion Component for showing services">
<!--- This function retrieves all services from the database ---> 
  <cffunction name="getServices" hint="Gets services from the database" returntype="query"> 
    <cfquery name="services">   
      SELECT * 
        FROM dbo.services 
    ORDER BY cat_ID      
    </cfquery> 
    <cfreturn services> 
  </cffunction> 
</cfcomponent>

score 0 · Answer 1 · answered Feb 11 '14 at 10:13

0

Within your modal you have this line of code: <cfoutput query="services">, That will loop over everything in the services query, further to that you have no control as to when to output and when to stop.

Where you have the button to bring up the modal, you need to pass through the cat_id you're interested in, and then in the modal you can do something like:

<cfoutput query="services">
  <cfif cat_id eq url.cat_id>
    <!--- display information relating to the cat --->
    <cfbreak>
  </cfif>
</cfoutput>

answered Feb 11 '14 at 10:13

Jarede

3,310
4
44
68

Ok, I thought as much, I tried data-target="###cat_ID#?cat_ID=1"....which obviously broke it, but wasn't sure if I should take a whole new approach. Thanks, will try to figure method for passing the cat_ID... – Shalinko Feb 11 '14 at 10:22
@Shalinko you might wish to look at this Q+A http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal – Jarede Feb 11 '14 at 10:27
thanks, heavy duty stuff for me, but looking forward to tweaking the code for my use – Shalinko Feb 11 '14 at 10:35
oh wait, just rereading your code, i made a mistake, you're outputting a modal for every row in the services query. In which case my answer is wrong. – Jarede Feb 11 '14 at 10:43
So actually it's impossible? I need to output the 'thumbnails' (as bootstrap call them) according to the 'services' output query on the main page, then have one seperate modal with a fixed id but all the content is added dynamically according to the passed cat_ID.....does that sound right? – Shalinko Feb 11 '14 at 12:03
No not impossible, Will have to look at why it's not picking up the correct ID. Sorry this is my fault for not reading the code properly. – Jarede Feb 11 '14 at 15:43

Mag · Answer 2 · 2014-02-14T16:44:06.813

0

You have a Bootstrap dependency so you might as well take advantage of Ajax. Add a second function to your CFC to grab a single cat_id record.

<cffunction name="getServices" hint="Gets services from the database" returntype="query"> 
  <cfargument name="cat_ID" required="yes">
  <cfquery name="service">   
    SELECT * 
      FROM dbo.services
      WHERE cat_ID=#arguments.cat_ID#    
  </cfquery> 
  <cfreturn services> 
</cffunction>

Create a new file and call it modal.cfm and have it generate a single modal using a cat_ID passed in as a URL param using your new function above combined with your current modal code.

Add Bootstrap Modal's href attribute to the button in your first loop (this automatically calls Jquery's Ajax Load) and include the cat_id as a query param passing the cat_ID to the function above via URL param. Generate a single modal dynamically. You should be able to test this page independently of the calling page with any of your IDs.

<button class="btn btn-default" data-toggle="modal" href="modal.cfm?catid=#cat_ID#" data-target="##modal">View Details »</button>

This will also increase your initial page load performance. Don't forget to sanitize your URL params!

EDIT: per your comment replace the entire modal block in your first CFML page with this:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="One" aria-hidden="true">
    <div class="modal-dialog"> 
        <div class="modal-content">
        </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div>

The modal.cfm should only contain the output to be injected in to the "modal-content" div per Boostrap docs so your code in modal.cfm should look something like:

<cfoutput query="services">
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title" id="myModalLabel">#title_en#</h4> 
</div>       
<div class="modal-body">        
    #company# <br /> 
    #title_en# 
    #Replace(desc_en, chr(13), '<br>','ALL')#<br />       
</div> 
</cfoutput>

Note that we removed the extraneous cfoutput from modal.cfm and we have changed the modal div ID to "modal" from "cat_ID" because we may not have to worry about a unique ID in this scenario.

edited Feb 14 '14 at 16:44

answered Feb 13 '14 at 00:53

Mag

101
3

Thanks Mag, but I can't get that to work at the moment. Is there no way to utilise data-id="3" or data-message="3" which are populated from the db with each cat_ID, to pass that into the modal and then query the db with a cat_ID? I think I gotta read up on my jQuery!! – Shalinko Feb 13 '14 at 09:33
@Mags going through what you suggested but can't get the modal to pop open at all. View source of modal.cfm does indeed show correct output. modal.cfm invokes the function, then I output data into modal on same page...am I getting that right? – Shalinko Feb 14 '14 at 07:13
Take a look at my edits above. That should work for you. – Mag Feb 14 '14 at 19:29
thanks for your time on this, but I'm probably out of my depth with it....I just don't get how you're 'injecting' the data into the modal.cfm...am I supposed to use ajax? Sorry for being so dumb! :D I got it working using an iframe in the modal: I don't like this as it seems to defeat the object of using java/ajax etc. plus the modal window doesn't resize to content it just adds a scroll bar. But until I learn how to use java/ajax, it'll have to do!! – Shalinko Feb 17 '14 at 08:19
Boostrap has already provided the Ajax functionality you need just by adding the "href" attribute to your button code as I show above. Boostrap automatically spawns a JQuery "load" function for the given URL which in the case above is "modal.cfm?catid=#cat_ID#". If you copy and paste what I show it should "just work" no extra JS required! – Mag Feb 18 '14 at 17:01
Thanks, I admire your patience...but I did everything as you suggest and now the whole screen just fades like a modal!!? – Shalinko Feb 19 '14 at 10:12
Doh! Just been reading up on the jquery load function....NOW I GET IT! Thanks, should have it working soon...;) – Shalinko Feb 20 '14 at 06:18
Nooo! still not working!! Isn't this what I need to 'insert' the modal2.cfm data into my modal-content div?? ? – Shalinko Feb 20 '14 at 06:58
or this... ? Still getting nought... – Shalinko Feb 20 '14 at 11:09
You do not need to write ANY new JS at all. The jQuery "load" is called AUTOMATICALLY by Boostrap.js when you include the "href" attribute in your button as I show in the "button" snippet in my answer above. Look at the "usage" section of the [Boostrap documentation](http://getbootstrap.com/javascript/#modals). Specifically the "options". – Mag Feb 20 '14 at 17:27
ok, that's what was confusing me, I do read the docs but couldn't find that bit about injecting the content automatically into modal-content div! Now it kind of works....I click the button but the whole screen darkens (as per modal), there is no clear white modal window, and the output is visible across whole of screen. Also, consecutive clicks on other buttons only bring up the same modal info (same cat_ID) but if I refresh and click a different button it brings up info using correct cat_ID? Here's a link if you have time: http://www.castleweddings.cz/4/index2.cfm – Shalinko Feb 21 '14 at 07:13
I did a very simple mock-up page ... page with button and modal with href to some.cfm to inject some simple text into modal, and I get exact same result no modal window, darkened screen with output text accross whole screen..?? – Shalinko Feb 21 '14 at 07:46
After reading of some issues regarding compatibility, i downloaded v3.1.1.js and now I have normal modal display with relevant cat_ID...BUT!!!! I need to refresh page between each click, otherwise the cat_ID stays the same regardless of which button I click!! – Shalinko Feb 21 '14 at 08:40

score 0 · Accepted Answer · answered Mar 03 '14 at 09:49

Finally cracked it! I put the same cfoutput query around the whole modal in the calling page and used the cat_ID in modal id to correspond with cat_ID of each thumb. Not sure if this is the best way/only way, but it's the only way I could get it to work. Thanks again for all your help!

Dynamically output Bootstrap modal

3 Answers3