jQuery Remodal shows 'opened' state, but does not display - javascript

I'm using jQuery Remodal in combination with PHP. I'm displaying the jQuery code for launching when the page loads with some server-side variables. I've used Remodal for years, without a problem. But I'm experiencing some odd behavior that is intermittent.
Basically, 50% of the time, the modal fires and behaves expectedly, but other times, the page scrollbar goes away (Remodal launch), no Remodal window, and the console says 'opened.' I hit refresh, same thing happened. I hit refresh, and the modal appears. I hit refresh again, no modal. Very strange.
$(function() {
var options = {
hashTracking: false,
};
var bundleModal = $('[data-remodal-id=BundleModal]').remodal(options);
console.log(bundleModal.getState());
bundleModal.close();
console.log(bundleModal.getState());
bundleModal.open();
console.log(bundleModal.getState());
$('.modal-reconfigure').click(function() {
bundleModal.close();
bundleModal.destroy();
});
$('.modal-add').click(function() {
$('form#bundleprocess').submit();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal-default-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script>
<div class="remodal" data-remodal-id="BundleModal">
Your Bundle Is Complete!<br /><br />
<div clasS="row">
<div class="col-md-6">
Add Bundle To Cart
</div>
<div class="col-md-6">
Reconfigure
</div>
</div>
</div>
When I reload the page and I have the issue, the console says:
closed
closed
opened
So it partially opens since the scrollbar goes away. Opacity layer doesn't show. Obviously the div doesn't appear. But again, if I hit refresh a few times, it may show. Very intermittent.
Any ideas?

Related

Open and close modal dialog in same function

I have a site that populates data into a table when it loads. Each column header is clickable resulting in the table sorting based on that column's data. This works fine, but it is slow so i was hoping to have a modal window popup advising the end user to wait while it sorts. I have the code for the modal window already made as well as the javascript line to call it and close it, but I cannot get it to appear and then disappear when the sort is done.
Modal Code:
<div id="SortingBox" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-header2">
<h2>Loading</h2>
</div>
<div class="modal-body2">
<pre><strong style="color: black;">Please Wait...</strong></pre>
</div>
</div>
</div>
I call the modal with this line:
document.getElementById('SortingBox').style.display='block';
And close it with this:
document.getElementById('SortingBox').style.display='none';
Now I already have this working on page load and the line to close it is at the end of the sorting script in a separate js file. So all I want it to be able to have it appear when a column header is clicked and close again after the sort is complete.
Thanks.
Why not just use classList's toggle method?
Create a class that called is-modal-hidden, with display: none.
// style.css
.is-modal-hidden {
display: none;
}
Create a js function to toggle modal, by toggling the class.
Something like that:
function toggleModal() {
document.getElementById('SortingBox').classList.toggle('is-modal-hidden');
}

JavaScript uk-modal-close and reload page

Hi i am using http://getuikit.com/docs/modal.html on my site,
my code as below
Click to open modal
<div id="my_modal" class="uk-modal">
<div class="uk-modal-dialog">
<h1>Title</h1>
<p>...body ...</p>
<div class="uk-modal-footer">
Cancel <!-- Just close the modal -->
<!-- Call external link -->
</div>
</div>
</div>
i want to refresh background when some one click Cancel, i am noob in js but done some research and found
location.reload(true);
this will help in reload page but don't know how can i use it, can any one help
Answer . add this in end of page
<script>
$('.uk-modal').on({
'hide.uk.modal': function(){
location.reload(true);
}
});
</script>
As per the documentation here, you may use the hide.uk.modal event, which is trigged whenever the modal is closed. In the event handler, you can use the reload functionality. Include jQuery file as well.
$('.modalSelector').on({
'hide.uk.modal': function(){
location.reload(true);
}
});

Bootstrap modal disappearing immediately on mobile link click

Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});

jQuery Mobile objects stay in memory

I am currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});
Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});

jQuery Mobile multiple pages causing problems when calling a panel

I have an HTML document with multiple pages using jQuery Mobile's data-role="page". I am trying to call a panel on the second page but am receiving the error
cannot read property 'nodeType' of undefined
The error occurs when I try to transition to the second page. My basic page structure is as follows:
<body>
<div data-role="page" id="page1">
Enter Page 2
</div>
<div data-role="page" id="page2">
<h3> tthis is page 2 </h3>
<input type="button" id="myButton"> My Button </input>
<div data-role="panel" id="myPanel">
<p> Panel content </p>
</div>
</div>
</body>
The panel is being called through a function, but I still receive the same error when I comment out the function.
$(document).ready(function() {
$('#myButton').on('click', function() {
$('#myPanel').panel('open')
})
})
The panel works if it is on the first page and if I define it on the first page and open it on the second, it still opens on the first. It is there when I hit the back button. I am using jQuery Mobile too is that has an effect on anything.
Why am I receiving this error? Is there a simple solution or do I need hack my way around this by creating the panel dynamically? Thanks.
First off, never use .ready() in jQuery Mobile.
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.
Source: http://jquerymobile.com/demos/1.2.0/docs/api/events.html
Secondly, each page should have its' own panel with a different id, and the div containing the panel should be a direct child of data-role=page.
Panel markup/structure:
<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
<!-- Contents -->
</div>
Opening a panel:
Statically by using anchor/button:
Open
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('open');
// Or
$('#panel_id').panel('open');
Closing a panel:
(in case data-dismissible is set to false)
Statically by using anchor/button (Note: It should be placed inside Panel div):
Close
Dynamically:
$.mobile.activePage.find('[data-role=panel]').panel('close');
// Or
$('#panel_id').panel('close');
Demo

Categories