WordPress和jQuery Mobile-Listview点击传递数据

时间:2018-07-29 17:34:46

标签: javascript jquery jquery-mobile

我的listview组件(jQuery Mobile)有问题。

我有一个带有Wordpress用户的ListView(循环)。

在列表视图上单击操作并在新页面中传递数据后,我想获取用户信息。

用户列表->单击->用户配置文件信息...

我有这个代码。

/ *页面列表视图* /

 <div data-role="page" id="member">
    <div data-role="header" data-theme="a">
      <h1>Business Club</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
      <h1>Membres</h1>

      <script> /*Get user id col 3 display none ? */
      /*jQuery(document).ready(function($) {
          $(document).on("click", "#userList li", function(e) {
            e.preventDefault();
            var htmlString = $(this).html();
            var user_profil = $(htmlString).find('p').text();
            $("#user_profil_id").val(user_profil);
            $("#form-userList").submit();
          })
        });*/
      </script>

      <ul id="userList" data-role="listview" data-filter="true" data-filter- 
          placeholder="Rechercher un membre" data-inset="true" 
          data-autodividers="true" data-theme="a">

          <?php $args = array(
            'role'    => 'Member',
            'meta_key'   => 'first_name',
            'orderby'    => 'meta_value',
            'order'      => 'ASC'
            );

            $users = get_users( $args );

            foreach ( $users as $user ) {

              echo 

              '<li> 

              <a href="#profil">' . esc_html( $user->first_name ) . ' 
              ' . esc_html( $user->last_name ) . ' ' .
              '<p style="display:none">' . esc_html( $user->ID ) . '</p>' . '</a>

              </li>';

            } 
          ?>      
      </ul>
    </div><!-- /content -->

    <div data-role="footer" data-theme="a" data-position="fixed" data-id="foot" 
     id="foot">
      <div data-role="navbar">
        <ul>
          <li><a href="#index" data-transition="slide" data-role="button" data- 
              icon="grid">Mur</a></li>
          <li><a href="#member" data-transition="slide" data-role="button" data- 
              icon="user">Membres</a></li>
          <li><a href="#events" data-transition="slide" data-role="button" data- 
              icon="calendar">Evènements</a></li>
          <li><a href="#account" data-transition="slide" data-role="button" data- 
              icon="gear">Compte</a></li>
        </ul>
      </div>
    </div><!-- /footer -->
</div><!-- /page -->

/ *配置文件页面* /

<div data-role="page" id="profil">
    <div data-role="header" data-theme="a">
        <a href="#member" class="ui-btn ui-btn-inline ui-icon-back ui-btn-icon-left ui-shadow ui-corner-all btn-back"> Retour</a>
      <h1 style="margin-top:-3px;">Business Club</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">

    <?php

        $user_profil = get_user_by( 'id', $page_id );

        echo '<div class="user-data-mobile"> ' . '<i class="fa fa-mobile-alt fa-lg" aria-hidden="true" style="color:#F37646;"></i>&nbsp;&nbsp;&nbsp;' 
        . get_field('mobile-phone', $user_profil) . '</div>';

        echo '<div class="user-data-mobile"> ' . '<i class="fas fa-briefcase fa-lg" aria-hidden="true" style="color:#527CA4;"></i>&nbsp;&nbsp;&nbsp;' 
        . get_field('business-name', $user_profil) . '</div>';

        echo '<div class="user-data-mobile"> ' . '<i class="far fa-building fa-lg" aria-hidden="true" style="color:#A84C7F;"></i>&nbsp;&nbsp;&nbsp;' 
        . get_field('work-address', $user_profil) . '</div>';

        echo '<div class="user-data-mobile label-website"> ' . '<i class="fas fa-globe-americas fa-lg" aria-hidden="true" style="color:#F7AD34;"></i>&nbsp;&nbsp;&nbsp;' 
        . get_field('business-website', $user_profil) . '</div>';

        echo '<div class="user-data-mobile"> ' . '<i class="far fa-id-badge fa-lg" aria-hidden="true" style="color:#65BD8B;"></i>&nbsp;&nbsp;&nbsp;' 
        . get_field('job-title', $user_profil) . '</div>';

    ?>

    </div><!-- /content -->
</div>

ajax? php发布/获取?我是jquery mobile的初学者。

谢谢!

0 个答案:

没有答案