我想在按下".parseo"按钮后刷新页面,然后打开"#modal_parseo"模式窗口,但使用这段代码,它所做的一切都是先打开模式,然后刷新页面,然后再次关闭所有内容.

到目前为止,我try 了什么(清除缓存,看看是否可以在不必重新加载页面的情况下修复问题,但代码只有在我在打开模式之前重新加载页面后才能正常工作):

$('#modal_parseo').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');//this doesn't do anything at all
});

这是:

$("#modal_parseo").on("hidden.bs.modal", function(){
        graph_editor.html.set('');//this clears content inside froala editor
        $("#tabla_grafico").html("");//this clears datatable I build using the data pasted inside froala editor
});

这是HTML

<div class="modal fade" id="modal_parseo" tabindex="-1" role="dialog" aria-labelledby="modalLabelparseo" aria-hidden="true">
  <div class="modal-dialog modal-98" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabelparseo">Constructor de Gráfico </h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body" id="body-parseo">
                <div class="row mt-2">
                   <div class="col-md-6">
                      <div id="froala-grafico"></div>
                      <input type="hidden" name="editor_grafico" id="editor_grafico">
                      <input type="hidden" name="id_temporal" id="id_temporal">
                   </div>
                <div class="col-md-6" id="container_parseo">
                <table id="tabla_grafico" data-pagination="false" data-classes="table table-hover table-condensed" data-striped="false" style="width: 100%;"></table>
                <br>
                <div id="graph_selector" style="display:none; text-align: center;" >
                   <p><b>Tipo de Grafico: </b></p>
                    <div class="cc-selector">
                       <input id="axes" type="radio" name="sel_graph" class="radio_selector" value="axes" checked/>
                       <label class="drinkcard-cc axes"for="axes"></label>
                       <input id="activity" type="radio" name="sel_graph" class="radio_selector" value="activity" />
                       <label class="drinkcard-cc activity" for="activity"></label>
                       <input id="pie" type="radio" name="sel_graph" class="radio_selector" value="pie" />
                       <label class="drinkcard-cc pie" for="pie"></label>
                    </div>
                 </div> <!--DIV SELECTOR TIPO GRAFICO -->
              </div> <!--DIV COL MD 6 -->
           </div> <!--DIV ROW -->
       </div>
       <div class="modal-footer">
           <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
           <button type="button" class="btn btn-info" id="limpiar_froala">Limpiar</button>
           <button type="button" class="btn btn-warning" id="vista_preliminar">Vista Preliminar</button>
           <button type="button" class="btn btn-success" id="guardar_grafico">Guardar</button>
       </div>
   </div>
</div>

这是js

window.accionesFila = {
        'click .parseo': function(e, value, row, index) {
                window.location.reload();
                $('#modal_parseo').modal('show');
    
                //FUNCTION TO SAVE DATA
                $('#guardar_grafico').click(function() {
                    //TABLE ID
                    var $table = $('#tabla_grafico');
                    //console.log(editor);
                    //$("#editor_grafico").val(graph_editor.html.get());
                    //GRAPH TYPE SELECTOR VALUE
                    var graph_selector = document.querySelector('input[name=sel_graph]:checked').value
                    
                    
                    function getRowSelections() {
                    return $.map($table.bootstrapTable('getSelections'), function(row) {
                            return row;
                        })
                    }
    
                    //SAVE SELECTED ROWS HERE
                    var selectedRows = getRowSelections();
                    agrupacion_array = [];
                    //ITERATE
                    $.each(selectedRows, function(index, value) {
                        id_grafico = value.col_grafico_id;
                        agrupacion_array.push(value.val_agrupacion);
                    });
                    $.ajax({
                        url: 'inc/datos-graficos-data',         
                        dataType : "json",
                        type: 'POST',
                        data: {
                            q: 'guardar_grafico',
                            id: row.id_indicador,
                            graph_id: id_grafico,
                            agrupacion: agrupacion_array,
                            datos: editor
                        },
                        async: false,
                        beforeSend: function() {
                            //$("#ventasGrafico").html("<img src='images/loading.gif'>");
                        },
                        success: function(json) {
                            $('#modal_parseo').modal('hide');
                            //SWAL
                            Swal.fire(
                            'Exito!',
                            json,
                            'success'
                            )
                        },
                        cache: true
                    });
                }); //INSERT GRAPH
            }
    }

编辑:我在"点击"中添加了这个.parseo函数

'click .parseo': function(e, value, row, index) {
            
        //$('#modal_parseo').modal('show');
        var url = window.location.href;    
        if (url.indexOf('#modal') > -1){
            window.location.href.split('#')[0]//I tried this to remove the hash now but it doesn't work
        } else {
            url += '#modal'
        }
        window.location.href = url;
        window.location.reload();

多亏了第一个答案,这里才是外面

$(function() {
    if($(location).attr('hash') === '#modal') {
        $('#modal_parseo').modal('show');
    }
});

Edit2:在我用这个关闭我的模式后,我成功地删除了散列

$('#modal_parseo').on('hide.bs.modal', function(e) {
    history.replaceState(null, null, ' ');
});

推荐答案

当您拨打window.location.reload()时,页面会重新加载,就像您按f5键或在url栏上按enter键一样.这意味着您当前的页面状态已丢失,因此代码的执行将被中断,并从新加载的页面的开头重新开始.

您可以在用户单击按钮(例如https://www.my.page/#modal)时向url添加哈希,然后在加载页面时判断是否存在哈希:

//this executes when the page is ready
$(function() {
    if($(location).attr('hash') === '#modal') {
        $('#modal_perso').modal('show');
    }
});

请注意,如果有人将包含散列的页面添加到书签中,也会执行此操作.

在编辑中,您试图使用window.location.href.split('#')[0]从url中删除哈希.这本身没有任何作用——它只是一个值.你需要给某些东西赋值.您不能在这里直接将该值分配给window.location.href,因为这将使大多数浏览器重新加载页面.

你可以这样使用HTML5 history API,例如:

window.history.pushState(null, document.title, window.location.href.split("#")[0]);

Javascript相关问答推荐

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

传递一个大对象以在Express布局中呈现

MongoDB中的引用

将2D数组转换为图形

康威的生活游戏规则在我的Javascript版本中不起作用.''我做错了什么?

单个HTML中的多个HTML文件

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

环境值在.js文件/Next.js中不起作用

邮箱密码重置链接不适用于已部署的React应用程序

为什么我的按钮没有从&q;1更改为&q;X&q;?

第一项杀死下一项,直到数组长度在javascript中等于1

在表单集中保存更改时删除';禁用';

在HTML5画布上下文中使用putImageData时,重载解析失败

如何创建一个for循环,用于计算仪器刻度长度并将其放入一个HTML表中?

如何格式化API的响应

用内嵌的含selenium的Java脚本抓取网站

为什么我的InDesign Java脚本不能完全工作?

是否在图表中计算线上的点坐标?

根据网络速度加载CS

如何循环通过一个参数的键,该参数可以是TypeScrip中三个不同接口之一?