0

I feel like I'm missing something simple, so apologies in advance if the answer should be obvious, but here goes:

On my page, I have a number of lists, the intended behaviour is for the user to click on a list item, and have a details pane populated with data (some of which is universal, some of which pertains to a particular day) -- so far so good. However, the details pane also contains a form that allows the user to select a different day. All of this works swimmingly in IE10. However, in Firefox, the "Select day" form is completely unresponsive -- the input box doesn't allow input, nor does the submit button work. In fact, none of the text in the details pane is selectable, it's visible, but the user can't do anything with it.

On the main page, I have an empty div with the id "details" that's loaded thusly:

$("ul").on('click', 'li', function(event) {
    if($("#details").is(":hidden")) $("#details").toggle("slow");
    var id = this.id.substring(2);
    $.ajax(appRoutes.controllers.Dashboard.getDetails(id)).done(
            function(data) { $("#details").html(data); });
});

The details div is loaded with this html:

<h2>Details</h2>
<div id="universal details">
...data...
</div>
<div id="dailyInfo">
<script>
$(function() {
$("#daiDate").datepicker({dateFormat: "mm-dd-yy"});
});  
$("document").ready(function(){
  $("#detailsform").submit(function(event) {
  event.preventDefault();
  appRoutes.controllers.Dashboard.dailyDetails().ajax({
        data : $("#detailsform").serialize(),
        success: function(data) { $("#dailyInfo").html(data); }
  });
  });
});
</script>
<h4>Daily Details</h4>
<form action="/dfdetails" method="GET" id="detailsform" enctype="multipart/form-data">
  <input type="hidden" name="partID" value="146" />
  <input type="text" name="dataDate" id="daiDate" value="05-22-2014" />
  <input type="submit" value="Get" class="btn primary" id="getDAI"> 
</form>
<div "daily details">
...data...
</div>
</div>

To reiterate, this all works perfectly in IE10, for reasons beyond my control (corporate policy), I can't test this in Chrome. I'm using jQuery 2.1, if that makes any difference.

ffxtian
  • 559
  • 2
  • 5
  • 1
    The issue, in part, has to do with loading jQuery inside your AJAX call. That's not the way to go - it needs to be outside of your AJAX call, and run *after* the html is rendered via your AJAX call. The rest of the form being unresponsive sounds like it may be a z-index problem, or there is another element "on top of" the loaded form. – random_user_name May 22 '14 at 17:52
  • Thanks for the response! I'm quite new to client-side programming, so could you elaborate a bit? I assume you're referring to the contents of the " – ffxtian May 22 '14 at 18:01
  • Ha -- thanks again for the z-index tip. Turns out it's not my overlay, but my main content div overhangs the details div (in Firefox, not IE), and is keeping the content "non-interactive". – ffxtian May 22 '14 at 18:09
  • 1
    You need to use event delegation to bind to dynamically created elements: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – random_user_name May 22 '14 at 18:24

0 Answers0