Error in jquery following code

javascript jquery wordpress

40 观看

1回复

1 作者的声誉

I'm trying the following code to add the rows in wordpress plugin.

function product_slider_post_meta_box_doc($object, $box){ 

    global $post;

?>

    <p>
        <label for="btn_text">Heading</label>
        <br/>
        <input type="text" name="heading" id="heading" style="width: 97%;" value="<?php echo esc_html( get_post_meta( $object->ID, 'heading', true ), 1 ); ?>"/>  
    </p>

    <p>
        <label for="btn_link">Detail</label>
        <br/>
        <input type="text" name="detail" id="detail" style="width: 97%;" value="<?php echo esc_html( get_post_meta( $object->ID, 'detail', true ), 1 ); ?>"/>

    </p>

    <p>
        <label for="btn_text">Button Text</label>
        <br/>
        <input type="text" name="btn_text" id="btn_text" style="width: 97%;" value="<?php echo esc_html( get_post_meta( $object->ID, 'btn_text', true ), 1 ); ?>"/>  
    </p>

    <p>
        <label for="btn_link">Button Link</label>
        <br/>
        <input type="text" name="btn_link" id="btn_link" style="width: 97%;" value="<?php echo esc_html( get_post_meta( $object->ID, 'btn_link', true ), 1 ); ?>"/>

    </p>

     <div>
      <label for="slider_img">Slider Image</label>
      <br />
      <input type="text" class="slider_img" name="slider_img" id="slider_img" style="width: 75%;" value="<?php echo get_post_meta( $object->ID, 'slider_img', true ); ?>"/>
      <?php 
        if( get_post_meta( $object->ID, 'slider_img', true ) ):
          echo '<img id="slider_img_id" style="clear: both;display:block;padding: 5px;cursor:crosshair;" class="header_logo98" src="'. get_post_meta( $object->ID, 'slider_img', true ) .'" height="500"/>';
        else:
          echo '<img style="display:none;clear: both;padding: 5px;cursor:crosshair;" id="slider_img_id" class="header_logo98" src="" height="500"/>';
        endif; 
      ?>
      <strong><span class="position"></span></strong>
    </div>
<?php
    if(function_exists( 'wp_enqueue_media' )){
      wp_enqueue_media();
    }
    else{
      wp_enqueue_style('thickbox');
      wp_enqueue_script('media-upload');
      wp_enqueue_script('thickbox');
    }
  ?>
  <script>
    jQuery(document).ready(function(){
        jQuery("#slider_img_id").click(function(e) {
            var offset =  jQuery(this).offset();
            var wide = jQuery("#slider_img_id").width();
            var height = jQuery("#slider_img_id").height();

            var offset_t = jQuery(this).offset().top - jQuery(window).scrollTop();
            var offset_l = jQuery(this).offset().left - jQuery(window).scrollLeft();

            var left = (e.clientX - offset_l) *100/wide - 1.5;
            var top =(e.clientY - offset_t)*100/height - 1.5;

           jQuery(".position").html('Top Position <input type="text" class="top" value=' + top+"%" + ' disabled >  Left Position <input type="text" class="left" value=' + left+"%" + ' disabled >');

      });

      jQuery('.slider_img').click(function(){
        var imgId = jQuery(this).next('.header_logo98').attr('id');
        var inputId = jQuery(this).attr('id');
        var custom_uploader = wp.media({
          title: 'Banner Image',
          button: {
            text: 'Upload Image'
          },
          multiple: false
        })
        .on('select', function() {
          var attachment = custom_uploader.state().get('selection').first().toJSON();
          jQuery('#'+imgId).attr('src', attachment.url);
          jQuery('#'+imgId).css('display', 'block');
          jQuery('#'+inputId).val(attachment.url);
        })
        .open();
      });
    });
  </script>
<?php 
    $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);

    wp_nonce_field( 'hhs_repeatable_meta_box_nonce', 'hhs_repeatable_meta_box_nonce' );
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function( $ ){
            $( '#add-row' ).on('click', function() {
                var row = $( '.empty-row.screen-reader-text' ).clone(true);
                row.removeClass( 'empty-row screen-reader-text' );
                row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
                return false;
            });

            $( '.remove-row' ).on('click', function(){
                $(this).parents('tr').remove();
                return false;
            });

            **$('.grab').on('click', function(){
                if($('.top').val() == undefined){
                    alert('Choose location by clicking over the image');  
                }
                else{
                    alert($(this).parents('tr').html());
                    alert($('.left').val());
                    $(this).parents('tr').find(".left-val").val($('.left').val());
                    $(this).parents('tr').find(".top-val").val($('.top').val());
                    //alert(parents_tr.find('.left-val').val());
                }

                //$(this).parents('tr').remove();
                return false;
            });**
        });
    </script>

    <table id="repeatable-fieldset-one" width="100%">
        <thead>
            <tr>
                <th width="30%">Select Product</th>
                <th width="21%">Position From Top(in %)</th>
                <th width="21%">Position From Left(in %)</th> 
                <th width="8%"></th>
            </tr>
        </thead>
        <tbody>
            <?php

              $products_array = array();
              $args = array( 'post_type' => 'product' , 'post_status' => 'publish');
              $loop = new WP_Query( $args );
              $i = 0;
              while($loop->have_posts()) : $loop->the_post();
                  $b = get_the_title();
                  $a = get_the_permalink();
                  $products_array[ $a ] =$b ;
              endwhile;
            if ( $repeatable_fields ) :

            foreach ( $repeatable_fields as $field ) {
            ?>
                <tr>

                    <?php 
                    echo '<td><select name="product_id[]"><option value="">-------</option>';

                    asort($products_array);
                    reset($products_array); 
                    foreach($products_array as $p => $w):
                        $mn = '<option value="'.$p.'"';

                        if($p == esc_attr( $field['product_id'] )){
                            $mn .= 'selected="selected"';   
                        }

                        $mn .= '>'. $w.'</option>'; //close your tags!!
                        echo $mn;
                    endforeach;

                    echo '</select></td>';

                    ?>
                    <td><input type="text" class="widefat widefat1 top-val" title="check positions by clicking on image and paste here" name="top[]" value="<?php if($field['top'] != '') echo esc_attr( $field['top'] ); ?>" /></td>
                    <td><input type="text" class="widefat left-val" title="check positions by clicking on image and paste here" name="left[]" value="<?php if($field['left'] != '') echo esc_attr( $field['left'] ); ?>" /></td>
                    <td><a class="button remove-row" href="#">Remove</a></td>
                    <td><a class="button grab" href="#">Grab</a></td>
                </tr>
            <?php
            }
            else :

            ?>
                <tr>

                    <?php 
                    echo '<td><select name="product_id[]"><option value="">-------</option>';
                    asort($products_array);
                    reset($products_array); 
                    foreach($products_array as $p => $w):
                        echo '<option value="'.$p.'">'.$w.'</option>'; //close your tags!!
                    endforeach;
                    echo '</select></td>';
                    ?>

                    <td><input type="text" class="widefat widefat1" title="check positions by clicking on image and paste here" name="top[]" /></td>
                    <td><input type="text" class="widefat" title="check positions by clicking on image and paste here" name="left[]" value="" /></td>
                    <td><a class="button remove-row" href="#">Remove</a></td>
                    **<td><a class="button grab" href="#">Grab</a></td>**
                </tr>
            <?php endif; ?>

                <tr class="empty-row screen-reader-text">

                    <?php 
                    echo '<td><select name="product_id[]"><option value="">--------</option>';
                    asort($products_array);
                    reset($products_array); 
                    foreach($products_array as $p => $w):
                        echo '<option value="'.$p.'">'.$w.'</option>'; //close your tags!!
                    endforeach;
                    echo '</select></td>';

                    ?>  
                    <td><input type="text" class="widefat widefat1" title="check positions by clicking on image and paste here" name="top[]" value="" /></td>
                    <td><input type="text" class="widefat" title="check positions by clicking on image and paste here" name="left[]" /></td>
                    <td><a class="button remove-row" href="#">Remove</a></td>
                    <td><a class="button grab" href="#">Grab</a></td>
                </tr>
        </tbody>
    </table>
    <p><a id="add-row" class="button" href="#">Add another</a></p>

