Replace an html tag with jquery

Question

Replace an html tag with jquery

Navigation

#1 by (4 votes)

11

When initially the website opens, a bootstrap modal appears asking to filter date.

The date is filtered (example: April 2016). Click on the ACCEPT button and the magic happens, the server throws me the data to fill a whole dashboard from head to toe.

In a section of the dashboard, there are some pie charts and a slider (trackbar), Each tick in 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 leaked a date of April 2016 ... and then in the section of the pie charts (slider from January to December) it is filtered for example dic. a conflict is created. Since the webmethod "NO" queries the database engine again, but static variables on the server side that store the initial query - This to reduce waiting time that the query is not executed again.

Therefore one of my first solutions that came to mind to not disarm the initial code of the query, is to modify this trackbar, when filtering month in the bootstrap modal, that is, if I filtered the month April 2016: when clicked, the html tag of the slider will be built when the event is executed. Instead of the default from January to December, the slider will now show values from January to April, limiting the user to the query since it initially loaded data until April (April is a variable, April is an example).

Another idea I could think of was to build the slider from January to December, and only spend the months that were going to be disabled, but the pluggin provider I think fell short on this.

Well, 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, it is not necessary to do the information from the modal; An example with any button that modifies the slider would be great for me, then I see how to get the modal variable.

I'll leave here a shared html file on google drive that can start without any inconvenience

Here is the jsFiddle of the slider.

javascript jquery html5 bootstrap

asked by N'oel C'alero 29.09.2016 в 17:42

source

1 answer

Sequence of request body exhausted in ios safari Is this switch behavior normal?

score 4 · Accepted Answer

In html and jquery I fell short this time.

I am working in ASP.NET on the client side I established:

   <input id="ex19" type="text" data-provide="slider" runat="server" />

On the server side when executing the event, click on the command button to execute the following code:

        List<string> meses_nom = new List<string>();


        ddl_mes_int.ForEach(delegate(int jk)
        {
            meses_nom.Add("\" " + CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(jk).ToUpper() + " \"");             
        });

        ex19.Attributes.Add("data-slider-ticks", "[" + String.Join(", ", ddl_mes_int) + "]");
        ex19.Attributes.Add("data-slider-ticks-labels", "[ " + String.Join(", ", meses_nom) + " ]");
        ex19.Attributes.Add("data-slider-min", "1");
        ex19.Attributes.Add("data-slider-max", ddl_mes_int.Count.ToString());
        ex19.Attributes.Add("data-slider-step", "1");
        ex19.Attributes.Add("data-slider-value", ddl_mes_int.Count.ToString());
        ex19.Attributes.Add("data-slider-tooltip", "hide");

Where the ddl_mes_int (list type int) already contains the values that the user selected in the modal.

So when this event is executed the slider is modified.