Develop Reference

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

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">×</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, ' ');
});

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

How to Populate HTML with data from jquery (multiple nested div)

I want to Populate elements inside class info-wrapper using JQuery.
Data that has to populate are inside data variable in JQuery.
I can't use $('#id').append("div") like these syntax because i want to nest multiple div inside each other and popluate .card-wrapper and its child elements for every data item.
Jquery
$.ajax({
method: 'GET',
url: 'getUser/admin',
dataType: 'json',
success: function (data) {
console.log(typeof(data));
data = Object.entries(data);
for(var i = 0;i<data.length;i++)
{
}
},
error: function () {
}
})
Blade Template
#extends('layouts.app')
#section('admin-content')
<div class="container">
<div class="row" id="inject">
<div class="col-md-6 col-sm-12">
<div class="card-wrapper">
<div class="info-wrapper">
<h2 id="name"></h2>
<h6 id="email"></h6>
<hr/>
<h6 id="department"></h6>
<h6 is="sem"></h6>
</div>
<div class="button-wrapper">
<button class="btn btn-danger" type="submit">Delete Account</button>
<button class="btn btn-secondary" type="submit">Block Account</button>
</div>
</div>
</div>
</div>
</div>
#endsection

Because info-wrapper is just a single element, you can instead populate elements inside the div with inject id, you can make changes to your js to generate elements dynamically, I hope this can help.
$.ajax({
method: 'GET',
url: 'getUser/admin',
dataType: 'json',
success: function (data) {
console.log(typeof(data));
data = Object.entries(data);
let html = '';
for(var i = 0;i<data.length;i++)
{
html += `
<div class="card-wrapper">
<div class="info-wrapper">
<h2 id="name">${data[i].name}</h2>
<h6 id="email">${data[i].email}</h6>
<hr/>
<h6 id="department">${data[i].department}</h6>
<h6 is="sem"><${data[i].sem}/h6>
</div>
<div class="button-wrapper">
<button class="btn btn-danger" type="submit">Delete Account</button>
<button class="btn btn-secondary" type="submit">Block Account</button>
</div>
</div>
`;
}
html = `<div class="col-md-6 col-sm-12">${html}</div>`
$('#inject').html(html);
},
error: function () {
}
})

Retrieve newly updated article without refreshing the page

I'd like to make a edit link to update the article when it's clicked,
In the template, it's structured as:
post-text
article-content
article-form
post-menu
I hide "article-form" in first place as <div class="article-form" style="display: none;"> until edit link is clicked.
<div class = "col-md-12 post-text" >
<div class="article-content">
{{article.content}}
</div>
<div class="article-form" style="display: none;">
<form class="form-horizontal" action="/article/edit/{{ b.id }}" method="POST">
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control" id="editContent" name="content" rows="10" cols="30">
{{form.content.value}}
</textarea >
</div>
</div>
<div class="form-group" >
<div class="col-sm-offset-0 col-sm-12">
<button type = "submit" class = "btn btn-success btn-sm" id = "saveEditBtn"> Save Edits </button>
</div>
</div>
</form>
</div><!-- article-form -->
</div>
<div class="post-menu pull-left">
<a id="editArticleLink" href="{% url 'article:article_edit' article.id %}">
<span class="glyphicon glyphicon-edit" aria-hidden="true">edit </span>
</a>
<a id="delArticleLink">
<span class="glyphicon glyphicon-trash" aria-hidden="true">delete</span>
</a>
</div>
After updating is completed and submit is cliked, send data to backend using Ajax, hide "article-form" and show "article-content".
<script>
$(document).ready(
$(".post-menu a").on("click", function(e){
e.preventDefault();
//retrieve the topmost element which the target lives in
$postText = $(e.target).closest(".post-text");
//hide article-content
$postText.find(".article-content").hide();
//show the article-form for users to update
$postText.find(".article-form").show();
//capture the button submitting event
$(".article-form button").on("click", function(e){
var content = $postText.find("textarea").val();
$.ajax({
type:"POST",
url: ,
data:,
success: function(){
//if saved successfully
$postText.find(".article-content").show();
$postText.find(".article-form").hide();
},//success
})//ajax post request
});//nested button click event
}) //click event
)//ready
</script>
My problem is that in ajax success,
$postText.find(".article-content").show() still display the non-updated article,
How could I retrieve the updated without refreshing the page?

If you can send the edited version to server... You have the new content! Update the .article-content with it then show.
Here is what I think it is...
//capture the button submitting event
$(".article-form button").on("click", function(e){
var content = $postText.find("textarea").val();
$.ajax({
type:"POST",
url: ,
data:, // <-- There is something missing here... I assume it's content.
success: function(){
//if saved successfully
$postText.find(".article-content").html(content).show(); // update before the show!
$postText.find(".article-form").hide();
},//success
})//ajax post request
});

jQuery remove class on closest

