Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post

    same event - when wrapped in a function, messes up. WTF?

    Why could the same action when turned into a function stop working? are there any general rules? here is a very concrete and clear example of this issue.

    jQuery Mobile
    WORKING jsbin here

    in this version, js works well. the label of radio button gets changed instantly.

    Code:
      var radio_elem = $('#edit-new-amount-no-cost'); $("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
    but if you remove the /* s and thus turn the same action into a function triggered by the other button,



    Code:
        function go(){
        var radio_elem = $('#edit-new-amount-no-cost');
        $("label[for='edit-new-amount-no-cost']").html(radio_elem).append("label changed");
        }
    the the same code messes formatting of the destination. what's wrong?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    This
    jQuery Mobile
    WORKING jsbin here
    Never works for me. When I click your link all I get is an image with a rotating top. I never get code. Why not just post the code here?

    Anyway. I don't see how your first line works. This
    Code:
    var radio_elem = $('#edit-new-amount-no-cost');
    Does nothing. radio_elem is not equal to anything, it's blank. You need to enclude what you want from '#edit-new-amount-no-cost' like .html() or text().

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Don't put the radio button within the label.

    Edit: What I said is still true, but it doesn't fix the issue. This is due to the fact that jQuery Mobile inserts some HTML inside the label to attach styling. You need to adress the inner span element instead of overwriting it. For example:

    Code:
    $("label[for='edit-new-amount-no-cost'] .ui-btn-text").html("label changed");
    The reason this doesn't break without the function around it is that then the code is executed before jQM's enhancement run. However, the code above will break if run before the enhancement (i.e. without a wrapping function called later on).

    What sunfighter said is true too, of course. Your code didn't make much sense, but that didn't adress the actual issue.
    Last edited by Airblader; 02-15-2013 at 08:47 PM.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    @ Sunfighter
    you must be using ie, or i don't know why. until forums incorporate the same functionality, jsbin and the like are a great addition. you not only get a sandbox for freestyle experiments, but also may test the results instantly - and share what works by just linking there. on my xp, it is ie where jsbin sucks.


    thank you Airblader, your correction does it. indeed, the var definiiton was redundant here.

    here's how it looks now:


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head>
    
    <body style="text-align:center">
    <div class="form-radios">
      <div class="form-item" id="edit-new-amount-no-cost-wrapper">
        <label class="option" for="edit-new-amount-no-cost" >
        <input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost" class="form-radio"/>
        original label
        </label>
      </div>
        </div>
    <input name="click to change the label" type="button" onClick="go()">
    <script> 
    
     </script>
      
      
      
      </body>
      
    </html>
    Code:
    function go(){
    
    $("label[for='edit-new-amount-no-cost'] .ui-btn-text").html("label changed");
    
    
    }
    jsbin

    I will be back.
    T2
    Last edited by eydg; 02-15-2013 at 10:28 PM.

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You still have the input within the label. This is not how the label is intended to be used. By the way, a great alternative to jsbin is jsfiddle.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by Airblader View Post
    You still have the input within the label. This is not how the label is intended to be used.
    just curious... is there anything actually wrong with this, apart from going against intent? because it seems to me that it's kind of handy to be able to do away with the "for" attribute on the label (and possibly the id on the button) and just do this:
    Code:
    <label class="option">
        <input type="radio" name="new_amount" value="no_cost" class="form-radio"/>
        original label
        </label>

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Never mind, I was wrong about that. Apparently inlining the labelled element is okay.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Can someone help here? I'm using FireFox ver 18.0.2 and can not get JS BIN to work. I tried it in Opera and that's OK. I also disabled all add ons in FF and it still does not work. Any ideas out there?

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    not working for me in 18.0 either, if that's any consolation...

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by xelawho View Post
    just curious... is there anything actually wrong with this, apart from going against intent? because it seems to me that it's kind of handy to be able to do away with the "for" attribute on the label (and possibly the id on the button) and just do this:
    Code:
    <label class="option">
        <input type="radio" name="new_amount" value="no_cost" class="form-radio"/>
        original label
        </label>
    there;'s nothing wrong with that. in fact, older copies of safari didn't connect the for attrib, so you had to nest. that's long-fixed and a simple nested input in a label seems to work everywhere.

    i like to use a pattern like
    Code:
     
    <label>
      <b>field title</b>
      <input>
    </label>
    beacuse it lets you style the semantically meaningless (in html5) <b> tag using "display:inline-block; width:8em;" (or whatev) to left-justify the form inputs while having them lineup nicely and providing a large click-catching box around the input.

    sometimes it's nice to use labels themselves WITH an ID-hitting FOR attrib to duplicate button functionality in another spot, without having another javascript onclick() binding to duplicate the click action.

    ex:
    Code:
    <label for=btnPreSubmit>Done, check and save my info.</label>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by rnd me View Post
    there;'s nothing wrong with that. in fact, older copies of safari didn't connect the for attrib, so you had to nest. that's long-fixed and a simple nested input in a label seems to work everywhere.
    That it didn't work with old browsers and had to be inlined was the only reason for doing it that way. Semantically it is nonsense for an input to be a part of its own label.

    It really depends on whether you want your HTML to be semantic or not whether you inline.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by felgall View Post
    Semantically it is nonsense for an input to be a part of its own label.
    Thank you. That is exactly the reason why I said it's wrong, but then I looked it up again to be safe and saw that it is "okay" to do it. But as you said, semantically it just doesn't make sense.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •