I`m trying to accomplish more than one addEventListener, but something is wrong?
For example if we have 3 divs on page and first one is displayed on the beginning and other two hidden.
<div id="d1">
<a onClick="
document.addEventListener("backbutton", show_div1, false);
$('#d1').hide();
$('#d2').show();
"
</a>
</div>
<div id="d2"></div> - initially hidden
<div id="d3"></div> - initially hidden
It shows div 2, hides div 1 and sets listener for back button to show_div1(), and everything works OK. On back key pressed it alerts "I should show #div1", as it should (//$('#d1').show(); is comented)
show_div1(){
//$('#d1').show(); $('#d2').hide();
alert ('I should show #div1');
}
But now comes the problem
<div id="d2">
<a onClick="
document.removeEventListener("backbutton", show_div1, false);
document.addEventListener("backbutton", show_div2, false);
$('#d2').hide();
$('#d3').show();
"
</a>
</div>
It immediately fires "I should show #div2" even back button is not pressed! addEventListener like started main function show_div2() and not just set listener on back button to that function.
show_div2(){
//$('#d2').show(); $('#d3').hide();
alert ('I should show #div2');
}
What could be the possible reason for this happening?
try this,
on device ready add a listener for backbutton like this
var onBackButton = function(){show_div2();}; //the initial state
document.addEventListener("backbutton", onBackButton, false);
And
don't use onClick with phoneGap
use href, or ontouchend and be sure that your < a > is visible because you dont have anything inside(display block in your css file)
<div id="d1">
<a href='javascript:onDivClick(1)' style='display:block; width:100%; height:100%;'></a>
// <a ontouchend='onDivClick(1)'></a> will be better
</div>
<div id="d2">
<a href='javascript:onDivClick(2)' style='display:block; width:100%; height:100%;'></a>
</div>
in javascript
function onDivClick(var case)
{
switch(case)
case 1:
$('#d1').hide();
$('#d2').show();
onBackButton = function(){show_div1();};
break;
case 2:
$('#d2').hide();
$('#d1').show();
onBackButton = function(){show_div2();};
break;
}
Related
I am working on a web app where, I have a Common popup as a direct child of , it contains few popups created dynamically from the JSON. There are two separate pages having user input form. JSON file is updated using the form data.
I am updating the contents of the popups using the updated JSON in the form submit function. I am facing the problem to refresh the popup contents on form submit. I have to restart the APP to see the changes on popups.
I tried triggering 'refresh' and 'create' events on popups in form submit function, but still no result.
Moreover even if I set the contents of popup div to be empty using $('#popup-div').empty() in submit function, I can still see the popup. Don't know if this is the caching problem.
Please advice for some solution, Thanks
Example Code:
<body>
<div id="common-popup">
<div id="data-popup" data-role="popup">';
<p>Name: N/A<p>
<p>DOB: N/A <p>
</div> <!--Popup div ends -->
</div>
<div data-role="page" id="page1">
<input type='text' id='p1_name' value=''>Name: </input>
<input type='text' id='p1_dob' value=''>DOB: </input>
<button class="update-data" id="b1"/>
Watch Data
</div>
<div data-role="page" id="page2">
<input type='text' id='p2_name'>Name: </input>
<input type='text' id='p2_dob'>DOB: </input>
<button class="update-data" id="b2"/>
Watch Data
</div>
</body>
<script type="text/javascript">
$('.update-data').on('vclick', function(){
var id = $(this).id;
id = id.split('');
var htm = '<div id="data-popup" data-role="popup">';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
htm += '<p>Name: ' + $('#p' + id[1] + '_name').val() +'<p>';
$('#common-popup').html(htm).trigger('create');
});
</script>
Here is the working demo
$( "#common-popup #data-popup")
.enhanceWithin().popup()
.on('popupafterclose', function(event) {
$(this).remove();
});
JS Fiddle Demo
The dynamic popup created should be removed after its closed. Creating it again and again makes multiple popups..but you are still referring to the first one, which created the problem.
I have multiple pages in my one html file.
I trying to implement the pageinit event handler on the second data-role="page".
So I declared pageinit inside it's specific data-role="page".
<div data-role="page" id="foo3" data-dom-cache="false">
<script>
$(document).on('pageinit','#foo3' , function(){
abcsong_file_path = '/android_asset/www/audio/abcsong.mp3';
my_abc = new Media(abcsong_file_path);
my_abc.play();
var i =0;
var time;
function my_loop(){
setTimeout(function (){
var my_alphabets = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
$('#content_loop2').append('<img src="img/alphabets/'+my_alphabets[i]+'.png" />');
i++;
time = 700;
if(i<26)
{
my_loop();
}
}, time)
}
my_loop();
});
</script>
<div data-role="header" data-theme="b">
</div>
<div data-role="content" >
<div id="content_loop2" data-inset="true">
</div>
</div>
<div data-role="footer" >
</div>
</div>
What I expected was that it would initialize everytime I visit this page. But it runs correctly only the first time I open it. Every other time it just show the output of previously executed code.
Please help me how to go about it.
Pageinit should run only once, it was made to be just like document ready.
If you want your code to run every time page is visited then use pageshow or pagebeforeshow.
Read more about it here.
Pageinit should fire only once, according to the docs, but at least in previous versions that was not the actual truth.
I am currently using jQM 1.3.2 and no longer experiencing this problem on Android or in desktop browser. Pay attention to it though, especially if you are also using Phonegap.
Document pageinit fires more than once on iOS (jQueryMobile)
I am using mobile Jquery, phonegap to develop a mobile application.
Upon selectioin of item, I am generating a new dynamic page;
with data-role="page" and id="bar"
So my code becomes like this.
<script type="text/javascript" >
function showCategory( urlObj, options )
{
var alphaName = urlObj.hash.replace( /.*aplha=/, "" ),
var $page = $('<div data-role="page" id="bar">
<div data-role="content"> <a href="#bar?aplha='+previous+'>'+previous+'</a>
<img src="img/alphabets/'+alphaName+'.png" onclick="playAudio('+alphaName+')" />
'+next+'
</div> <div data-role="footer" data-position= "fixed"> <h4>
Back to Categories</h4> </div> </div>');
}
</script>
I have tried almost everything to get the alert on alphaName on onclick=playAudio but all in vian. I know the problem is in giving qoutes, but somewhow I cannot figure the right way.
If anyone could help please
Try "on" bind method
As of Jquery 1.7+ the better approach is to use on method.
$(document).on('click', 'img', function ()
{
alert('image is clicked')
});
Thanks
AB
I have a main navbar, which loads contents - using .load() - to a div data-role=content according to whats selected,
so i use the TapHandler event on the navbar, to load the content like:
$("#mainc").load(target, function() {
$("#index").trigger("pagecreate"); //#index is the page id
});
Div where content is being loaded:
<div data-role="content" id="mainc">
</div>
Whats being loaded: ( the second navbar )
<div id="profile_navbar" data-role="navbar">
<ul>
<li>My Profile</li>
<li>Events</li>
<li>Settings</li>
</ul>
</div>
And the problem is, the first click, evrything goes perfect, then, it starts duplicating some borders on and on, the more i change tabs, the more borders it gain,
i dont use .trigger('create') there, because it doesnt get the loaded content styled with the jqm css.
Images:
What is going on here?
Thanks.
After some hours of struggle, I found that the problem was not with .trigger(“pagecreate”) but with .load()
So i came up with this: (dont ask me why, all I know is that it works this way)
$.get(target, function(data) {
$('#mainc').html(data);
$('#mainc').trigger("create");
});
instead of:
$("#mainc").load(target, function() {
$('#mainc').trigger("create");
});
I'm using jquery mobile with phonegap. My app has two pages: login page and list page. When login successfully, the user will go to the list page. Afterwards, when they press the back button on their phone (android), they will go back to the login page. I don't want behavior like this. What I want is to exit the app.
As I answered in this question: page hash and backbutton issue phonegap+Jquery
You can change pages without keeping them in browser history like so:
$.mobile.changePage('#page', {reverse: false, changeHash: false});
Unfortunately, I didn't manage to prevent the initial page from staying in browser history, so I used a workaround:
Page layout:
<body>
<!-- page_1 before page_loading in source -->
<div data-role="page" id="page_1">
</div>
<!-- page_loading will be shown first -->
<div data-role="page" id="page_loading">
<div data-role="content">
<h1 >
<b>welcome</b>
</h1>
</div>
</div>
<div data-role="page" id="page_2">
</div>
</body>
jQuery:
function onBodyLoad()
{
//go to page_loading before deviceready without keeping it in browser history
$.mobile.changePage('#page_loading', {reverse: false, changeHash: false});
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//your initialization code here...
//now go to page_1 without keeping it in browser history since the actual first page was #page_1 already
$.mobile.changePage('#page_1', {reverse: false, changeHash: false});
//your code here...
}
This should fit your needs, just try it out. "#page_loading" would be your login page, "page_1" your list page...
Keep in mind that changeHash:false refers to the destination page, not to the source. You will not be removing the source page from history. Instead, the history hash will not be updated when moving to the new page
If you use the latest version of jQuery mobile (1.4+) you can use this script:
$.mobile.pageContainer.pagecontainer('change', '#page', {reverse: false, changeHash: false});
jQuery.mobile.changePage is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
Adding options for reverse and changeHash did not work for me. using Cordova v1.6
I ended up overriding the onTouch method in my Android Activity.
#Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (KeyEvent.KEYCODE_BACK == keyCode) {
// Clear browsers history if user clicks back button
clearHistory();
}
return super.onKeyUp(keyCode, event);
}