有没有办法重新加载页面，然后立即打开模式？

Question

我想在按下“.parseo”按钮后刷新页面，然后打开“#modal_parseo”模态 window 但是使用这段代码，它首先打开模态然后刷新页面并再次关闭所有内容。

到目前为止我尝试了什么（清除缓存并查看是否可以解决我遇到的问题而不必重新加载页面但代码只有在我打开模式之前重新加载页面后才能正常工作）：

$('#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
            }
    }

编辑：我在 'click .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, ' ');
});

Answer 1

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

您可以做的是在用户单击按钮时向您的 url 添加一个散列（例如 https://www.my.page/#modal），然后在您加载页面时检查它是否存在：

//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]);

有没有办法重新加载页面，然后立即打开模式？

Is there a way to reload page and after that inmediately open a modal?

javascript

jquery

bootstrap-modal