Develop Reference

Trigger event is not working in touch devices

I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?

Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();

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. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});

You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

localStorage with Jquery Mobile works only 1 time on a new Android system

I am using the localstorage option to set a variable for using it in another page.The platform is Android
Just to simulate the problem, i just created 2 simple JQM pages and set the variable in page 1 and use it in page 2. That works fine for the first time. When i'm going back to page 1 and set a new value for the variable, page 2 tells me that it is the previous value(!). I'm a little bit lost how to use it. Can someone give me a clue how to manage this? The weird thing is that on an old Android version (like 2.3.3) it works fine, but on a new one (like > 4) it fails. I think it has something to do with ready() event?
Page 1 - Main page:
$(document).ready(function () {
$('#Klant_Lijst').delegate('li', 'click', function () { var x = $(this).data('nummer'); localStorage.setItem("Nummer", x);});
});
Page 2 - sub page
$(document).ready(function () {
GetFustInfoKlant(localStorage.getItem('Nummer'));
});
I hope someone can give me an hint in a direction. Thanks!

Please dont use ready() method, use JQM page events like pageshow, pagecreate, pagebeforeshow, etc..

The click event is made but it isn't showed in the screen

I'm making a mobile application with phonegap and jquery mobile. Everytime I select one of the menu elements I call to a WS that gives me an answer that I show in the screen. It works perfectly up to there.
As I want to have a better view so I use the code trigger ('create'). (http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html but insted of refresh I have to make an create)
var listadohtml = '<div data-role="fieldcontain"><fieldset data-role="controlgroup">';
for (var i=0;i<resultado.length;i++){
var item = '';
var id = resultado[i]['id'];
item += '<input type="checkbox" name="checkbox-'+id+'" id="checkbox-'+id+'" class="custom" />';
item += '<label for="checkbox-'+id+'">'+resultado[i]["title"]+'</label>';
listadohtml += item;
}
listadohtml += '</fieldset></div>';
$('#listaPreguntas').html(listadohtml).trigger('create');
Inmediatly after that I associate an event:
$("#listaPreguntas input[type='checkbox']").bind( "click", function(event, ui) {... some code ...});
It shows everything fine, but the problem is that sometimes (not always, that's the problem) when I click a checkbox the green tick is not shown but the event change is made. When it happens I can see, by clicking in other part of the screen, that I have clicked before because it refreshes and shows the tick.
The conclussions I have
It is not the AVD because im making all the tests in my mobile phone with android 4.0.
It appears that its something of the code that includes jquery mobile when I use de trigger.
I think it is not loading time because I can wait for years and it can happens.
As you can see its not a "logic" problem but a usability one.
Thanks in advance!

For checkbox and radio, use change event not click. And keep in mind that attaching events to dynamic elements is different, I have updated my answer accordingly.
Demo
$(document).on('change', '[type=checkbox]', function () {
// code here
});

If the event click fires every time as expected then try to set the check box checked/unchecked classes using addClass and removeClass in your code pragmatically rather than relying on the JQM.

Is there jQuery Mobile's equivalent to the Android's ViewPager?

I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.

I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.

Why is this onclick event not working on Android and iPhone?

I am using Prototype JavaScript library for creating dynamic drop-down menus. Before the page loads, there is no event attached to the select statements with id, id_bran and id_gen. As can be seen, the init_image is called when the page loads, and the onclick event is attached to those select statement.
This works fine in desktops where I can use a mouse to execute the click event. It however does not work in my Android and iPhone browsers. When the page loads, the init_image is called and the getval function is executed. Later however, when I make a selection in the dropdown menu, the onclick event does not call the getval function. So I am confident that the prototype library is working on my Android and iPhone as the ajax request is made on page load but it fails subsequently. What's going wrong here?
<!--
MY HTML body->onload
The init_image is called the first time when the page is loaded
-->
<body onLoad="init_image();">
//Javscript function called on page load
function init_image() {
getval();
//Assigning the event to id_gen and id_bran for mouse clicks
document.getElementById("id_gen").onclick = getsize;
document.getElementById("id_bran").onclick = getsize;
};
//Javascript function called on page load and during mouse click on the select
//statement with id = id_bran and id_gen
function getval() {
ur = 'szv/c1--'+$F('id_bran')+'/g1--'+$F('id_gen');
new Ajax.Request(ur,
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText;
$('id_val').replace(response);
}
});
};

First of all, you're force-injecting events and the load event which may lead to potential cross-browser issues. If you're using prototype.js, rely on it's native methods which are cross-browser:
<script type="text/javascript">
document.observe("dom:loaded", function() {
.. your code here ..
});
</script>
Then again for properly localizing and observing the click events, instead of:
document.getElementById("id_gen").onclick = getsize;
Use something like:
$('id_gen').on('click', getsize(e).bindAsEventListener(this)); // for prototype 1.7 branch
Or:
$('id_gen').observe('click', getsize(e).bindAsEventListener(this)); // for prototype 1.6 branch
Also by setting passing the e variable there, your getsize() function will have the Event object there, so you could stop it's native behaviour (like leading to #):
function getsize(e) {
e.stop();
.. your code here ..
}
Additionally, it would be best and much less bloated if you lock your whole logic into class and create an object for it... but that's a whole different story... :)
prototype.js is a powerfull tool, but needs some care.
I would suggest you reading some basics on the framework and following the API documentation later on:
http://prototypejs.org/learn/
http://api.prototypejs.org/