0

I'm trying to get a value and pass it to a hidden input in order to send form data via $_POST. I have a dropdown button and the following code in order to update the value:

jQuery(document).ready(function($){

    var espSeleccionada = $('button[data-id="select-especialidad"]');
    espSeleccionada.on("click", function() {
        // if changed to, for example, the last option, then
        // $(this).find('option:selected').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).text();
        // and update the hidden input's value
        $('#boton-prueba').text(x);
    });

});

The code is supposed to pass the value from one button to another, as shown in here the example, but, when I load the code from WordPress nothing happens. Instead, when I write it on the console it works fine. There are no JS errors in console.

Please note that I'm using .text() to test if the code works, but it would have .val() before going live.

This is the button HTML:

<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="select-especialidad" title="Hacienda" aria-expanded="false"><span class="filter-option pull-left">Hacienda</span></button>

Here is an example.

EDIT TO CLARIFY HOW I AM ADDING THE CODE TO IN WORDPRESS:

I add the script via functions.php. This is my code:

function loading_my_scripts() {
    wp_enqueue_style( 'buscopreparador-style', get_stylesheet_uri() );
    wp_deregister_style( 'buscopreparador-style' );

    if ( !is_admin() ) {

        wp_enqueue_style( 'styles', get_template_directory_uri() . '/assets/css/styles.css' );
        wp_enqueue_style( 'vertical-tabs', get_template_directory_uri() . '/assets/css/bootstrap.vertical-tabs.min.css' );
        wp_enqueue_style('bootstrap-select-css', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css' );
        wp_enqueue_style( 'open-sans', 'https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic,700,700italic');

        wp_deregister_script( 'jquery' );
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, false, TRUE );
        wp_register_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', false, false, TRUE );
        wp_register_script('bootstrap-tabcollapse', get_template_directory_uri() . '/assets/js/bootstrap-tabcollapse.js', false, false, TRUE );
        wp_register_script('bootstrap-select', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js', false, false, TRUE );
        wp_register_script('theme-js', get_template_directory_uri() . '/assets/js/theme.js', array('jquery'), false, TRUE );

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'bootstrap' );
        wp_enqueue_script( 'bootstrap-tabcollapse' );
        wp_enqueue_script( 'bootstrap-select' );
        wp_enqueue_script( 'theme-js' );
    }

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'loading_my_scripts' );

The code is in theme.js file which looks like this:

( function( $ ) {
    var num_cols = 3,
    container = $('#menu-preparadores-de-oposiciones-en'),
    listItem = 'li',
    listClass = 'sub-list';
    container.each(function() {
        var items_per_col = new Array(),
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
            $(this).append($('<ul ></ul>').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find('.' + listClass).last().append(items[j + pointer]);
            }
        }
    });

    if ($("body").hasClass("page-id-64")) {
      $('.tab-content').addClass('col-sm-9');
      $('#custom-tabs-0').tabCollapse();
    } 

} ) ( jQuery );

jQuery(document).ready(function($){

    var espSeleccionada = $('button[data-id="select-especialidad"]');
    espSeleccionada.on("click", function() {
        // if changed to, for example, the last option, then
        // $(this).find('option:selected').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).html();
        // and update the hidden input's value
        $('#boton-prueba').html(x);
    });

}); 

( function() {
    var is_webkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
        is_opera  = navigator.userAgent.toLowerCase().indexOf( 'opera' )  > -1,
        is_ie     = navigator.userAgent.toLowerCase().indexOf( 'msie' )   > -1;

    if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
        window.addEventListener( 'hashchange', function() {
            var id = location.hash.substring( 1 ),
                element;

            if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
                return;
            }

            element = document.getElementById( id );

            if ( element ) {
                if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
                    element.tabIndex = -1;
                }

                element.focus();
            }
        }, false );
    }
})();
14
  • please define "won't run". Have you checked of JS errors? Apr 15, 2016 at 8:35
  • The code is supposed to pass the value from one button to another, as shown the linked example, but, when I load the code from WordPress nothing happens. Instead, when I write it on the console it works fine. I've checked for JS errors and I receive the following message related with the customizer: Uncaught TypeError: wp.customize is not a function. Apr 15, 2016 at 8:39
  • how is your code related to the customizer? Apr 15, 2016 at 8:42
  • Not related at all Apr 15, 2016 at 8:44
  • anyway, you problem is probably the error which makes other things not to execute at all due to bailing out on the exception Apr 15, 2016 at 8:44

1 Answer 1

0

Ok, the code is fine, the problem is that the target button[data-id="select-especialidad"] is being used by bootstrap-select and even if the script load before my code, it takes a few seconds or less to process the information.

So the code should be wrapped after a function that checks that the event has been loaded. This is the final code:

$('#select-especialidad').on('loaded.bs.select', function (e) {
    var y = $(this).val();
    $('#select-especialidad-hidden').val(y);

    var espSeleccionada = $('button[data-id="select-especialidad"] > span.filter-option.pull-left');
        espSeleccionada.on("click", function() {
            var x = $(this).text();
            $('#select-especialidad-hidden').val(x);
        });
});

loaded.bs.select here more info on the bootstrap-select events.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.