Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2014-09-13
5
Medium Priority
?
720 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 83

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 83

Accepted Solution

by:
leakim971 earned 2000 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 83

Expert Comment

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

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…
Suggested Courses
Course of the Month14 days, 22 hours left to enroll

578 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