<?php 
}
function product_slider_save_post_meta_box_doc($post_id, $post){

if ( ! isset( $_POST['hhs_repeatable_meta_box_nonce'] ) ||
    ! wp_verify_nonce( $_POST['hhs_repeatable_meta_box_nonce'], 'hhs_repeatable_meta_box_nonce' ) )
        return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;

    if (!current_user_can('edit_post', $post_id))
        return;


    if(isset($_POST['slider_img']) && ($_POST['slider_img'] != '')){
        update_post_meta( $post_id, 'slider_img', stripslashes( $_POST['slider_img'] ) );
    }


    if(isset($_POST['heading']) && ($_POST['heading'] != '')){
        update_post_meta( $post_id, 'heading', stripslashes( $_POST['heading'] ) );
    }

    if(isset($_POST['detail']) && ($_POST['detail'] != '')){
        update_post_meta( $post_id, 'detail', stripslashes( $_POST['detail'] ) );
    }

    if(isset($_POST['btn_text']) && ($_POST['btn_text'] != '')){
        update_post_meta( $post_id, 'btn_text', stripslashes( $_POST['btn_text'] ) );
    }

    if(isset($_POST['btn_link']) && ($_POST['btn_link'] != '')){
        update_post_meta( $post_id, 'btn_link', stripslashes( $_POST['btn_link'] ) );
    }



    $old = get_post_meta($post_id, 'repeatable_fields', true);
    $new = array();

    $product_id = $_POST['product_id'];
    $top = $_POST['top'];
    $left = $_POST['left'];

    $count = count( $product_id );

    for ( $i = 0; $i < $count; $i++ ) {

        if ( $top[$i] != '' ) :

            //$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
            /*
            if ( $price[$i] == '' )
                $new[$i]['price'] = '';
            else
                $new[$i]['price'] = stripslashes( $price[$i] ); // and however you want to sanitize
            */
           if ( $product_id[$i] == '' )
                $new[$i]['product_id'] = '';
            else
                $new[$i]['product_id'] = stripslashes( $product_id[$i] ); // and however you want to sanitize


             if ( $top[$i] == '' )
                $new[$i]['top'] = '';
            else
                $new[$i]['top'] = stripslashes( $top[$i] ); // and however you want to sanitize

               if ( $left[$i] == '' )
                $new[$i]['left'] = '';
            else
                $new[$i]['left'] = stripslashes( $left[$i] ); // and however you want to sanitize
        endif;
    }
    if ( !empty( $new ) && $new != $old )
        update_post_meta( $post_id, 'repeatable_fields', $new );
    elseif ( empty($new) && $old )
        delete_post_meta( $post_id, 'repeatable_fields', $old );
}

I'm adding rows in custom post and on grab its getting location in input type

**<strong><span class="position"></span></strong>**

I'm getting values on clicking grab but not able to load values in that particular td. It is loading only in already saved fields. But remove is working fine. How come that is possible if remove functionality is working fine

作者: bhawna 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

317 作者的声誉

As per understood you want to add new tr at last, which is clone of .empty-row.screen-reader-text this tr.

$( '#add-row' ).on('click', function() {

    var row = $( '.empty-row.screen-reader-text' ).clone().appendTo('#repeatable-fieldset-one');
    row.removeClass( 'empty-row screen-reader-text' );
    return false;
});
作者: user3888958 发布者: 2017 年 9 月 15 日
32x32