僅適用於Ajax在WordPress中使用Bootstrap Modal的第一個元素

我正在使用Bootstrap模式和Ajax以及提交我的不同產品的預訂表單。 Ajax提交正在工作，但僅適用於第一個產品。當我嘗試提交其他產品的預訂表單時，它會重定向到404錯誤頁面。我試圖調試幾個小時，但沒有奏效。僅適用於Ajax在WordPress中使用Bootstrap Modal的第一個元素

這裏是我的代碼：

完整模式窗體

<div class="package-holder"> 
    <div class="row"> 
     <?php global $post; $catquery = new WP_Query( array(
      'cat' => 3, 
      'posts_per_page' => -1, 
      'orderby' => 'date', 
      'order' => ASC 
     )); ?> 
     <?php while($catquery->have_posts()) : $catquery->the_post(); ?> 
      <?php $id = get_the_id(); ?> 
     <div class="col-sm-6 box-wrap"> 
      <div class="row"> 
       <div class="col-sm-7"> 
        <div class="package-details"> 
         <h3><?php echo $post->post_title; ?></h3> 
         <p><?php echo $post->post_excerpt; ?></p> 
         <button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-<?php echo $id; ?>">More Details</button> 

         <a class="btn btn-danger" data-toggle="modal" data-target=".book-form-<?php echo $id; ?>">Book Package</a> 

         <div class="modal fade bs-example-modal-lg-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
          <div class="modal-dialog modal-lg" role="document"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
            <h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4> 
            </div> 
            <div class="modal-body"> 
            <p><?php the_content(); ?></p> 
            </div> 
            <div class="modal-footer"> 
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
            </div> 
           </div> 
           </div> 
         </div> 

         <div class="modal bform fade book-form-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
          <div class="modal-dialog modal-lg" role="document"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
            <h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4> 
            </div> 
            <div class="modal-body"> 
             <div class="form-wrap"> 
              <form id="packageForm" method="post" class="clearfix"> 
               <div class="row"> 
                <div class="form-group col-sm-6"> 
                 <label for="name" class="">Name</label> 
                 <input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required> 
                </div> 
                <div class="form-group col-sm-6"> 
                 <label for="phone" class="">phone</label> 
                 <input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required> 
                </div> 
                <div class="form-group col-sm-6"> 
                 <label for="email" class="">email</label> 
                 <input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required> 
                </div> 
                <div class="form-group col-sm-6"> 
                 <label for="pref-date" class="">pref-date</label> 
                 <input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required> 
                </div> 
                <input type="hidden" name="package" value="<?php echo $post->post_title; ?>"> 
                <div class="col-sm-12 form-group"> 
                 <label for="message" class="">message</label> 
                 <textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea> 
                </div> 
               </div> 
               <div class="col-sm-12 btn-wrap"> 
                 <button type="submit" class="btn btn-danger">Submit</button> 
                 <input type="hidden" name="action" value="packageForm" /> 
                 <img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" width="30" alt="loading" style="display: none;"> 
               </div> 
               <div id="response"></div> 
              </form> 
             </div>   
            </div> 
           </div> 
           </div> 
         </div> 

        </div> 
       </div> 
       <div class="col-sm-5"> 
        <figure class="image-wrap row"> 
         <?php the_post_thumbnail('full', array('class' => 'img-responsive')); 
         ?> 
        </figure> 
       </div> 
      </div> 
     </div> 
     <?php endwhile; ?> 
     <div class="col-sm-12 box-wrap"> 
     <?php global $post; $full_cat = new WP_Query( array(
      'cat' => 4, 
      'posts_per_page' => 1, 
      'orderby' => 'date', 
      'order' => ASC 
     )); ?> 
      <div class="row"> 
      <?php while($full_cat->have_posts()) : $full_cat->the_post(); ?> 
       <div class="col-sm-9"> 
        <div class="package-details"> 
         <h3><?php the_title(); ?></h3> 
         <p><?php the_excerpt(); ?></p> 
         <button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-lg-<?php echo $id; ?>">More Details</button> 

         <a class="btn btn-danger" data-toggle="modal" data-target=".book-form-<?php echo $id; ?>">Book Package</a> 

         <div class="modal fade bs-example-modal-lg-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
          <div class="modal-dialog modal-lg" role="document"> 
           <div class="modal-content"> 
            <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
            <h4 class="modal-title" id="myModalLabel"><?php echo $post->post_title; ?></h4> 
            </div> 
            <div class="modal-body"> 
            <p><?php the_content(); ?></p> 
            </div> 
            <div class="modal-footer"> 
            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> 
            </div> 
           </div> 
           </div> 
         </div> 

         <div class="modal fade book-form-<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
         <div class="modal-dialog modal-lg" role="document"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
           <h4 class="modal-title" id="myModalLabel">Himalayan Rejuvenation Package</h4> 
           </div> 
           <div class="modal-body"> 
            <div class="form-wrap"> 
              <form id="FullpackageForm" method="post" class="clearfix"> 
               <div class="row"> 
                <div class="form-group col-sm-6"> 
                 <label for="name" class="">Name</label> 
                 <input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required> 
                </div> 
                <div class="form-group col-sm-6"> 
                 <label for="phone" class="">phone</label> 
                 <input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required> 
                </div> 
                <div class="form-group col-sm-6"> 
                 <label for="email" class="">email</label> 
                 <input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required> 
                </div> 
                <div class="form-group col-sm-6"> 
                 <label for="pref-date" class="">pref-date</label> 
                 <input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required> 
                </div> 
                <input type="hidden" name="package" value="<?php echo $post->post_title; ?>"> 
                <div class="col-sm-12 form-group"> 
                 <label for="message" class="">message</label> 
                 <textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea> 
                </div> 
               </div> 
               <div class="col-sm-12 btn-wrap"> 
                 <button type="submit" class="btn btn-danger">Submit</button> 
                 <input type="hidden" name="action" value="FullpackageForm" /> 
                 <img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" width="30" alt="loading" style="display: none;"> 
               </div> 
               <div id="fullresponse"></div> 
              </form> 
            </div>   
           </div> 
          </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <figure class="image-wrap row"> 
         <?php the_post_thumbnail('full', array('class' => 'img-responsive')); 
         ?> 
        </figure> 
       </div> 
      <?php endwhile; ?> 
      </div> 
     </div> 
    </div> 
