When the website initially opens, a bootstrap modal appears asking to filter date.
The date is filtered (example: April 2016). The OK button is clicked and the magic happens, the server throws me the data to fill an entire dashboard from top to bottom.
In a section of the dashboard, there are some pie charts and a slider (trackbar). Each tick on the slider reflects the months of the year (Jan. - Dec.). Thanks to this, every time I slide the trackbar, a webmethod is executed that updates the pie charts with data corresponding to the month consulted.
My mistake is that, if the user initially in modal filtered a date of April 2016... and then in the section of the pie charts (slider from January to Dec.) it is filtered for example Dec. a conflict is created. Since the webmethod "NOT" consults the database engine again, but rather, some static type variables on the server side that store said initial query - This is to reduce waiting time so that the query is not executed again.
Therefore, one of my first solutions that came to mind so as not to disassemble the initial code of the query, is to modify this trackbar, when filtering the month in the bootstrap modal, that is, if I filtered the month of April 2016: when clicked, the slider's html tag will be built when the event is executed. Instead of the default from January to December, now the slider will show values from January to April, limiting the user's query since they initially loaded data up to April (April is a variable, April is an example).
Another idea that occurred to me was to build the slider from January to December, and only spend the months that were going to be disabled, but I think the plugin provider fell short on this.
Ok, this is the modal:
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title center" id="myModalLabel">
Seleccione Fecha
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Año:</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select size="4" name="DDLAno" multiple="multiple" id="DDLAno">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>Mes:</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select name="DDLMes" id="DDLMes" class="btn btn-primary dropdown-toggle" style="width:100%; max-width:400px; height:40px; font-family:'Segoe UI'; font-size:100%;">
<option value="enero">enero</option>
<option value="febrero">febrero</option>
<option value="marzo">marzo</option>
<option value="abril">abril</option>
<option value="mayo">mayo</option>
<option value="junio">junio</option>
<option value="julio">julio</option>
<option value="agosto">agosto</option>
<option value="septiembre">septiembre</option>
<option value="octubre">octubre</option>
<option value="noviembre">noviembre</option>
<option value="diciembre">diciembre</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="btnfecha" value="Aceptar" id="btnfecha" class="btn btn-default" />
</div>
</div>
</div>
</div>
This is the slider:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
<link href="http://seiyria.com/bootstrap-slider/dependencies/css/bootstrap.min.css" rel="stylesheet">
<input id="ex19" type="text"
data-provide="slider"
data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
data-slider-ticks-labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
data-slider-min="1"
data-slider-max="12"
data-slider-step="1"
data-slider-value="6"
data-slider-tooltip="hide"/>
Thanks for helping, you don't need to pull the information from the modal; An example with any button that modifies the slider would be great for me, then I'll see how to get the modal variable.
I leave you here an html file shared on google drive that you can start it without any inconvenience
In html and jquery I fell short this time.
I am working on ASP.NET client side I set:
On the server side, when executing the click event of the button, I command to execute the following code:
Where the ddl_mes_int (int type list) already contains the values that the user selected in the modal.
So when this event is executed the slider is modified.