October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear


I am using October CMS and materializecss to create an options form on one of my pages. The form works fine and dynamically loads content when you click through the various options. However, I have noticed that if I click on the same option two times in a row the content disappears and no new data is inserted. Even the loading screen fails to appear. Debugging has shown that no ajax request is actually being fired off. Does anyone know how I can change this so that clicking twice would either leave the current content on the page or reload the content on the page? Below is the problematic radio element and the complete partial.

Radio Button:

<p class="optrow">
    <input onclick="onsend()" type="radio" class="box" id="cat_all" 
           name="dates" value="all" data-request="onEventDeals" 
           checked="checked" data-request-update="'deals::default':'#deals'" 
           data-request-loading="#loading">
    <label for="cat_all">&nbsp;&nbsp;Show All</label>
</p>

Partial:

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active"><i class="material-icons">format_list_bulleted</i>Deal Options</div>
        <div class="collapsible-body"><form id="dealsoptions" class data-request="onTest" data-request-update="calcresult: '#deals'">
            {# <p>
              <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" onClick="onsend()" id="see_all">See All Deals - Clear</a>
            </p> #}
            {# <h5><b>&nbsp;Deal Source</b></h6>
            <hr>
            <div id="dealsource">
                <p class="optrow">
                  <input onClick="onsend()" type="checkbox" class="box" id="source_all" name="userProviders[]"
                         value="all" data-request="onLocalDeals" data-request-update="'deals::default': '#deals'"
                         data-request-loading="#loading" data-request-data="clear:1"/>
                  <label for="source_all">&nbsp;&nbsp;Show All</label>
                </p>
                {% for provider in providers %}
                    <p class="optrow">
                      <input onClick="onsend()" type="checkbox" class="box sourcebox" id="source_{{ provider.userProviderID }}" name="userProviders[]" value="{{ provider.userProviderID }}" checked="checked" data-request="onLocalDeals" data-request-update="'deals::default': '#deals'" data-request-loading="#loading"/>
                      <label for="source_{{ provider.userProviderID }}">&nbsp;&nbsp;{{ provider.providerName }}</label>
                    </p>
                {% endfor %}
            </div> 
            #}
            <hr>
            <h5><b>&nbsp;Event Date</b></h6>
            <hr>
            <div id="eventdate">
                <p class="optrow">
                  <input onClick="onsend()" type="radio" class="box" id="cat_all"
                         name="dates" value="all" data-request="onEventDeals" checked="checked" 
                         data-request-update="'deals::default': '#deals'" data-request-loading="#loading"/>
                  <label for="cat_all">&nbsp;&nbsp;Show All</label>
                </p>
                {% set weekEnd = "this sunday"|date('Y-m-d') %}
                {% set dates = {'Today':{'start':"now"|date("Y-m-d"),'end':"now"|date("Y-m-d")},
                                'Tomorrow':{'start':"now"|date_modify("+1 day")|date("Y-m-d"),'end':"now"|date_modify("+1 day")|date("Y-m-d")},
                                'This_Weekend':{'start':"this sunday"|date_modify("-2 day")|date('Y-m-d'),'end':weekEnd},
                                'This_Week':{'start':"now"|date("Y-m-d"),'end':weekEnd},
                                'This_Month':{'start':"now"|date("Y-m-d"),'end':"now"|date("Y-m-t")}} %}
                {% for key,date in dates %}
                    <p class="optrow">
                      <input onClick="onsend()" type="radio" class="box type_{{ key }}"
                             id="cat_{{ key }}" name="dates" 
                             value="{{ date.start }}:{{ date.end }}" 
                             data-request-data="start:'{{ date.start }}',end:'{{ date.end }}'"
                             data-request="onEventDeals" data-request-update="'deals::default': '#deals'"
                             data-request-loading="#loading"/>
                      <label for="cat_{{ key }}">&nbsp;&nbsp;{{ key|replace({'_':' '})|title }}</label>
                    </p>
                {% endfor %}
            </div>
            {% partial 'deals::apps' %}
        </form>
      </div>
    </li>
</ul>

Answer

I notice you have onClick="onsend()" on the input, this might be causing a problem for the AJAX handler to be fired off. Try removing it and see if it progresses further.

source: stackoverflow.com
js interview questions