Solved

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

Posted on 2014-09-13
5
676 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now