使用AJAX/jQuery填充DIV的组合框

时间:2016-07-08 作者:Riccardo

什么是一个好的技术(2016年)来允许动态填充Wordpress页面?

基本上,我必须根据组合框的选择在网页中动态加载DIV。

顺便问一下,在Wordpress环境中有什么陷阱需要避免吗?

谢谢

1 个回复
最合适的回答,由SO网友:dg4220 整理而成

在不知道如何填充组合框的情况下,我会这样做:使用jQuery捕获表单选择:

jQuery(\'#formElementID\').change(function () {//this captures dropdown menu change event
  //call js function and pass form value - in my case a post id
   fetchTenantWoContactInfo(jQuery(\'#formElementID\').val());
}); 
使用函数调用ajax函数以获取帖子信息

function fetchTenantWoContactInfo(unitID) {

        jQuery.ajax({
            type: \'POST\',
            url: \'http://apexpropertymanagement-me.com/wp-admin/admin-ajax.php\',
            data: { fgpsnunitID: unitID, action: \'getOccupantsTemplate\' },
            dataType: \'html\',
            success: function(data){
                jQuery(\'.current-wo-contact-info\').replaceWith(\'<div class="current-wo-contact-info">\' + data + \'</div>\');
            },

        });

    }
在函数文件中添加以下php函数并返回结果。我在这里主要返回post\\u元数据,但重点是组装和回显您的内容字符串。然后在ajax调用的“成功”区域中,替换模板中指定的div区域。就我而言<div class="current-wo-contact-info"></div>

function getOccupantsTemplate_fn() {

   global $wpdb;
   $occ_ids = get_post_meta( $_POST[\'fgpsnunitID\'], \'fgpsn_property_unit_occupant_id\', true );
    //echo substr($occ_ids, 0, (strlen($occ_ids)-1) );
    //fgpsn_property_unit_occupant_id
    if ( isset($occ_ids) && !is_null($occ_ids) && !empty($occ_ids) ) {
        if (is_array($occ_ids)) {
          $cur_occupants = \'\';

            $i = 0;
            foreach($occ_ids as $k=>$v) {
              if ($v != \'\') {

                $cur_occupants .=  get_post_meta( $occ_ids[$i], \'fgpsn_contact_last_name\', true ) . \',
                 \' . get_post_meta( $occ_ids[$i], \'fgpsn_contact_first_name\', true ) . \'<br>
                <b>Phone: </b>\' . get_post_meta( $occ_ids[$i], \'fgpsn_contact_phone\', true ) . \'<br>
                <b>Email: </b>\' . get_post_meta( $occ_ids[$i], \'fgpsn_contact_email\', true ) . \'<br>
                <b>Cell: </b>\' . get_post_meta( $occ_ids[$i], \'fgpsn_contact_cell_phone\', true ) . \'<br>\';
                $i++;
              } 

            }
        } else {

                $cur_occupants .=  get_post_meta( $occ_ids, \'fgpsn_contact_last_name\', true ) . \',
                 \' . get_post_meta( $occ_ids, \'fgpsn_contact_first_name\', true ) . \'<br>
                <b>Phone: </b>\' . get_post_meta( $occ_ids, \'fgpsn_contact_phone\', true ) . \'<br>
                <b>Email: </b>\' . get_post_meta( $occ_ids, \'fgpsn_contact_email\', true ) . \'<br>
                <b>Cell: </b>\' . get_post_meta( $occ_ids, \'fgpsn_contact_cell_phone\', true ) . \'<br>\';

        }
  }
  $cur_occupants = substr( $cur_occupants, 0, (strlen($cur_occupants)-1) );
  echo $contacts . $cur_occupants;
  //return or print text? html since i dont need to have an array or mehu
  //echo $cur_occupants;
}
最后,您需要为php函数提供ajax访问权限:

add_action(\'wp_ajax_getOccupantsTemplate\', \'getOccupantsTemplate_fn\');
add_action(\'wp_ajax_nopriv_getOccupantsTemplate\', \'getOccupantsTemplate_fn\');