I'm trying to action a removeClass request using jQuery. Most of the below script is working fine except for the $(this).closest('.press-continue').removeClass('hidden'); part.
I have posted the jQuery and HTML below. Any ideas what could be the problem?
$(function () {
$('.step2').on('click', '.btn-book', function (e) {
$.ajax({
url: '/reserve/' + this.id,
type: 'get',
dataType: 'json',
context: this,
success: function (json) {
if (json['success']) {
$(this).addClass('btn-selected');
$('.btn-book').not(this).addClass('book-disabled').prop('disabled', true);
$('.next-step-hidden').addClass('show-button').prop('href', '/confirm/' + this.id);
$('.cancel').addClass('show-button').prop('id', this.id);
$('.alert-danger').addClass('hidden-error');
$(this).closest('.press-continue').removeClass('hidden');
} else if (json['error']) {
if (json['error'] == 1) {
alert("Another user has already booked this slot, please choose another slot.");
$(this).addClass('btn-selected').addClass('book-disabled').prop('disabled', true);
}
}
}
});
});
});
HTML
<div id="main">
<h2 class="info-bar clearfix"><b>Select parking time</b> <span>Step <i>2</i></span></h2>
<div class="alert alert-danger hidden-error">
<strong>Expired!</strong> Sorry, the slot that you reserved has now expired. Please choose another slot below.
<br><i>Note: slots are reserved for 15 minutes.</i>
</div>
<form class="step2">
<fieldset>
<legend><span>Select a Parking Slot</span></legend>
<div class="parking-time">
<div class="input-row">
<label class="label">12/06/2015
<br>Morning
<br>7am - 1pm</label>
<button class="btn btn-small btn-important btn-book" type="button" id="67"><i>book</i><b>reserved</b></button>
<span class="press-continue hidden">Press continue to confirm booking</span>
</div>
<div class="input-row">
<label class="label">12/06/2015
<br>Afternoon
<br>2pm - 7pm</label>
<button class="btn btn-small btn-important btn-book" type="button" id="68"><i>book</i><b>reserved</b></button>
<span class="press-continue hidden">Press continue to confirm booking</span>
</div>
<div class="input-row">
<label class="label">12/06/2015
<br>All Day
<br> </label>
<button class="btn btn-small btn-important btn-book" type="button" id="69"><i>book</i><b>reserved</b></button>
<span class="press-continue hidden">Press continue to confirm booking</span>
</div>
</div>
<!-- end parking-time -->
<div class="input-row input-row-last"> <a class="btn btn-small btn-info cancel">Cancel</a> <a class="btn btn-info next-step next-step-hidden">Continue <i class="sprite arrow"></i></a> </div>
</fieldset>
</form>
</div>
<!-- end main -->

.closest() is used to find an ancestor element, where as what you are looking for is the next sibling so you can use .next()$(this).next('.press-continue').removeClass('hidden');
$(function () {
$('.step2').on('click', '.btn-book', function (e) {
$.ajax({
url: '/reserve/' + this.id,
type: 'get',
dataType: 'json',
context: this,
success: function (json) {
if (json['success']) {
$(this).addClass('btn-selected');
$('.btn-book').not(this).addClass('book-disabled').prop('disabled', true);
$('.next-step-hidden').addClass('show-button').prop('href', '/confirm/' + this.id);
$('.cancel').addClass('show-button').prop('id', this.id);
$('.alert-danger').addClass('hidden-error');
$(this).next('.press-continue').removeClass('hidden');
} else if (json['error']) {
if (json['error'] == 1) {
alert("Another user has already booked this slot, please choose another slot.");
$(this).addClass('btn-selected').addClass('book-disabled').prop('disabled', true);
}
}
}
});
});
});

Image Slider not loaded with Ajax request

I'm trying to use an Image Slider from this link http://www.menucool.com/javascript-image-slider
I created an index.html file that will be used to show all the pages, so the navigation is only by changing the <div id="isi"> content. Here's the index file
<body class="wg">
<div class="container">
<div class="header">
<h1 class="banner-font">Header</h1>
</div>
<div class="btn-group button-banner">
<button type="button" class="btn btn-default" onclick="getSummary(1)"
>Home</button>
<button type="button" class="btn btn-default" onclick="getSummary(5)">Contact Us</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Tentang Kami <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Sejarah</li>
<li>Visi Misi</li>
<li>Program Studi</li>
</ul>
</div>
<div id="isi">
<!-- ini isi nya -->
</div>
<footer>
<b>
© 2013 Kurnia Fredy Wijaya & Luki Ramadon <br>
Fakultas Teknik Universitas Pancasila
</b>
</footer>
</div>
<script type="text/javascript">
$(document).ready(function(){
getSummary(1);
});
</script>
</body>
On the page's first load, it will execute getSummary(1) method that will fetch data with ajax..here's the ajax code..
function getSummary(id){
if(id==1){
alamat = "pages/home.html";
}
else if(id==2){
alamat = "pages/sejarah.html";
}
$.ajax({
type: "GET",
url: alamat,
data: "id=" + id,
success: function(data) {
document.getElementById('isi').innerHTML = data;
console.log(document.getElementById('isi'));
}});}
And the image slider is located in pages/home.html..here's the code
<div class="isiFrame">
<div id="sliderFrame">
<div id="slider">
<a class="lazyImage" href="img/img1.jpg" title=""></a>
<a class="lazyImage" href="img/img2.jpg" title=""></a>
<a class="lazyImage" href="img/img3.jpg" title=""></a>
</div>
</div><br />
</div>
When i try to run it on browser, the navigation works fine, but not the image slider. When i navigate to other page and then back to the page where the slider's on, the slider lags, it shows only the loading bar. Am I missing something?

You'll probably have to re-initialize the slider when the content is updated. Add it to your ajax success callback:
...
success: function(data) {
document.getElementById('isi').innerHTML = data;
console.log(document.getEimageSlider.reload();
imageSlider.reload();
...
http://www.menucool.com/slider/create-image-slider-dynamically

It could be that your script is on a different page. I can't really tell from the way this is posted.
It could also be that you are using success for your ajax call, which from the looks of it is using the jquery library. If you are in fact using the jquery library you should be using .done .fail .then etc. Otherwise unless you re-call the ajax like #isherwood said to do, the success won't be called.