</div>

從上面的代碼中，阿賈克斯形式

<form id="packageForm" method="post" class="clearfix"> 
    <div class="row"> 
     <div class="form-group col-sm-6"> 
      <label for="name" class="">Name</label> 
      <input id="name" name="name" type="text" class="form-control" placeholder="Your Name" required> 
     </div> 
     <div class="form-group col-sm-6"> 
      <label for="phone" class="">phone</label> 
      <input id="phone" name="phone" type="tel" class="form-control" placeholder="Your Phone Number" required> 
     </div> 
     <div class="form-group col-sm-6"> 
      <label for="email" class="">email</label> 
      <input id="email" name="email" type="email" class="form-control" placeholder="Your Email Address" required> 
     </div> 
     <div class="form-group col-sm-6"> 
      <label for="pref-date" class="">pref-date</label> 
      <input id="pref-date" name="pref_date" type="date" class="form-control" placeholder="Prefered Date" required> 
     </div> 
     <input type="hidden" name="package" value="<?php echo $post->post_title; ?>"> 
     <div class="col-sm-12 form-group"> 
      <label for="message" class="">message</label> 
      <textarea class="form-control" id="message" name="message" cols="30" rows="10" placeholder="Write your Message here" required></textarea> 
     </div> 
    </div> 
    <div class="col-sm-12 btn-wrap"> 
      <button type="submit" class="btn btn-danger">Submit</button> 
      <input type="hidden" name="action" value="packageForm" /> 
      <img class="gif" src="<?php echo get_stylesheet_directory_uri().'/img/oval.svg'; ?>" class="gif" width="30" alt="loading" style="display: none;"> 
    </div> 
    <div id="response"></div> 
</form>

通過functions.php

// Ajax for Package Form 
wp_enqueue_script('jquery'); 

function packageForm(){ 

global $wpdb; 
$package_name =$_POST['package']; 
$name = $_POST['name']; 
$phone = $_POST['phone']; 
$email = $_POST['email']; 
$date = $_POST['pref_date']; 
$message = $_POST['message']; 
$quote = 'Package Name:'.$package_name."\n\r".'Full Name: '.$name."\n\r".'Phone: '.$phone."\n\r".'Email: '.$email."\n\r".'Available Date: '.$date."\n\r".'Message: '.$message; 
$to = '[email protected]'; // put your email here 
$headers = 'From:Himalayan spa <[email protected]>' . "\r\n"; // put user's email here or duplicate your email 
$subject = 'Request For Spa'; 

if(wp_mail($to, $subject, $quote, $headers)===FALSE){ 
echo "Error"; 
} 
else { 
echo "<h3> Message Successfully Sent</h3>"; 
} 
die(); 
} 
add_action('wp_ajax_packageForm', 'packageForm'); 
add_action('wp_ajax_nopriv_packageForm', 'packageForm');

最後我jQuery處理Ajax請求在custom.js

jQuery(document).ready(function(jQuery){ 
jQuery('#packageForm').submit(packageSubmit);  
     function packageSubmit(){ 
      var ceccForm = jQuery(this).serialize(); 
      jQuery.ajax({ 
      type:"POST", 
      url: "wp-admin/admin-ajax.php", 
      data: ceccForm, 
      success:function(data){ 
      console.log(data); 
      jQuery("#response").html(data); 
      jQuery("#packageForm")[0].reset(); 
      } 
     }); 
     return false; 
     } 
}); 
    jQuery(document).ajaxStart(function(){ 
     jQuery('.gif').show(); 
      }).ajaxStop(function(){ 
     jQuery('.gif').hide(); 
    });

正如前面提到的，阿賈克斯只對產品的第一要素如圖工作截圖。請幫忙！！

來源

2016-11-08 Prabin Parajuli

是您的形式循環生成的響應元素？ –

首先確保packageForm id在整個頁面中只有一個？ –

是的，這是唯一的形式* ID *。 –

更改所有的ID，以班級，選擇基於提交表單

jQuery(document).ready(function(jQuery){ 
jQuery('.packageForm').submit(packageSubmit);  
     function packageSubmit(){ 
      var el = jQuery(this); 
      var ceccForm = el.serialize(); 
      jQuery.ajax({ 
      type:"POST", 
      url: "wp-admin/admin-ajax.php", 
      data: ceccForm, 
      success:function(data){ 
      console.log(data); 
      el.find(".response").html(data); 
      el.reset(); 
      } 
     }); 
     return false; 
     } 
}); 
    jQuery(document).ajaxStart(function(){ 
     jQuery('.gif').show(); 
      }).ajaxStop(function(){ 
     jQuery('.gif').hide(); 
    });

來源

2016-11-08 05:37:46 madalinivascu

你的意思是我應該首先改變我的表格ID到類，並使用您的上述代碼？ '

是的，別忘了'.response' div – madalinivascu

Thanx，它的工作。但爲什麼ID不起作用？你能給我解釋一下嗎？ –

僅適用於Ajax在WordPress中使用Bootstrap Modal的第一個元素

回答

相關問題