Solved

jquery links and buttons problem in mobile devices but works on desktop perfectly

Posted on 2014-09-13
5
694 Views
Last Modified: 2014-09-13
Hi experts,

I change in the moment my entire portal from old desktop version to new responsive version with help of foundation 5 and jquery. Layout etc. works perfect and my site looks in large, medium and small devices perfect and the layout moves and changes together with the screen resolution. I say this to explain that in desktop everything works perfect.

But I have trouble in mobile devices (I tested on android) somehow my jquery events dont work anymore. I use in many places things like this example:

		//SubmitComment
		$('a.comment').livequery("click", function(e){
			
			var getpID =  $(this).parent().attr('id').replace('commentBox-','');	
			var comment_text = $("#commentMark-"+getpID).val();
			var keepID = $('#keepID').val();
			
			if(comment_text != "Escreva um comentário")
			{
				$.post("PT/docs/add_comment.php?comment_text="+comment_text+"&post_id="+getpID+'&x='+keepID, {
	
				}, function(response){
					$('#CommentPosted'+getpID).append($(response).fadeIn('slow'));
					$("#commentMark-"+getpID).val("Escreva um comentário");					
				});
			}

Open in new window


to catch the click on some link like
<a href="" id="comment">test</a>

Open in new window

. For some reason this does not work in my mobile device and a click at the button does not do anything. Now I read in lots of sites to change the click into tap by doing: $('a.comment').livequery("click tap", function(e){ but this does not change anything. I am also confused because I think livequery is not existing anymore but I dont know any alternative for this site. It is best described as facebook wall clone inside my portal which load dynamic all kind of things like text, photos etc.

The strange thing for me is that if I choose on my mobile chrome browser to request the desktop version the site works flawlessly. The layout remain the same because it continue to use anyway the Foundation 5 SMALL version and does look perfect in mobile plus all the buttons and functions work. but if not requested desktop version the buttons are dead.

What can I do? Should (can) I force always delivery of desktop version? This does not make a difference for my layout anyway because all is optimized for screen resolution and not for type of browser mobile and desktop.

Or should I change the jquery functions and how? I tried plenty of things since more than 2 days but dont get it work.

I appreciate your help experts, thx
0
Comment
Question by:Oliver2000
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40320900
you need to use touch events for mobile.
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

$('a.comment').livequery("click touchstart", function(e){

Open in new window

0
 

Author Comment

by:Oliver2000
ID: 40321018
Hello leakim971,

Thank you for your reply but this does not really help me. I am aware of the problem that the original onclick dont work well and I need somehow touch events but I don't understand what I need to do in order to change my example above. Can you give me an example based on the function I posted in my example? I am by far not a javascript expert and don't get much further with the example in your link. My concern in this case is also the livequery and how I change this into mobile working version because I am not sure what livequery does different than an normal "on" method.

I apologize in advance if I am a little slow on this, I am relatively new to this and never worked much with jquery anyway.

Thank you for your help
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40321083
not sure what is you jquery version, go to the jquery site to get the latest one.
so you should be able to replace $('a.comment').livequery("click", function(e){
by : $(document).on("click touchstart", 'a.comment', function(e){
0
 

Author Closing Comment

by:Oliver2000
ID: 40321302
@leakim971, you have no idea how I appreciate your help. this works flawlessly for me. I tried many things, variations etc. but somehow did not hit it like you did in your exmaple. My mistake was somehow the $(document) plus it was not working inside $(document).ready(function() but now is working perfect.

You saved not only my weekend but my entire next week for sure...
thank you for your help.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40321308
it's good to read, have a nice week-end
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question