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

Question

I want to refresh the page after I press the ".parseo" button and then open the "#modal_parseo" modal window but with this code all it does it's open the modal first then refresh the page and closes everything again.

What I tried so far(to clear cache and see If I could fix the issue I had without having to reload the page but the code works fine only after I reload the page before I open the modal):

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

And this:

$("#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
});

This is the 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>

Here is the 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
            }
    }

Edit: I added this inside the 'click .parseo' function

'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();

And this outside, thanks to the 1st answer

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

Edit2: I managed to remove the hash after I close my modal with this

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

Answer 1

When you call window.location.reload(), the page is reloaded just like when you press f5 or hit enter on your url bar. This means your current page state is lost, so the execution of your code is interrupted and starts over from the beginning on the freshly loaded page.

What you could do is add a hash to your url when the user clicks the button (for example https://www.my.page/#modal) and then check if this is present when you load the page:

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

Note that if somebody bookmarks the page including the hash, this will also be executed.

In your edit, you are trying to use window.location.href.split('#')[0] to remove the hash from the url. By itself, this doesn't do anything - it is just a value. You need to assign the value to something. You can not assign the value directly to window.location.href here because this will make most browsers reload the page.

What you can do is use HTML5 history API like this for example:

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