We Keep Coding

How can I get elements inner text after dom is being refreshed after the submit button?

I'm working on automating a task (filling a form and submitting data then getting the result message where the data is being read from a txt file line by line).
While running my JS code via the console, everything works fine until before the clicking on submit button. after the click on the submit button, I can see the HTML is being reloaded with new data and the URL is changed from www.example.com to www.example.com/requests/12345 and then the next step after the click is not respected.
I thought may be because I was using:
document.getElementByID("btn-submit").click();
and changed it to
$("#btn-submit").click().trigger('change');
But still same issue.
I tried to use sleep functions and setTimeout to wait for the new HTML to load but this didn't help at all :(
The task is simple steps until button click all works perfect, I'm stuck only at after the submit button as I want to get the results that shows on the page after clicking the submit button.
Any ideas please what is being done wrong from my side?
The Elements I'm trying to get are in a div that is empty before the submit button is being clicked like this
<div id="message-bar">
</div>
After the submit button is clicked it is filled like the below (also the URL is changed to something link www.example.com/requests/12345 - of course the result elements won't show if the button is not clicked:
<div id="message-bar">
<div id="alert-success" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="text alert-text">Request approved!</div>
<ul id="bullet-items"><li>Thank you</li></ul>
</div>
</div>
I tried to check if the element is not empty, then get the elements innerText, but seems like my code is being removed when the page URL changes after the submit button:
if (document.getElementById("message-bar").innerText != "") {
// do something
}
Thank you so much

Try
$("#btn-submit").click(function(event){
event.preventDefault();
})
Or without jQuery
var btn = document.getElementById('btn-submit');
btn.addEventListener('click',function(event){
event.preventDefault();
})

Try using the .preventDefault() event
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).

From what I understand you need the content not after the click, but after what the click is triggering. Here’s the same Q, answered. Basically you wait for the mods to happen then “read” the element content.

to fix my issue, I thought of using window.open("URL") by creating a variable for it and then using it to process my the whole automation process on the new window and I was able to get all the result message from the new window
var newWindow = window.open("the URL");
newWindow.$('input[id="input"]').val("1234").trigger('change');
etc...

Why does my fancybox not open on $('.selector').click()?

I have a page of styled links that I broke into sections using jQuery.
Using jQuery .internal causes the page to navigate to the specified target specified by the href attribute of the link inside the div the user clicked on.
.external does the same thing as .internal except it opens in a new tab.
.video should simply cause the div clicked to play the video specified by the link in a fancybox but it does not. Nor does it report an error in the console.
Here is my code for the fancybox:
HTML
<div id="fentanylVid" class="col-sm-3 dept video" data-department="fentanyl the real deal">
<div class="box listed-left animated-content move_right animate clearfix">
<div class="box-text">
<h4><a data-fancybox="" href="https://youtu.be/Tt0dFCuwkfQ?rel=0">Fentanyl: The Real Deal (Video)</a></h4>
</div>
</div>
</div>
jQuery
$('.video').click(function(){
$().fancybox({
selector : '.video'
});
});
I also have the two resources in the header of my page

You can either initialize the fancybox like this
$('.video').fancybox({
selector : '.video'
});
or as #Taplar said
$('.video').click(function(){
$.fancybox.open(this)
});

A bit explaining what your code does:
$('.video').click(function(){ // <- Here you are attaching your click event on selected items
// So, when user clicks, this happens:
$().fancybox({ // Here you are telling fancybox to attach click event ..
selector : '.video' // .. on this selector
});
});
So, basically you have done too much work and all you have to do is to remove your own click event and it should work fine. Or you can use API to start fancybox programmatically, like in the other answer.

Destory CSS Bootstrap Modal

I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.
My submit button in said modal has the following jQuery attatched:
$('#editTrackModal').modal('hide');
When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.
Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.
Is this possible?
Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.

You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:
$("#editTrackModal .modal-body").empty();

Hi you can do like this
// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
$(this).data('modal', null); //this will destroy you data and model means it will reset.
});
and it may be duplicate of how to destroy bootstrap modal window completely?
you can refer to that link also.

