CODEWITHSUNDEEP
jqueryjquery-mobile
Tom
Tom

Reputation: 2634

adding jquery mobile adds text to existing html buttons

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?

Upvotes: 0

Views: 633

Answers (3)

user1899590
user1899590

Reputation: 1

I did that: 

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

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

Upvotes: 0

algorhythm
algorhythm

Reputation: 8728

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

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17457

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.

Upvotes: 1

Related Questions