Solved

.load() breaks form submission

Posted on 2016-10-11
7
23 Views
Last Modified: 2016-10-17
I have a a <div> "popup" if you will.  By using a table cell onClick event, I am currently executing the .load() method to change the <div> contents to a form that contains a <div> "button" using an onClick submit() method.

The problem is that when I submit the form, my handler page is

Open in new window

throwing an error stating that certain form variable are undefined.  In other words, the data isn't being passed for SOME of the form values.  However, some do get passed.

When I load the raw form in the browser, it works fine.  

CODE:

-------------Form .load() code:-------------

<td id="addNew">Add New...
        <script>
            $("#addNew").on("mouseup", function() {       
            $("#currentAppts").load("calendar_appNew.cfm?appDate=#todaysDate#");
      });
      </script>
</td>

----------------------------------------------------

-------------Form .ajaxSubmit() code:-------------

<div id="appSave" onclick="$("#newApp").ajaxSubmit({url: 'calendar_appInsert.cfm', type: 'post'});">Save</div>

----------------------------------------------------
0
Comment
Question by:Brian Coughter
  • 4
  • 3
7 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41838793
I don't think you have given us all the pieces of the puzzle.

ajaxSubmit is not a standard AJAX method - so it is probably from a library perhaps this one http://jquery.malsup.com/form/? But we are guessing - you need to provide more information.

We need to see the code in context for instance is the following code in page already or returned by the AJAX call.
<div id="appSave" onclick="$("#newApp").ajaxSubmit({url: 'calendar_appInsert.cfm', type: 'post'});">Save</div>

Open in new window


Best way forward - shows us the full html source (from a view source - not your CF source) so we can see what is going on.
0
 

Author Comment

by:Brian Coughter
ID: 41839340
I think I'm just all confused on this.  What I need to do is submit form data from a form that was loaded into a <div> using the .load() method.  Below is the code that works for loading the form template:

$("#myDiv").load("formTemplate.cfm")

This is working fine.

When I submit this form, I am getting an error that not all the variables from the form inputs are being passed.  Is this a problem with loading the form using the .load() method?  Is there a better way to show a form in a <div> ?
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41839568
Need to see the full code. You can describe the problem but there is no guarantee you won't leave anything out. We frequently see questions on EE where the author describes the problem and then later mentions something seemingly inconsequential which is key to the problem. The more you post the more we can help.
So, post your initial page code - not CF code - browser code - view source.
When the form has loaded go to your console (F12) expand the POST entry there and copy the HTML return from the HTML window and post that.
Finally post a full description of the error you are getting with any errors output.

As I mentioned before - you appear to be using a JavaScript library you have not given details about - for all we know that is the cause of the problem.

For instance
<div id="appSave" onclick="$("#newApp").ajaxSubmit({url: 'calendar_appInsert.cfm', type: 'post'});">Save</div>

Open in new window

Not sure what the advantages of using ajaxSubmit over using JQuery's $.ajax() method - but unless there is something in the ajaxSubmit function that adds the form data to the request then that would appear to be a potential source.
Another possibility is the form you are sending back does not have its controls named correctly.
Yet another possibility is that because the form is loading dynamically the ajaxSubmit is not binding to it because at the time the initial page loads the form does not exist - which would mean you would have to do the binding after the load and not as part of the main page.

At this stage we simply cannot tell because you are not giving us the full picture.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:Brian Coughter
ID: 41840037
Ok.  This is a calendar app.  Here's the page source after getting returned to the browser from CF.

<script src="https://use.typekit.net/gry4uod.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>



<link href="css/calendar.css" rel="stylesheet" type="text/css">


<table id="calTable" border="0" width="auto" height="auto">
<thead>
    <tr>
        <th colspan="7" height="100px">
            <a href="?dateObj=9/1/16" title="previous month"><img src="images/cal_left.png" width="56" height="56" alt=""/>&nbsp;&nbsp;&nbsp;</a>
          <span id="hmo">OCTOBER</span>&nbsp;&nbsp;&nbsp;<span id="hmy">2016</span>
            <a href="?dateObj=11/1/16" title="next month">&nbsp;&nbsp;&nbsp;<img src="images/cal_right.png" width="56" height="56" alt=""/></a>
        </th>
    </tr>
    <tr id="wdn" bgcolor="#535353" height="43px">
    
        <th>SUN</th>
    
        <th>MON</th>
    
        <th>TUE</th>
    
        <th>WED</th>
    
        <th>THU</th>
    
        <th>FRI</th>
    
        <th>SAT</th>
    
    </tr>
