Stack Overflow
Stack Overflow

jQuery Focus function isn't being triggered when used with ` look exactly like it does in the jsfiddle (when the value from the db is "$50_default")? – John S Mar 20 '13 at 22:54

  • Does your debugging show that the on-focus handler for the ` – John S Mar 20 '13 at 22:55
  • @JohnS - Yes, the fiddle is working nicely (you can test it by clicking on the button and it shows you the value that would be submitted) – Chaya Cooper Mar 20 '13 at 22:59
  • @JohnS - There's definitely something different going on with the html because when I test the value with the button I have in the fiddle the value doesn't change in the php. I'm not sure yet what this means, but I discovered that does work if the value is hard-coded in the php (as opposed to fetching it from the db) – Chaya Cooper Mar 20 '13 at 23:18
  • @JohnS - I'm testing various parts of the code to see if I can narrow it down – Chaya Cooper Mar 20 '13 at 23:36
  • @JohnS - I rebuilt the code, and it seems to stop working when I apply either one of the jQuery plugins that I'm using to style – Chaya Cooper Mar 21 '13 at 00:18
  • You say it works with the plugins without the PHP, but without the PHP, none of the options end with "_default" correct? In that case, the "focus" handler is not needed. – John S Mar 21 '13 at 03:05
  • @JohnS - I'm sorry if I wasn't clear - I meant it works with plugins in HTML (like in the fiddle), when the – Chaya Cooper Mar 21 '13 at 03:10
  • Do you have a working fiddle that demonstrates that? Have a look at my [fiddle](http://jsfiddle.net/john_s/JHAPp/9/) that shows it not working with Dropkick. Can you make that work? – John S Mar 21 '13 at 03:30
  • @JohnS - You're absolutely right - After testing it for the past 30 min. I finally found the breakdown in my testing and realized that you're right about it :-( I think your suggestion about using hidden fields sounds like a great workaround. Would you mind showing me an example? – Chaya Cooper Mar 21 '13 at 04:24
  • I have added example code to my answer. – John S Mar 21 '13 at 16:03

    • 3 Answers3

    1

    I should have noticed this before, but the call to $('select').focus is not in a document ready handler, and it comes before the <select> is added to the DOM. Therefore, it isn't getting bound to the <select>.

    Try:

    <script>
$(function() {
    $('select').focus(function () {
        var option = $(this).find("option[value*=default]");
        option.attr('value', option.attr('value').replace(/_default/g, ''));
    });
});
</script>
    John S
    • 21,212
    • 8
    • 46
    • 56
    1

    In your comment you say you are trying to use Dropkick or the jQuery UI MultiSelect Widget. Since this is not a multi-select drop-down, I would assume Dropkick would be what you want.

    Here is a jsfiddle that shows the code does not work with Dropdkick.

    My understanding is that normal event binding will not work with Dropkick. Instead, you have to use a dropkick callback, like this:

    $('select').dropkick({
    change: function(value, label) {
        alert('You picked: ' + label + ':' + value);
   }
});

    It also appears that the "change" callback is the only one available. There doesn't appear to be support for a "focus" callback.

    A further issue is that there doesn't appear to be a way to change the options for a Dropkick select. (I tried your code in a jsfiddle and the value went to "0".)

    If you are fine with being limited to using the "change" callback, a work-around for the fact that you cannot change the option values would be to not include "_default" on any of the values. Instead, you would include a hidden field in the form. When the value from the db ends with "_default", the hidden field is set to "true"; otherwise it is set to "false". The "change" callback for the dropkick select would set the hidden value to "false". When the form is posted, the server checks if the hidden value is "true" and appends "_default" on the end of the posted select value when it is.

    UPDATE:

    Here is what the code to display the page would look like if you were to implement the hidden field:

    <script>
$(function() {
    $('select').dropkick({
        change: function() {
            $('input[name=isDefaultPriceSelected]').val('false');
       }
    });
});
</script>

<?php
    // Helper method that tells if the given string ends with the given substring.
    function endsWith($str, $substr) {
        $substrLength = strlen($substr);
        return substr_compare($str, $substr, -substrLength, substrLength) === 0;
    }

    // Helper method that prints out a hidden input element.
    function printHiddenInput($name, $value) {
        echo '<input type="hidden" name="' . $name . '" value="' . $value . '" />
    }
?> 

<select name="jeans">
<?php
    $options = array("Null"=>"", "$0"=>"$0", "$50"=>"$50", "$100"=>"$100", "$150"=>"$150");
    echo printSelectOptions($options, $row_default['jeans']); 
?> 
</select>

<?php
    echo printHiddenInput('isDefaultPriceSelected', endsWith($row['jeans'], '_default') ? 'true' : 'false'); 
?>

    You still need to deal with the code that handles the form post. It will have to look for both the select value and the hidden value. If the hidden value is "true", then "_default" should be appended on the to the end of the posted select value.

    Note: You would no longer be using the replaceKey() helper function. :(

    John S
    • 21,212
    • 8
    • 46
    • 56
    • It took me a little while to wrap my head around this :-) Out of curiosity, is there a benefit to this method over using hidden – Chaya Cooper Mar 22 '13 at 01:55
    • I never thought of using a hidden select for this, but then, this is a different situation. With a Dropkick select a value will be posted. That is not the case with a slider. I would rather use a hidden input than trying to hide a select though. You could use a hidden input with the slider. Here is a [jsfiddle](http://jsfiddle.net/john_s/78rd5/) showing how. You just need to set up a JavaScript array to hold the values. – John S Mar 22 '13 at 03:17
    • My js function for changing values isn't working with text boxes, but I don't mind using – Chaya Cooper Mar 22 '13 at 15:30
    • The only reason I'd rather try doing it one of those ways is that I think it'll be easier to use with so many elements (I have over 300+) :-) – Chaya Cooper Mar 22 '13 at 15:35
    • @Chaya Cooper - I'm not sure what js function you are referring to when you say its "for changing values" but "isn't working for text boxes." – John S Mar 23 '13 at 04:42
    • @Chaya Cooper - When you use `` elements visible to the user? – John S Mar 23 '13 at 04:43
    • @Chaya Cooper - As to the change callback for the Dropkick element, doesn't it just set the hidden input from "true" to "false" when it is called the first time, and after that it just keeps setting it to "false"? – John S Mar 23 '13 at 04:43
    • @Chaya Cooper - I saw that stackoverflow question about programmatically changing the value of a Dropkick element before, but it wasn't easy to follow and seems like a hack. I realize you probably like the look of Dropkick, but it doesn't seem to provide much in the way of functionality. You'd have to explain why you need to change its value programmatically. Perhaps there is another way to achieve your goal without having to resort to that. – John S Mar 23 '13 at 04:46
    • I was referring to the focus/change function which changes the elements that are paired to sliders, I'm hiding the – Chaya Cooper Mar 23 '13 at 07:18
    • I created a fiddle to show you what I meant about the Dropkick Change function only working the 1rst time it's called (figured it's easier to demonstrate the problem then try to explain it ;-) ) http://jsfiddle.net/chayacooper/yhAX5/1/ When you click on the 1rst the first time it's clicked, but if you change the value a 2nd time it isn't updating it again. I noticed that it executes correctly if I remove lines 1 & 2 in the change function (which remove the '_default' value). I'm not sure if there's a way to split those up to get around the problem – Chaya Cooper Mar 23 '13 at 19:09
    • You're right about Dropkick - I have to style the – Chaya Cooper Mar 23 '13 at 19:33
    • The primary reason that I'm trying to change the value programmatically is so that I'll be able to assign more weight to actively selected values than values in their 'default state' - which the user may have consciously decided to leave set to that value or may have just skipped. I'm also going to display it slightly differently on the user's account page to make it easy for the user to visually distinguish between the two. – Chaya Cooper Mar 23 '13 at 19:40
    • I just realized that I might not have fully answered your 1rst question about the text boxes :-) What I was trying to say is that I couldn't get the function which changes values (by removing '_default' on focus/change) to work with text boxes, so I was probably better off just using – Chaya Cooper Mar 23 '13 at 19:50
    • 1
      @Chaya Cooper - I think the issue with the change function only working the first time is that it caused an error when there were not option values which ended with "_default". Check out this modified [jsfiddle](http://jsfiddle.net/john_s/yhAX5/2/) that corrects that. – John S Mar 23 '13 at 21:26
    • That did it :-D Is there any downside over using this method instead of the more complex true/false function? – Chaya Cooper Mar 23 '13 at 21:42
    • 1
      @Chaya Cooper - You've lost me. I don't know what true/false function you are referring to. I did update the [jsfiddle](http://jsfiddle.net/john_s/yhAX5/4/) though. The helper function is shorter now. I realized the call to `$.each()` was unnecessary. – John S Mar 23 '13 at 21:55
    • Love the shorter version :-D Don't worry about the info about the true/false function (I'd just been responding to something you'd asked), since we solved the issue :-D Now I just have that one outstanding issue with the '$' signs in the other posting to figure out – Chaya Cooper Mar 24 '13 at 16:38
    • I was wondering if there's a way to modify the Dropkick change function to use a single selector so that I don't need to set separate change events for each – Chaya Cooper Mar 24 '13 at 17:19
    0

    Have you tried using 

    $(document).on('focus', 'select', function() {
    //code here
});
    Vitaliy Isikov
    • 3,647
    • 9
    • 38
    • 46