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 );
    }
})();
  • please define "won't run". Have you checked of JS errors? – Mark Kaplun Apr 15 '16 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. – Kevin Mamaqi Apr 15 '16 at 8:39
  • how is your code related to the customizer? – Mark Kaplun Apr 15 '16 at 8:42
  • Not related at all – Kevin Mamaqi Apr 15 '16 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 – Mark Kaplun Apr 15 '16 at 8:44
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, privacy policy and cookie policy

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