使用jquery在Wordpress自定義元框中添加'添加另一個'選項$ .post

我創建了一個帶有自定義帖子類型的wordpress插件，並在該帖子中鍵入了一個自定義元框。

在元框中，我有一個讓用戶輸入的表單：Date，Media，Title。

的形式如下：

$mc_date = get_post_meta($_GET['post'],'mc_date',true); 
$mc_media = get_post_meta($_GET['post'],'mc_media',true); 
$mc_title = get_post_meta($_GET['post'],'mc_title',true); 

echo '<form id="add_media_form">'; 
echo '<table>'; 
echo '<tr>'; 
echo  '<td>Date</td><td>Media</td><td>Title</td>'; 
echo '</tr>'; 
echo '<tr>'; 
echo  '<td><input type="text" name="mc_date" value="'.$mc_date.'" class="datepicker"/></td>'; 
echo  '<td><input type="text" name="mc_media" value="'.$mc_media.'" /></td>'; 
echo  '<td><input type="text" name="mc_title" value="'.$mc_title.'" /></td>'; 
echo  '<td><a href="#" class="add_new_media" rel="'.WP_PLUGIN_URL.'/mc"><img src="'.WP_PLUGIN_URL.'/mc/plus.png" /></a></td>'; 
echo '</tr>'; 
echo '</table>'; 
echo '</form>'; 
echo '<div class="addmedianotify"></div>';

的jQuery：

jQuery('.add_new_media').click(function(e){ 
    var plug = jQuery(this).attr('rel'); 
    e.preventDefault(); 
    jQuery.post(plug + '/ajax_add_media.php',jQuery('#add_media_form').serialize(),function(data){ 
     jQuery('.addmedianotify').html('<span>'+data+'</span>'); 
    }); 
});

我想要做的，就是當用戶點擊「add_new_media」鏈接/圖像一組新的文本框對於日期，媒體和標題將出現。

我主要關心的是，命名那些動態的輸入有什麼用。並保存並檢索其中的自定義數據。

來源

2012-06-30 Jetoox

因爲當用戶點擊'更新'時頁面仍然會更新，所以你需要能夠將你的字段保存到save_post和你的ajax中。使用Ajax可能不是最好的方法，因爲您需要將這些數據保存兩次，爲自己做更多的工作。我會拋棄ajax，只需使用html array，這樣您就可以添加字段並在用戶單擊「更新」時進行一次提交。要根據用戶需要添加新行，我只需克隆你的tr並將其附加到click事件中的表中。喜歡的東西...

的PHP & HTML

<a href="#" class="add_new_media"><img src="'.WP_PLUGIN_URL.'/mc/plus.png" /></a> 
<table> 
    <tr> 
     <td>Date</td> 
     <td>Media</td> 
     <td>Title</td> 
     <td></td> 
    </tr> 
    <?php 
    //$mcs will be a multi-dimensional array with this method 
    $mcs = get_post_meta($post->ID,'mcs',true); 

    //Loop through each set of saved mc data (date, media, and title per item) and output inputs so the saved values can be edited and resaved. 
    foreach ($mcs as $mc) : ?> 
    <tr> 
     <td><input type="text" name="mc[][date]" value="<?php echo $mc['date'] ?>" class="datepicker"/></td> 
     <td><input type="text" name="mc[][media]" value="<?php echo $mc['media'] ?>" /></td> 
     <td><input type="text" name="mc[][title]" value="<?php echo $mc['title'] ?>" /></td> 
     <td><a href="#" class="remove">Remove</a></td> 
    </tr> 
    <?php endforeach ?> 
</table>

JavaScript的

<script> 
    (function($){ 
     //Grab the first 
     $('.add_new_media').click(function(e) { 
      //Use the first tr as a cookiecutter and add another cookie to the bowl :) 
      $('table tr:first-child') 
       .clone() 
       .appendTo($('table')) 
       .find('input') 
        .val('') 
     } 
     $('.remove').click(function(){ 
      $(this).parent().parent().remove() 
     }) 
    })(jQuery) 
</script>

在表單提交的PHP

<?php 
    if ($_POST) : 

     //$_POST['mc'] is a multi-dimensional array of all the date/media/title input rows 
     print_r($_POST['mc']); 
     /* 
      ..would look something like 
      Array (
       [0] => Array (
        'date' => 'some value', 
        'media' => 'some value', 
        'title' => 'some value' 
       ), 
       [1] => Array (...), 
       [2] => Array (...) ... and so on 
      ) 
     */ 

     //RUN INPUT VALIDATION!! 

     //Update the list 
     update_post_meta($post->ID, 'mcs', $_POST['mc']); 
    endif; 
?>

來源

2012-06-30 21:35:51 James

使用jquery在Wordpress自定義元框中添加'添加另一個'選項$ .post

回答

相關問題