jquery tabs not recognize tab ui panel id -

i try find tab selected , if "mappanel" id selected 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 "mappanel" , "map" 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 $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, this:

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

i cant make work in no way, alert not working.

even if check if (ui.panel.id == 'mappanel') not working.

not working, doing wrong?

you need use 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 stuff         }     } }); 

demo: fiddle