CODEWITHSUNDEEP
jqueryjquery-ui-tabs
Raviv g
Raviv g

Reputation: 29

jquery tabs not recognize tab ui panel id

I try to find which tab is selected and if "mappanel" id selected do some thing.

I using this:

   function wpuf_shortcode_map( $location, $post_id = null, $args = array(), $meta_key = '' ) {
        global $post;

        // compatibility
        if ( $post_id ) {
            wpuf_shortcode_map_post( $location, $post_id, $args );
            return;
        }



        $default = array('width' => 450, 'height' => 250, 'zoom' => 14);
        $args = wp_parse_args( $args, $default );

        list( $def_lat, $def_long ) = explode( ',', $location );
        $def_lat = $def_lat ? $def_lat : 0;
        $def_long = $def_long ? $def_long : 0;
        ?>

        <div class="google-map" style="margin-left:80px; height: <?php echo $args['height']; ?>px; width: <?php echo $args['width']; ?>px;" id="wpuf-map-<?php echo $meta_key . $post->ID; ?>"></div>

        <script type="text/javascript">

    $('#tabs').tabs({
        show: function(event, ui){

            // check if is "mappanel" and "map" is empty
          if (ui.panel.id == 'mappanel' && $($('#wpuf-map-<?php echo $meta_key . $post->ID; ?>')[0]).is(':empty'))
            {

             alert('asdasd');

             }
            }                    
        });
        </script>
        <?php
    }

html:

 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">תמונות</a></li>
    <li><a class="mp" href="#mappanel">מיקום</a></li>
  </ul>
  <div id="tabs-1">
         <?php
        $images = get_post_meta( $post->ID, 'images' );

        if ( $images ) {
            foreach ( $images as $attachment_id ) {
                $thumb = wp_get_attachment_image( $attachment_id, 'small-thumb' );
                $full_size = wp_get_attachment_url( $attachment_id );

                printf( '<a rel="lightbox" href="%s" class="img" >%s</a>', $full_size, $thumb );
            }
        }else{

            echo '<span style="font-size:24px;color:red;">אין תמונות</span>';
        }
        ?>
  </div>
  <div id="mappanel">
     <?php echo wpuf_shortcode_map( 'location', $post->ID ); ?> 
  </div>
</div>

The tabs working perfect, but this:

 if (ui.panel.id == 'mappanel' && $($('#wpuf-map-<?php echo $meta_key . $post->ID; ?>')[0]).is(':empty'))
        {

         alert('asdasd');

         }

I cant make it work in no way, the alert not working.

even if I check like this if (ui.panel.id == 'mappanel') its not working.

not working, what I am doing wrong?

Upvotes: 2

Views: 353

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use the activate event like

$("#tabs").tabs({
    activate: function (e, ui) {
        //if (ui.newPanel.is('#mappanel') && $('#wpuf-map-<?php echo $meta_key . $post->ID; ?>').eq(0).is(':empty')) {
        if (ui.newPanel.is('#mappanel')) {
            console.log('yes mappanel')
            //do your stuff
        }
    }
});

Demo: Fiddle

Upvotes: 1

Related Questions