</thead>
<tbody>
    <tr>
    
        <td colspan="6" bgcolor="#EEEEEE">&nbsp;</td>
    
        	<td style="cursor:pointer" class="otherDays" id="dd1"><div style="cursor:pointer" id="dayNum1">1</div>
            	
                
				<script>
				$( "#dd1" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd1" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd1" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-01")
				$("#editDateDiv").html("10/1/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
            </tr>
            
                <tr>
            
        	<td style="cursor:pointer" class="otherDays" id="dd2"><div style="cursor:pointer" id="dayNum2">2</div>
            	
                
				<script>
				$( "#dd2" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd2" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd2" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-02")
				$("#editDateDiv").html("10/2/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd3"><div style="cursor:pointer" id="dayNum3">3</div>
            	
                
				<script>
				$( "#dd3" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd3" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd3" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-03")
				$("#editDateDiv").html("10/3/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd4"><div style="cursor:pointer" id="dayNum4">4</div>
            	
                
				<script>
				$( "#dd4" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd4" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd4" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-04")
				$("#editDateDiv").html("10/4/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd5"><div style="cursor:pointer" id="dayNum5">5</div>
            	
                
				<script>
				$( "#dd5" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd5" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd5" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-05")
				$("#editDateDiv").html("10/5/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd6"><div style="cursor:pointer" id="dayNum6">6</div>
            	
                
				<script>
				$( "#dd6" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd6" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd6" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-06")
				$("#editDateDiv").html("10/6/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd7"><div style="cursor:pointer" id="dayNum7">7</div>
            	
                
				<script>
				$( "#dd7" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd7" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd7" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-07")
				$("#editDateDiv").html("10/7/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd8"><div style="cursor:pointer" id="dayNum8">8</div>
            	
                
				<script>
				$( "#dd8" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd8" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd8" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-08")
				$("#editDateDiv").html("10/8/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
            </tr>
            
                <tr>
            
        	<td style="cursor:pointer" class="otherDays" id="dd9"><div style="cursor:pointer" id="dayNum9">9</div>
            	
                
				<script>
				$( "#dd9" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd9" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd9" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-09")
				$("#editDateDiv").html("10/9/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd10"><div style="cursor:pointer" id="dayNum10">10</div>
            	
                
				<script>
				$( "#dd10" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd10" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd10" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-10")
				$("#editDateDiv").html("10/10/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd11"><div style="cursor:pointer" id="dayNum11">11</div>
            	
                
				<script>
				$( "#dd11" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd11" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd11" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-11")
				$("#editDateDiv").html("10/11/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" id="today"><div style="cursor:pointer" id="dayNum12">12</div>
            	
				
				<script>
				$( "#today" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#today" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#today" ).click(function () {
    				$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-12")
					$("#editDateDiv").html("10/12/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd13"><div style="cursor:pointer" id="dayNum13">13</div>
            	
                
				<script>
				$( "#dd13" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd13" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd13" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-13")
				$("#editDateDiv").html("10/13/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd14"><div style="cursor:pointer" id="dayNum14">14</div>
            	
                
				<script>
				$( "#dd14" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd14" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd14" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-14")
				$("#editDateDiv").html("10/14/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd15"><div style="cursor:pointer" id="dayNum15">15</div>
            	
                
				<script>
				$( "#dd15" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd15" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd15" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-15")
				$("#editDateDiv").html("10/15/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
            </tr>
            
                <tr>
            
        	<td style="cursor:pointer" class="otherDays" id="dd16"><div style="cursor:pointer" id="dayNum16">16</div>
            	
                
				<script>
				$( "#dd16" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd16" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd16" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-16")
				$("#editDateDiv").html("10/16/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd17"><div style="cursor:pointer" id="dayNum17">17</div>
            	
                
				<script>
				$( "#dd17" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd17" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd17" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-17")
				$("#editDateDiv").html("10/17/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd18"><div style="cursor:pointer" id="dayNum18">18</div>
            	
                
				<script>
				$( "#dd18" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd18" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd18" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-18")
				$("#editDateDiv").html("10/18/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd19"><div style="cursor:pointer" id="dayNum19">19</div>
            	
                
				<script>
				$( "#dd19" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd19" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd19" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-19")
				$("#editDateDiv").html("10/19/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd20"><div style="cursor:pointer" id="dayNum20">20</div>
            	
                
				<script>
				$( "#dd20" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd20" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd20" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-20")
				$("#editDateDiv").html("10/20/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd21"><div style="cursor:pointer" id="dayNum21">21</div>
            	
                
				<script>
				$( "#dd21" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd21" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd21" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-21")
				$("#editDateDiv").html("10/21/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd22"><div style="cursor:pointer" id="dayNum22">22</div>
            	
                
				<script>
				$( "#dd22" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd22" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd22" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-22")
				$("#editDateDiv").html("10/22/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
            </tr>
            
                <tr>
            
        	<td style="cursor:pointer" class="otherDays" id="dd23"><div style="cursor:pointer" id="dayNum23">23</div>
            	
                
				<script>
				$( "#dd23" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd23" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd23" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-23")
				$("#editDateDiv").html("10/23/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd24"><div style="cursor:pointer" id="dayNum24">24</div>
            	
                
				<script>
				$( "#dd24" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd24" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd24" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-24")
				$("#editDateDiv").html("10/24/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd25"><div style="cursor:pointer" id="dayNum25">25</div>
            	
                
				<script>
				$( "#dd25" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd25" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd25" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-25")
				$("#editDateDiv").html("10/25/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd26"><div style="cursor:pointer" id="dayNum26">26</div>
            	
                
				<script>
				$( "#dd26" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd26" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd26" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-26")
				$("#editDateDiv").html("10/26/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd27"><div style="cursor:pointer" id="dayNum27">27</div>
            	
                
				<script>
				$( "#dd27" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd27" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd27" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-27")
				$("#editDateDiv").html("10/27/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd28"><div style="cursor:pointer" id="dayNum28">28</div>
            	
                
				<script>
				$( "#dd28" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd28" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd28" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-28")
				$("#editDateDiv").html("10/28/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd29"><div style="cursor:pointer" id="dayNum29">29</div>
            	
                
				<script>
				$( "#dd29" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd29" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd29" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-29")
				$("#editDateDiv").html("10/29/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
            </tr>
            
                <tr>
            
        	<td style="cursor:pointer" class="otherDays" id="dd30"><div style="cursor:pointer" id="dayNum30">30</div>
            	
                
				<script>
				$( "#dd30" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd30" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd30" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-30")
				$("#editDateDiv").html("10/30/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        	<td style="cursor:pointer" class="otherDays" id="dd31"><div style="cursor:pointer" id="dayNum31">31</div>
            	
                
				<script>
				$( "#dd31" ).click(function() {
  				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd31" ).click(function() {
  				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
				});
				$( "#dd31" ).click(function () {
    			$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-31")
				$("#editDateDiv").html("10/31/16")
					});
				</script>
                
              <div class="appNum"></div>
            </td>
        
        <td colspan="5" bgcolor="#EEEEEE">&nbsp;</td>
    </tr>
    
</tbody>
</table>

<div id="calCoverup"></div>





<div id="editDayPopup">
	
    <div id="edTopBar">
     <div id="editDateDiv">10/1/16</div>
     
     <table width="400" border="0">
	  <tbody>
	    <tr>
	      <td id="addNew">Add New...
           <script>
			$("#addNew").bind("mousedown touchstart", function() {
    			$(this).css("background", "#008bab");
				$(this).css("color", "white");
			});
			$("#addNew").on("mouseup", function() {
    			$(this).css("background", "white");
				$(this).css("color", "#008bab");
				$("#editDateDiv").html("Add New...");
				$("#currentAppts").load("calendar_appNew.cfm?appDate=10/12/2016");
			});
		   </script>
          </td>
	      <td id="cancel">Cancel
           <script>
			$("#cancel").bind("mousedown touchstart", function() {
    			$(this).css("background", "#008bab");
				$(this).css("color", "white");
			});
			$("#cancel").on("mouseup", function() {
    			$(this).css("background", "white");
				$(this).css("color", "#008bab");
				$( "#calCoverup" ).fadeToggle( "slow", function() {
  					});
				$( "#editDayPopup" ).fadeToggle( "slow", function() {
  					});
			});
		   </script>
          </td>
	    </tr>
	  </tbody>
	</table>
    
    </div>
    
    
    
    <div id="currentAppts">
    	
    </div>
    
</div>

Open in new window


Most of what you see are the days of the month being output from a CF loop.  At the very bottom, you'll see <div id="currentAppts"> </div> (line 771).  This is where the form renders in the browser after clicking a <td> that used the .load() method.  You'll see that method used for every day (i.e. line 55).  I should note that the form DOES render in the <div> and does get parsed by CF first.

$("#currentAppts").load("listCurrentAppts.cfm?appDate=2016-10-01")

Open in new window


I imagine this may be where things get funky.  The form does not show in the source within the #currentAppts <div>.  That seems pretty odd to me because the JavaScript should insert it on the client butit doesn't appear to in the source.  Below is the source for the form when I call up the form template calendar_appNew.cfm.  Which, incidentally, works just fine upon submission:

<script src="https://use.typekit.net/gry4uod.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>



<div id="cpStart">Starts</div><div id="cpEnd">Ends</div>

<div id="cpDateTime">

<form id="newApp" action="calendar_appInsert.cfm" method="post">
<input type="hidden" name="CRID" value="1">
<input type="date" id="date_start" name="date_start" value="2016-10-12">&nbsp;<input type="time" name="time_start" value="09:00">
&nbsp;<span class="popupText_L">to</span>&nbsp;

<input type="date" id="date_end" name="date_end" value="2016-10-12">&nbsp;<input type="time" name="time_end" value="10:00">
</div>

<br /><br /><br />
<div id="cpName">Name</div>
<input type="text" name="eName">

<br /><br />
<div id="cpDesc">Description</div>
<textarea name="eDesc" rows="5">Sample</textarea>

<br /><br />
<div id="cpLoc">Location</div>
<input name="eLoc" type="text">

<br /><br />
<div id="cpStart">Reminder 1</div><div id="cpEnd" style="left:327px;">Reminder 2</div>

<div id="cpDateTime">

<input type="date" id="remDate1" name="remDate1">&nbsp;<input type="time" name="remTime1">
&nbsp;<span class="popupText_L" style="color:#008bab">to</span>&nbsp;

<input type="date" id="remDate2" name="remDate2">&nbsp;<input type="time" name="remTime2">
</div>
<input type="submit" form="newApp" value="Save">
</form>

Open in new window


My error is occurring even if I use a plain-jane <input type="submit">

Here is a snapshot of the error output:

error output
0
 

Accepted Solution

by:
Brian Coughter earned 0 total points
ID: 41840097
I got it working.

First, I just realized that the browser page source will not render what happens after first load on the client.  The Chrome inspector does show it though.  

Second, to get it working, I simply added the form attribute to all the inputs naming the form to which they belong.

Thank you for your help.  It's been a while since I have used EE (about 12 yrs.).  I think EE used to use a point ranking system.  I don't see a way to assign a point value to a question.  Is it still done that way?  I feel like I should mark your help as an assist simply because you took the time to help.  Not sure what proper protocol is here.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41840156
@Brian,

Welcome back to EE - hope to see you around.

Glad you got it working.

With respect to the question on closing.

Each answer has two buttons under it "Best Solution" and "Assisted Solution". Clicking either of these will take you through the close process. Points are assigned automatically in the case of a single answer.
1
 

Author Closing Comment

by:Brian Coughter
ID: 41846344
I was able to figure it out through a little trial and error. However, I greatly appreciate Julian's willingness to help.  I really needed to post all the code for him to view as he suggested.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now