Assist with bundling jquery into js variable to be conditionally outputted

Question

I have an app where i have a javascript function called on an html select (onchange). Depending on what is selected it sends some output to a div; or it erases the output to that div. within the js function it builds the output into a js variable. and that variable is what is outputted. this has been working fine and I had some conditional inputs that would be loaded onto a form (the form beginning and end is outside of the div)

So where i am having the problem is where i try and put an input that has a class of "datepicker" on it. The jquery is not working on that input. And if i take the exact same input with that class outside of the js output variable it works fine.

here is me building the js output var in the js functon:

output253="This type of news item requires a start and end date...";
output253+="<br/><br/>";
output253+="<h3>Start Date</h3>";
output253+="<input type='date' name='start_date' />";

output253+="<h3>End Date</h3>";
output253+="<input type='date' name='end_date' />";

output253+="<br/><br/>";
output253+="<h3>Start99</h3>";

output253+="<input type='text' id='add-start-date' class='form-control datepicker' name='start99' />";

so i am sure it has something to do with the way i am doing this and things are not being interpreted properly because of how i am doing this; so I am trying to find out if there is a way to include this in the output variable where it will be able to interpret the jquery properly and load the datepicker on that output

Thanks!

adding entire code upon request

          <select class="form-control" onchange="getValue1()" id="select_id253" name="type_id" required>
            <option value="">Choose...</option>
            {% for type in news_types %}
            <option value="{{ type.id }}"{% if news.type_id == type.id %} selected{% endif %}>{{ type.name }}</option>
            {% endfor %}
          </select>
          <p></p>
        </div>
      </div>


<script>
function getValue1() {
d = document.getElementById("select_id253").value;

var output253="";

if (d==='4' || d==='6') {
output253="This type of news item requires a start and end date...";
output253+="<br/><br/>";
output253+="<h3>Start Date</h3>";
output253+="<input type='date' name='start_date' />";

output253+="<h3>End Date</h3>";
output253+="<input type='date' name='end_date' />";

output253+="<br/><br/>";
output253+="<h3>Start99</h3>";

output253+="<input type='text' id='add-start-date' class='form-control datepicker' name='start99' />";
}

else {
output253="";
 }

document.getElementById("gdemo253").innerHTML = output253;


}

</script>



 <div id="gdemo253" style="padding: 20px;"></div>
  <br />

um do you mean all parts of all pieces involved (like the select; the js function, the div where output is sent? — gman_donster, May 31 '18 at 20:04
Since you are adding the input using JS, they are not getting initialized. You will need to initialize the input after you add them. What datepicker are you using? — Alfred DSouza, May 31 '18 at 20:49
I made an attempt at this Alfred but it was kind of over my head; but your input along with everyone else's gave me enough knowledge about "initializing jquery" that i decided it would be much easier to have the onchange toggle a hidden div - thanks for all your help — gman_donster, Jun 01 '18 at 01:03

score 1 · Answer 1 · answered May 31 '18 at 19:45

When you initially run your jQuery to initialize DatePicker, it will only work on objects already on the screen. You will likely have to initiate DatePicker on each new element you add to the page. You could accomplish this with a function...

var initDatePicker = function( ele ) {

    ele.DatePicker({...});

}

var output253 = "";
output253 += "...";

//add output253 to the DOM.
$('some-div').append( output253 );

//now init DatePicker on the new element
initDatePicker( $(output253).find('.datepicker') );

Some variation of this should work. Note that this is untested and for example only. Alternatively, you might check out this thread, as it may provide an alternative method.

Making datepicker live - JQuery

I made an attempt at this Chris but it was kind of over my head; but your input along with everyone else's gave me enough knowledge about "initializing jquery" that i decided it would be much easier to have the onchange toggle a hidden div - thanks for all your help — gman_donster, Jun 01 '18 at 01:02

score 0 · Accepted Answer · answered Jun 01 '18 at 01:06

Here is my toggle:

    <select id="umtest1" name="umtest1"  onchange="showDiv(this)" >
    <option value=1 >1</option>
    <option value=2 >2</option>
    <option value=3 >3</option>
    <option value=4 >4</option>
    <option value=5 >5</option>
    <option value=6 >6</option>

    </select>
    <br/>
    <br/>

    <script>

    function showDiv(elem){
       if(elem.value == 4 || elem.value == 6) {
          document.getElementById('hidden_div').style.display = "block";

          }

          else {

    document.getElementById('hidden_div').style.display = "none";

    }



    }

    </script>

    <div style="display: none;"  id="hidden_div" >gerard rocks</div>

Assist with bundling jquery into js variable to be conditionally outputted

2 Answers2