A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:
$('#editTrackModal').on('hidden.bs.modal', function () {
$('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});
And when you want to show the modal again, you can do something like this:
$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');
Your html may look like this:
<div id="editTrackModal" class="modal fade">
<div class='modal-contents'>
......Build your modal contents here......
</div>
</div>

BS modal timeout when button click in dynamic created element

I'm trying to create a Bootstrap modal for quick shop purpose. When clicking a button I've added a small timeout function to let the modal load everything before it shows up. Just for usabillity.
This works perfectly when clicking the button inside a normal plain div/element.
The problem I'm facing is that it doesn't work when clicking a button inside a dynamic created div/element.
I have a carousel (owl-carousel) with several items in it and each item has a quick shop button.
When clicking this button the modal pops up but skips the loading part. So what happens is that when opening one modal and closing it and then open a next modal the content from the first modal is displayed and after a few seconds the content of the new modal is displayed.
It looks like the loading part of the script is skipped when clicking on a dynamic created element/div/button.
What I have is this:
// dynamic created items inside owl-carousel//
<div class="item">
<a data-toggle="modal" data-target="#quick-shop-modal" data-vid="12384069" data-handle="12384069.html">Quick shop</a>
</div>
// the modal //
<div id="loader"></div>
<div aria-hidden="false" role="dialog" tabindex="-1" id="quick-shop-modal" class="modal fade" data-show="false">
.....
</div>
// The script //
$(document).ready(function(){
$(document).on('click', '.quickview', function(e){
e.preventDefault();
$('#loader').show();
var url = $(this).data('handle') + '/?format=json';
var vid = $(this).data('vid');
var $target = $($(this).data('target'));
// it looks like this part is skipped
$target.data('triggered',true);
setTimeout(function() {
if ($target.data('triggered')) {
quick_shop(url, vid);
};
}, 1000);
return false;
});
});
Does anyone know what's going wrong with the code?

Consider using a callback function instead of a fixed timeout duration.

How to automatically close Bootstrap 3 modal after time period [duplicate]

This question already has answers here:
How to automatically close the bootstrap modal dialog after a minute
(6 answers)
Closed 8 years ago.
I'm struggling to automatically close Bootstrap modals after a set time period.
Here's the js code I'm using to close the modal in 4 seconds:
setTimeout(function() { $('#myModal').modal('hide'); }, 4000);
Two basic problems:
(A) When the html page (that contains the modals) loads, the modal Timeout seems to run before the modal is even displayed. The modal is set to display after clicking on a link in the page. If the link is not clicked immediately when the page loads, the modal will only appear briefly and then close immediately because essentially the Timeout period started when the html page loaded, not when the modal was displayed.
(B) If the user clicks on the link to launch the modal a second time (or 3rd time, 4th time, etc.), the modal displays properly but does NOT close after the time period. It just stays open until the user manually closes it.
So...the two questions are:
(1) How do I get the modal Timeout period to wait until the modal is displayed before running the clock.
(2) How do I get the modal to display a second and third time with the proper Timeout function still working?
(The answer(s) proposed at this link below looked promising, but aren't working for me. Maybe they don't work on Bootstrap 3? How to automatically close the bootstrap modal dialog after a minute )
This code below looked very promising, but didn't work even after changing 'shown' to 'shown.bs.modal'. Or maybe I'm placing this code in the wrong place?
var myModal = $('#myModal').on('shown', function () {
clearTimeout(myModal.data('hideInteval'))
var id = setTimeout(function(){
myModal.modal('hide');
});
myModal.data('hideInteval', id);
})
Many thanks for any suggestions!

I'm not pretty sure about your html so I did a complete example:
html:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4>Header</h4>
</div>
<div class="modal-body">
Modal Content
</div>
</div>
</div>
</div>
js:
$(function(){
$('#myModal').on('show.bs.modal', function(){
var myModal = $(this);
clearTimeout(myModal.data('hideInterval'));
myModal.data('hideInterval', setTimeout(function(){
myModal.modal('hide');
}, 3000));
});
});
The main difference with your code:
I set a time for timeout (3000)
I set myModal variable inside
callback

I guess it depends on how you display your modal. But you could set the timeout in the event listener?
Here is a JSFiddle to demonstrate how you can achieve it. Basically you add the timeout in the function that will be executed when the event happens.
// Select the element you want to click and add a click event
$("#your-link").click(function(){
// This function will be executed when you click the element
// show the element you want to show
$("#the-modal").show();
// Set a timeout to hide the element again
setTimeout(function(){
$("#the-modal").hide();
}, 3000);
});
If the event you listen for is a click on a link you could have to prevent the default action too by using event.preventDefault(). You can find more info on that here
I hope this helps.