I am creating an app and I want to open a dynamic popup when I click on a div.
So I used the code that is given by Framework7 at https://framework7.io/docs/popup.html#examples.
What happens is that nothing happens.
If I use the code for About Popup or Services Popup it works, but if I use the dynamic one nothing happens.
I even tried to add a console log inside $$('.dynamic-popup').on('click', function () { to check if it executes the function but nothing. No log.
Any Ideas?
Thanks.
I got the example working by assigning the click handler only after the DOMContentLoaded event has fired like so:
document.addEventListener("DOMContentLoaded", function(event) {
$$('.dynamic-popup').on('click', function () {
dynamicPopup.open();
});
});
Add this code in app.js
var dynamicPopup = app.popup.create({
content: '<div class="popup">'+
'<div class="block">'+
'<p>Popup created dynamically.</p>'+
'<p>Close me</p>'+
'</div>'+
'</div>',
on: {
open: function (popup) {
console.log('Popup open');
},
opened: function (popup) {
console.log('Popup opened');
},
}
});
Above code creates dynamic popup.
To call dynamic pop-up on click event.
$$('.dynamic-popup').on('click', function () {
dynamicPopup.open();
});
Related
Please help me how to unbind onbeforeunload event on javascript function call .
Also I want to unbind onbeforeunload on page refresh.
Actually I want to give pop up alert on page exit .For this I have successfully unbinded onbeforeunload from form submit button and anchor tags. Kindly help me. The code I have used is
var jQuery = jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).bind("onbeforeunload", function() {
return confirm("Do you really want to close?")
}
);
jQuery('a').on('click', function() {
jQuery(window).unbind('onbeforeunload')
});
jQuery("form").submit(function() {
jQuery(window).unbind('onbeforeunload')
});
});
Thanks
Do some minor change in your code, it will be work
jQuery(document).ready(function () {
window.onbeforeunload = function () {
return confirm("Do you really want to close?")
};
jQuery('a').on('click', function () {
jQuery(window).unbind('onbeforeunload')
});
jQuery("form").submit(function () {
jQuery(window).unbind('onbeforeunload')
});
});
Check this on jqfiddler, Message pop-up showing on refresh click here
I have html grid table consisting of comment link in each row.Clicking on any one opens a bootstrap modal with textbox and save button.So I wrote a library consisting of functions related to that comment system.Below is basic code.
HTML :
<td><a class="addComment" data-notedate="somevalue" data-toggle='modal' href='#addnotesdiv' data-oprid="somevalue" data-soid="somevalue" data-type="1"><i class="fa fa-comments-o fa-2"></i></a></td> ..... n
JS :
var Inventory={};
Inventory.notes={
defaults:{
type:'1',
soid:0,
operator_id:0,
date:'',
target:'div#addnotesdiv',
},
init:function()
{
var self=this;
$('div#addnotesdiv').on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
},
getandsetdefaults:function(e)
{
this.defaults.soid = $(e.relatedTarget).data('soid');
this.defaults.operator_id=$(e.relatedTarget).data('oprid');
this.defaults.type=$(e.relatedTarget).data('type');
this.defaults.date=$(e.relatedTarget).data('notedate');
},
setmodalelements:function(e)
{
$(e.currentTarget).find('#notesthread').empty();
$(e.currentTarget).find('input#inpnotesoid').val(this.defaults.soid);
$(e.currentTarget).find('input#inpnoteoprid').val(this.defaults.operator_id);
$(e.currentTarget).find('input#inpnotetype').val(this.defaults.type);
},
addnote:function()
{
var self=this;
$('button#btnaddnote').on('click',function(){
var message=$(self.defaults.target).find('textarea#addnotemsg').val();
var soid=$(self.defaults.target).find('input[type=hidden][id=inpnotesoid]').val();
var note_date=$(self.defaults.target).find('input#addnotedate').val();
var oprid=$(self.defaults.target).find('input[type=hidden][id=inpnoteoprid]').val();
var type=$(self.defaults.target).find('input[type=hidden][id=inpnotetype]').val();
if(message=="" || soid=="" || note_date=="")
{
alert("Fill all details");
return;
}
var savenote=$.post(HOST+'notes/save',{message:message,soid:soid,note_date:note_date,type:type,operator_id:oprid});
savenote.done(function(res){
res=$.parseJSON(res);
if(res.status && res.error){
alert(res.message);
return;
}
if(res.status && res.type)
{
$('div#addnotemsg').showSuccess("Done").done(function(){self.getNotes();});
$('div#addnotesdiv').find('textarea#addnotemsg').val('');
}
else
{
$('div#addnotemsg').showFailure("Error");
}
});
});
},
getNotes:function()
{
$('button#btnrefreshcomments i').addClass('glyphicon-refresh-animate');
var getnotes=$.getJSON(HOST,{soid:this.defaults.soid,type:this.defaults.type,note_date:this.defaults.date,operator_id:this.defaults.operator_id});
getnotes.done(function(res){
if(res.status && res.data.length)
{
--somecode---
}
});
},
activaterefresh:function(){
var self=this;
$(document).on('click','#btnrefreshcomments',function(){
$('#notesthread').empty();
self.getNotes();
return false;
});
return false;
}
}
In Order to activate this functionality on that page I wrote
Inventory.notes.init();
Above code works perfectly when I open modal once but when I close that same modal and open it again but by clicking on different link all events are fired twice,thrice and so on.Number of events fired is equal to number of times modal opened on that page.
Is there any thing wrong in code Or any other way to perform this same task.
I know this is not a plugin all I wanted was to store all functionality related to comment system under one roof as library.
every time you open the modal box, it triggered show.bs.modal event, then all methods was exec again, including the event bindings. e.g. event bind in [addnote]
$('div#addnotesdiv').on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
Problem was whenever modal was shown getNotes,addnote,activatereferesh functions were called but when the modal was reopened again this functions are called again so thats twice and so on.Putting it in more simpler way is there were multiple listeners attached to single element without destroying previous one because my init function was called many times.
At last there were two solutions in both I need to unbind events or attach them only once.Got idea from here
1) Modified Init function with below code and added one unbind listener function
init:function(selector)
{
var self=this;
$(self.defaults.target).on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
self.getNotes();
self.addnote();
self.activaterefresh();
});
$(self.defaults.target).on('hide.bs.modal',function(e){
self.unbindlistners();
});
}
unbindlistners:function()
{
var self=this;
$('#btnrefreshcomments').unbind('click');
$('button#btnaddnote').unbind('click');
return false;
}
}
2) Place event binding function outside show.bs.modal
init:function(selector)
{
var self=this;
$(self.defaults.target).on('show.bs.modal',function(e){
self.getandsetdefaults(e);
self.setmodalelements(e);
});
self.getNotes();
self.addnote();
self.activaterefresh();
}
There is small catch in second solution that is when first time my DOM is loaded function getNotes function is called with default values.
I have a jquery-mobile popup #graphic-menu activated by an onClick event (getPosition() is in another included script, and works as expected):
HTML
Graphic menu
CSS
function showGM(pos){
$("#menu-buttons").popup("close");
$("#menu-buttons").bind({
popupafterclose: function(event, ui){
$("#graphic-menu").popup("open", {x:pos.x, y:pos.y});
}
});
}
The catch is that #gm-btn is itself part of a parent popup #menu-buttons that:
is called to appear several times
appears at different locations (it's a dragable element)
showGM(pos) uses the position of the #gm-btn when the parent popup first appears, and doesn't change for subsequent child popups when reclicked.
How can I get showGM(getPosition(this)) to correctly recalculate the position of #gm-btn when called (or, more likely, what have I screwed up in my code)?
Edit: at the moment, I'm making things work by storing the position in a variable with global scope (since there's only ever one #menu-buttons active), and passing that to #graphic-menu so it knows where to open. I think this probably isn't good programming practice, so if someone has a better suggestion I'd love to hear about it.
Based on the API (http://api.jquerymobile.com/popup/), they say:
Note: Chaining of popups not allowed: "The framework does not currently support chaining of popups so it's not possible to embed a
link from one popup to another popup. All links with a
data-rel="popup" inside a popup will not do anything at all."
A workaround to get chained popups working is the use of a timeout for
example in the popupafterclose event bound to the invoking popup. In
the following example, when the first popup is closed, the second will
be opened by a delayed call to the open method:
$( document ).on( "pageinit", function() {
$( ".popupParent" ).on({
popupafterclose: function() {
setTimeout(function() { $( ".popupChild" ).popup( "open" ) }, 100 );
}
});
});
In regards to jsFiddle, it works good for this type of testing: https://jsfiddle.net/Twisty/4gjdp4te/7/ You had not set the JQuery library, so I set it to 2.1.3, and retained your JQM 1.4.5 link.
My attempt so far has not yielded the results you want, but you can at least see what direction to take. I plan to keep working on it and will update my answer.
HTML
<div data-role="page">
<div role="main" class="ui-content">
<a id="anchor1" href="#pop-1" data-rel="popup" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="pop-1" data-position-to="#anchor1">
<p>This is a basic popup.</p>
<button id="firstbutton" data-rel="popup">Button to open 2nd popup</button>
</div>
<div data-role="popup" id="pop-2">
<p>This is another basic popup.</p>
</div>
</div>
</div>
JQUERY
var buttonClick = false;
$(document).on("pageinit", function () {
$("#pop-1").on({
popupafterclose: function () {
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
});
$(document).ready(function () {
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});
EDIT
I got the code you need: https://jsfiddle.net/Twisty/4gjdp4te/8/
JQUERY
var buttonClick = false;
$(document).ready(function () {
$("#pop-1").popup({
afterclose: function(){
if (buttonClick) {
console.log("Opening 2nd Popup.");
setTimeout(function () {
$("#pop-2").popup("open", {
positionTo: "#pop-1"
})
}, 100);
buttonClick = false;
} else {
console.log(buttonClick);
}
}
});
$("#firstbutton").click(function () {
buttonClick = true;
console.log("First Button clicked");
$("#pop-1").popup("close");
});
});
When a div is opnened i want to load html content into it via ajax. This is the code im working with:
http://jsfiddle.net/uhEgG/2/
$(document).ready(function () {
$('#country').click(function () {
$("#country_slide").slideToggle();
});
$('#close').click(function (e) {
e.preventDefault();
$('#country_slide').slideToggle();
});
});
The code I think I need is this:
$.ajaxSetup ({
cache: false
});
var ajax_load = "Loading...";
var loadUrl = "www.test.com/site.html";
$("#load_basic").click(function(){
$("#country_slide").html(ajax_load).load(loadUrl);
})
How can I make it work to make it load up when the div is opened by the code above, firstly because it is setup for a click function not a toggle function, and second, because the toggle doesn't seem to be able to distinguish if the div is open or not.
to make it load up when the div is opened by the code above
$("#country_slide").slideToggle(function(){
if($(this).is(':visible')){
$("#country_slide").html(ajax_load).load(loadUrl);
}
});
Try to delegate the events.. Looks like the element is not yet available in the DOm when the event is bound
Replace
$('#country').click(function () {
with
$(staticContainer).on('click', '#country', function () {
staticContainer is the element which is already in your DOM when the event is bound and the ancestor of country
Either store the slide state in a variable or in a data attribute liek this:
<div id="country_slide" data-state="1">
And make something like this:
$('#country').click(function () {
$("#country_slide").slideToggle();
if ($("#country_slide").attr("data-state") == 0)
$("#country_slide").html(ajax_load).load(loadUrl);
});
I have a block of code like so:
function doSomething() {
someVar.on("event_name", function() {
$('#elementId').click(function(e) {
doSomething();
});
});
}
// and on document ready
$(function () {
$('#anotherElemId').click(function () {
doSomething();
});
});
The problem that I'm encountering is that when I call doSomething() from anotherElemId click event(that is binded on document ready) it works as expected, but calling it recursively from elementId click doesn't work.
Any ideas? Thinking is something trivial that I'm missing.
Is someVar an actual jQuery reference to a dom element? (e.g. $('#someitem'))
The second problem is you cant put a .click event inside a function that you would like to instantiate later on. If you are trying to only allow #elementId to have a click event AFTER some previous event, try testing if a tester variable is true:
var activated = false;
$(function () {
$('#anotherElemId').click(function () {
activated = true;
});
$('#secondElemId').on("event_name", function() {
if (activated) {
// code that happens only after #anotherElemId was clicked.
}
});
});