Databases
StackOverflow2013
Postsdbo
POMy jQuery UI datepicker won't show if the element has ever been hidden
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMy jQuery UI datepicker won't show if the element has ever been hidden
    primarykey
    data
    text
    <p>A little context: I'm creating a wizard, so the content of a step is hidden until you're up to that step. I'm dynamically creating the second step of the form based on your input from the first step, like so: </p> <h2>No Hiding, Get Input, Show Output</h2> <h3>HTML</h3> <pre><code> &lt;p class="par"&gt; &lt;label for="report_cat"&gt;Category:&lt;/label&gt; &lt;span class="field"&gt; &lt;select data-bind="options: reportTypes, optionsText: 'title', value: selectedReportType, optionsCaption: 'Report Category'" id="report_cat" class="longinput"&gt;&lt;/select&gt; &lt;/span&gt; &lt;/p&gt; &lt;p class="par"&gt; &lt;label for="report"&gt;Report:&lt;/label&gt; &lt;span class="field"&gt; &lt;select data-bind="options: reportPool, optionsText: 'title', value: selectedReport, optionsCaption: 'Select Report'" id="report" class="longinput"&gt;&lt;/select&gt; &lt;/span&gt; &lt;/p&gt; &lt;div class="widgetcontent stdform stdform2 stdformwidget" id="tmptest" data-bind="wizardInputs: inputPool"&gt; &lt;/div&gt; </code></pre> <h3>Relevant Javascript (ReportTypes is just an array of javascript objects)</h3> <pre><code>self.inputPool = ko.computed(function() { if (self.selectedReport() == null) return []; //set the url self.postUrl(self.selectedReport().postUrl); var inputs = self.selectedReport().inputs.map(function(elem) { var element = null; var type = elem["type"]; var id = "wizard-elem-" + elem["title"].replace(/\s+/g, ''); if (type == "date") { element = $("&lt;input type =\"text\" id=\"" + id + "\" class=\"longinput wizard-dp\" style=\"display:inline-block\" /&gt;"); element.datepicker(); } if (type == "checkbox") { element = $("&lt;input type =\"checkbox\" id=\"" + id + "\" /&gt;"); } if (type == "select") { //do something with options element = $("&lt;input type =\"checkbox\" id=\"" + id + "\" /&gt;"); } elem["elem"] = element; return elem; }); return inputs; }); ko.bindingHandlers.wizardInputs = { update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var ele = $(element); var value = valueAccessor(); ele.children(".wizardContent").remove(); var container = $("&lt;div class=\"wizardContent\"&gt;&lt;/div&gt;"); for (var x in value()) { var single = value()[x]; var id = "wizard-elem-final-" + single["title"].replace(/\s+/g, ''); var param = $("&lt;p&gt;&lt;/p&gt;").addClass("par"); param.append("&lt;label for=\"" + id + "\"&gt;" + single["title"] + "&lt;/label&gt;"); var field = $("&lt;span&gt;&lt;/span&gt;").addClass("field"); field.append(single["elem"]); param.append(field); container.append(param); } if (value().length &gt; 0) { ele.prepend(container); } } }; </code></pre> <p><a href="http://jsfiddle.net/xueye/tJnwa/3/" rel="nofollow">I tossed all the code on this fiddle</a>, I am not hiding my elements at any point. When you select any combination of Categories/Reports the second step will automatically pop up below the first. The datepicker (input 1) will appear just fine (ignore the lack of CSS for a moment).</p> <p>However, <a href="http://jsfiddle.net/xueye/VHBU8/6/" rel="nofollow">when I attempt to have each step show up at the proper time</a> by hiding and showing the containers, the datepicker will not appear. The actual input element has "hasDatePicker" class, so I know that the datepicker is still being implemented. The actual datepicker element that's hidden shows up in Firebug's HTML viewer, too; so I know it's there.</p> <h2>Hiding</h2> <h3>HTML</h3> <pre><code> &lt;div class="widgetcontent stdform stdform2 stdformwidget" data-bind="slideVisible: (step() == 1)" id="tmptest1"&gt; &lt;p class="par"&gt; &lt;label for="report_name"&gt;Title:&lt;/label&gt; &lt;span class="field"&gt; &lt;input type="text" data-bind="value: title" class="longinput" id="report_name" /&gt; &lt;/span&gt; &lt;/p&gt; &lt;p class="par"&gt; &lt;label for="report_cat"&gt;Category:&lt;/label&gt; &lt;span class="field"&gt; &lt;select data-bind="options: reportTypes, optionsText: 'title', value: selectedReportType, optionsCaption: 'Report Category'" id="report_cat" class="longinput"&gt;&lt;/select&gt; &lt;/span&gt; &lt;/p&gt; &lt;p class="par"&gt; &lt;label for="report"&gt;Report:&lt;/label&gt; &lt;span class="field"&gt; &lt;select data-bind="options: reportPool, optionsText: 'title', value: selectedReport, optionsCaption: 'Select Report'" id="report" class="longinput"&gt;&lt;/select&gt; &lt;/span&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="widgetcontent stdform stdform2 stdformwidget" id="tmptest" data-bind="wizardInputs: inputPool, slideVisible: (step() == 2)"&gt; &lt;/div&gt; </code></pre> <h3>SlideVisible Bindings</h3> <pre><code> ko.bindingHandlers.slideVisible = { init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var ele = $(element); var value = ko.utils.unwrapObservable(valueAccessor()); ele.hide(); if (value) ele.slideDown(); }, update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var ele = $(element); var value = ko.utils.unwrapObservable(valueAccessor()); if (value) { ele.slideDown(); } else { ele.slideUp(); } } }; </code></pre> <p>I have manually played around in my console, and it seems as though the actual act of hiding and showing the containers somehow breaks my datepicker. I have been able to replicate this without the knockout through the console by hiding the element that will contain the datepicker, placing the elements in that container, and then revealing the container. The elements show up, but the datepicker will not proc. </p> <p>Has anyone dealt with this before? Is there a workaround I simply have been unable to find?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPhil Barresi
    1. USPhil Barresi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMy jQuery UI datepicker won't show if the element has ever been hidden
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMy jQuery UI datepicker won't show if the element has ever been hidden
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMy jQuery UI datepicker won't show if the element has ever been hidden
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't think you can apply datepicker on element that is not part of the DOM. I added if (type == "date") { element = $("<input type =\"text\" id=\"" + id + "\" class=\"longinput wizard-dp\" style=\"display:inline-block\" />"); $('button').click(function() { $(element ).datepicker(); }); } http://jsfiddle.net/VHBU8/11/
      singulars
      1. POMy jQuery UI datepicker won't show if the element has ever been hidden
      1. USsalexch
    2. CO¿what happen with the datepicker id if you first choose the report, set the title and then press continue? i think that you have to use the click event instead of the select events...then the above solution is more viable
      singulars
      1. POMy jQuery UI datepicker won't show if the element has ever been hidden
      1. USa0viedo
    3. COOf course, wow -- can't believe I made that mistake. Once I applied the datepicker after it was in the DOM, it did the trick. Thanks!
      singulars
      1. POMy jQuery UI datepicker won't show if the element has ever been hidden
      1. USPhil Barresi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload