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

eydg · 02-15-2013, 07:24 PM

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?

sunfighter · 02-15-2013, 08:29 PM

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().

Airblader · 02-15-2013, 08:32 PM

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.

eydg · 02-15-2013, 10:10 PM

@ 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

Airblader · 02-16-2013, 10:57 AM

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.

xelawho · 02-16-2013, 02:35 PM

Quote:

Originally Posted by Airblader

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>

Airblader · 02-16-2013, 02:58 PM

Never mind, I was wrong about that. Apparently inlining the labelled element is okay.

sunfighter · 02-16-2013, 04:14 PM

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?

xelawho · 02-16-2013, 07:05 PM

not working for me in 18.0 either, if that's any consolation...

rnd me · 02-16-2013, 08:23 PM

Quote:

Originally Posted by xelawho

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>

felgall · 02-16-2013, 10:20 PM

Quote:

Originally Posted by rnd me

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.

Airblader · 02-17-2013, 08:53 AM

Quote:

Originally Posted by felgall

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.