0

In the attempt to add tap events to my site I've added jquery mobile so that my buttons will work on the desktop and tablets.

However all my existing buttons now have extra text beside them. Before adding jquery mobile I had a button called "Add camera". Now adding jquery mobile it has the same button but beside it is some text with the same name as the button: "Add camera".

Simple button:

<button class="addwebcam">Add camera</button>

Just wanted to add bind event:

jQuery('.addwebcam').bind('click tap', function() {
    jQuery('#cameraformwebcam').show();
    jQuery('.addwebcam').hide();
});

If you look at the html source it doesn't show that extra text, nor do I see any errors.

I should note I added:

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Nothing else. Ideas?

Tom
  • 2,604
  • 11
  • 57
  • 96
  • Have you used firebug (or any other similar browser plugin) to check what is wrong? Normal html source want tell you nothing because new jQM GUI markup is build through js so you will no be able to see it through basic html source. – Gajotres Dec 19 '12 at 18:55

3 Answers3

1

Sounds like you are missing the stylesheet (CSS file) for jQuery mobile.

Using JQM buttons will introduce additional markup to your DOM, so if you are not using their stylesheet, you will need to style the additional markup as well.

This is what happens when you convert a regular HTML button to a jQuery mobile button:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Button element</span>
  </span>
  <button class="ui-btn-hidden" aria-disabled="false">Button element</button>
</div>

As Gajortres mentions in the comments, you will want to Inspect the DOM instead of viewing the source to see the updated DOM elements that were created in JavaScript.

jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • Thanks for the explanation. The styling is not what I want so I could go edit the css or is there a better way to do this? – Tom Dec 19 '12 at 19:16
  • If all you are using jQuery mobile for is the `tap` event, then you could roll your own using the `touchstart` and `touchend` events. – jeffjenx Dec 19 '12 at 19:20
1

AFAIK: You shouldn't add jQuery.mobile to a not over-all jQuery.mobile-build-site. That ends in many problems. jQuery.mobile interprets the html-code and does special thinks with it especially for mobile-sites.

My solution for this is to build a new HTML-file which only contains everything that you need for your button and place it in the origin page with an iframe. I think that is the safest solution to not collide with other javascripts.

Here is an example solution: You first make a file for the button that needs jquery.mobile().

mobile.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
        <link type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" rel="stylesheet" />

        <script type="text/javascript">
            jQuery(document).ready(function() {
                if (inIframe()) {
                    var $links = jQuery('a[href]');

                    $links.unbind('click').click(function(event) {
                        event.preventDefault();

                        var $this = jQuery(this);
                        var href = $this.attr('href');

                        window.parent.location.href = href;
                    });
                }
            });

            var inIframe = function() {
                return (top != self);
            };
        </script>

        <style type="text/css">
            [data-role="page"] {
                background-image: none;
                background-color: white;
            }
            [data-role="button"] {
                margin-left: 3px;
                margin-right: 3px;              
            }
        </style>
    </head>
    <body>
        <a href="http://stackoverflow.com/a/13959531/655224" data-role="button">Tutorial</a>
    </body>
</html>

index.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style type="text/css">
            iframe {
                border: 0 none;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe src="mobile.html" width="150" height="50" scrolling="no" />
    </body>
</html>

See also the DEMO

algorhythm
  • 8,530
  • 3
  • 35
  • 47
  • Interesting, this is exactly what I'm trying to do. Any resources you can provide where this ends up with problems? – Tom Dec 19 '12 at 19:59
  • No, when I realized this problems I actually started up with my solution. I had no desire in solving the upcoming problems ;-). Maybe I can show some code tomorrow. Have a little patience. – algorhythm Dec 19 '12 at 20:10
  • +1 as it is an interesting solution. I've decided to go the way of using `touchstart` event. Specifically this solution by Rafael Fragoso found [here](http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both). This way I don't need jquery mobile. – Tom Dec 21 '12 at 15:49
  • thanks, hey I had no problems with this solution. I think it is the safest one. I just made it like this because I wanted to use the jQuery.mobile-datebox-slidebox ( http://dev.jtsage.com/jQM-DateBox2/ ) in the site. This control is afaik not available without jquery.mobile. With an iframe, all problems are lost. And every browser I know is compatible with iframes, even IE6 ;) – algorhythm Dec 21 '12 at 19:30
0

I did that: 

$('#button').parent().find('.ui-btn-text').text('');

It worked for me, not what I wanted but its fine! :)

user1899590
  • 1