CODEWITHSUNDEEP
jqueryjquery-mobile
CharlesS
CharlesS

Reputation: 1591

Strange Jquery-mobile issues

I have tried a lot on this code but it keeps messing up. The problems:

I cannot find the problem and before I submit a bug to jquery-mobile, I would first like to know if i'm not doing something very stupid.

When I remove the jquery-mobile .js file, everything works perfectly fine, but with it doesn't work.

After submit the url show the #bang in the url and when that's there, it stops working.

Code: 

<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="content">
<form method="post"> 
<a id="minus" href="#">-</a> 
<input type="text" id="value" name="days" value="1" /> 
<a id="plus" href="#">+</a> 
<script> 
$('#home').live('pagecreate',function(event){

    var valueElement = $('#value');
    function incrementValue(e){
        valueElement.val(Math.max(parseInt(valueElement.val()) + e.data.increment, 0));
        return false;
        }

    $('#plus').bind('click', {increment: 1}, incrementValue);

    $('#minus').bind('click', {increment: -1}, incrementValue);

    });
</script> 
<input type="submit" value="submit" />
</div></div> 
</form></body></html>

Edit: changed it to match the mobile framework better, with the below comments added into there. Fixes problem one; the double calling of the method, however the second problem; after submit it stops working.

Phill's answer works and strangely enough it works always like this; 

                                      var inputs = $("input[type='text']");

                                        for(i=0;i<inputs.length;i++) {
                                                if (inputs[i].getAttribute("id") == "value") {
                                                        inputs[i].value = currentValue;
                                                }
                                        }

If I directory select the element, it doesn't work after submit; does anyone know the explanation of that?

Upvotes: 2

Views: 1183

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85368

Working Example:

JS:

var currentValue=1;

$("#minus, #plus").click(function(){
    currentValue = ($(this).attr('id')=='plus') ? currentValue + 1 : currentValue - 1;
    $('#value').val(currentValue);
});

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <a id="minus" href="#">-</a> 
        <input type="text" id="value" name="days" value="1" /> 
        <a id="plus" href="#">+</a>
    </div>
</div>

UPDATE #2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Increment</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $('#home').live('pagecreate',function(event) { 
                var currentValue=1;
                $("#minus, #plus").click(function() {
                    currentValue = ($(this).attr('id')=='plus') ? currentValue + 1 : currentValue - 1;
                    $('input:text[id=value]').val(currentValue);
                });
            });

        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                <form id="theForm" method="post">
                    <a id="minus" href="#" data-role="button" data-inline="true">-</a>                    
                    <a id="plus" href="#" data-role="button" data-inline="true">+</a>
                    <br />
                    <input type="text" id="value" name="days" value="1" />
                    <input type="text" id="newvalue" name="days" value="100" />

                    <input type="submit" value="submit" />
                </form>
            </div>
        </div>

    </body>
</html>

Upvotes: 2

Blowsie
Blowsie

Reputation: 40575

You should read the jquery mobile documentation. http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-scripting.html

Jquery mobile doesnt use document ready, instead it uses page create

$('#aboutPage').live('pagecreate',function(event){
  alert('This page was just enhanced by jQuery Mobile!');
});

Also as for your math, couldn't you just do..

 $('#plus').bind('click', function() {
    $("#value").val($("#value").val() + 1)
 });

Upvotes: 1

Related Questions