2014-05-06 78 views
0

我正在創建一個「單頁」應用程序,我想在我的儀表板 中使用AJAX加載不同的視圖。我使用jQuery進行AJAX調用。我已經創建了控制器foreach我的意見 (這被認爲是一個不好的做法?只是使一個控制器用多種方法加載我所有的意見?) 和一切工作得很好,除了實際模式我需要用AJAX顯示。AJAX在CodeIgniter中打開Modal

我可以使用我的開發人員工具預覽響應(模態),但我沒有弄清楚它在我的眼中。

開始的時候,這個特定的模式被包含在我的一個視圖中,我在AJAX中附加了我的其他所有視圖, ,但是我將它創建爲不好的練習併爲該模式創建了一個新視圖。

因此,這裏是我的控制器來加載視圖(模式):

<?php 

    class Add_user extends CI_Controller 
    { 

     public function __construct() 
     { 

      parent::__construct(); 
      $this->load->model('user_model'); 
      $this->load->model('subject_model'); 
     } 

     public function index() 
     { 

     $data['subjects'] = $this->subject_model->get_all_subjects(); 
     $data['schools'] = $this->subject_model->get_all_schools(); 

     $this->load->view('new_user', $data); 
     } 
    } 

?> 

這裏的(有一些CodeIgniter的輔助方法都是標準的HTML)的模態的觀點:

<?php $this->load->helper('form'); ?> 
<?php $attributes = array(
     'id' => 'add_user_form' 
    ); 
?> 

<?php echo form_open('users/add_user', $attributes); ?> 

    <span class="close_form_button_add_user_form">&times;</span> 

    <div class="form_header"> 
     <h1>Create New User</h1> 
    </div> <!-- end of form_header --> 

    <!-- Message and response elements--> 
    <div class="loading_spinner" id="loading_spinner_add_user" style="display:none;"></div> 
    <div class="login_error" id="new_user_error" style="display:none"> 
     <span class="close_error">&times;</span> 
    </div> 
    <div class="front_success" id="new_user_success" style="display:none"></div> 


    <div class="form_row"> 
     <div class="sign-pass"> 
      <label for="f_name">Etunimi</label> 
      <input type="text" name="f_name"/> 
     </div> 

     <div class="sign-pass-again"> 
      <label for="l_name">Sukunimi</label> 
      <input type="text" name="l_name"/> 
     </div> 
    </div> 

    <div class="form_row"> 
     <div class="sign-pass"> 
      <label for="email">Sähköpostiosoite</label> 
      <input type="email" name="email"/> 
     </div> 

     <div class="sign-pass-again"> 
      <label for="email_confirm">Sähköposti uudelleen</label> 
      <input type="email" name="email_confirm"/> 
     </div> 
    </div> 

    <div class="form_row"> 
     <label for="phone_number">Puhelinnumero (valinnainen)</label> 
     <input type="text" name="phone_number" class="full-width" /> 
    </div> 

    <div class="form_row"> 
     <div class="sign-pass"> 
      <label for="user_type">Valitse käyttäjätyyppi</label> 
      <select name="user_type" class="add_user_select" id="select_user_type"> 
       <option value="">Käyttäjätyyppi</option> 

       <option value="admin">Hallinto</option> 
       <option value="moderator">Hallinto 2</option> 
       <option value="enduser">Pääkäyttäjä</option> 
      </select> 
     </div> 

     <div class="sign-pass-again"> 
      <input type="submit" name="submit_user" value="Luo käyttäjä" class="login_submit" id="submit_user" style="margin: 5px 24px 0px 0px;"/> </br> 
     </div> 
    </div> 

    <div class="form_row" id="add_user_optional_information"> 
     <label for="school">Choose school</label> 
      <select name="school" class="add_user_select_optional"> 
       <option value="">School</option> 
       <?php foreach($schools as $school) :?> 
       <option value="<?=$school['id']?>"><?=$school['name']?></option> 
       <?php endforeach; ?> 
      </select> 


     <label for="subject">Choose subject</label> 
      <select name="subject" class="add_user_select_optional" style="margin-bottom: 20px;"> 
       <option value="">Subject</option> 
       <?php foreach($subjects as $subject) :?> 
       <option value="<?=$subject['id']?>"><?=$subject['name']?></option> 
       <?php endforeach; ?> 
      </select> 
    </div> 
<?php echo form_close(); ?> 

這裏是我的JS文件AJAX響應的一部分:

$(".add_user").on("click", function(e) { 
    e.preventDefault(); 
    var url = $(this).attr("href"); 

     $.ajax({ 

      url: url, 
      async: false, 
      data: url, 
      success: function(data) { 

      // Here's the part what I'm thinking is wrong 

      $("form#add_user_form").easyModal({ 
       top: 80, 
       autoOpen: true, 
       overlayOpacity: 0.1, 
       overlayColor: "#000000", 
       overlayClose: true, 
       closeButtonClass: "span.close_form_button_add_user_form" 
      }); 
     }   
     }); 
    return false; 
}); 
+1

我不清楚你有什麼問題。你寫過_「但我沒有把它展現在我的眼中」,但我不明白這意味着什麼。你能澄清你的問題嗎? – vvanasten

+0

對不起,我的寫作不好,一直在編碼幾個小時,我很累。問題是模式不能打開。我可以在我的開發人員工具的「網絡」選項卡中預覽它。 –

回答

0

,如果你想在視圖首先調用模式必須有觸發 例如:

<button class="btn btn-default" onclick="open_modal()"><i> class="glyphicon glyphicon-refresh"></i> Refresh</button> 

其中的onclick =「open_modal()調用這樣

<script type="text/javascript"> 
    function open_modal() 
    { 
    save_method = 'add'; 
    $('#form')[0].reset(); // reset form on modals 
    $('.form-group').removeClass('has-error'); // clear error class 
    $('.help-block').empty(); // clear error string 
    $('#modal_form').modal('show'); // show bootstrap modal 
    $('.modal-title').text('Create New User'); // Set Title to Bootstrap modal title  } 
</script> 

最後這個javascript函數你的模態裏面有什麼格式

<!-- Bootstrap modal --> 
<div class="modal fade" id="modal_form" role="dialog"> 
    <div class="modal-dialog"> 
     <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> 
       <h3 class="modal-title"><center></center></h3> 
      </div> 
      <div class="modal-body form"> 
       <form action="#" id="form" class="form-horizontal"> 
        <div class="form_row"> 
     <div class="sign-pass"> 
      <label for="f_name">Etunimi</label> 
      <input type="text" name="f_name"/> 
     </div> 

     <div class="sign-pass-again"> 
      <label for="l_name">Sukunimi</label> 
      <input type="text" name="l_name"/> 
     </div> 
    </div> 

    <div class="form_row"> 
     <div class="sign-pass"> 
      <label for="email">Sähköpostiosoite</label> 
      <input type="email" name="email"/> 
     </div> 

     <div class="sign-pass-again"> 
      <label for="email_confirm">Sähköposti uudelleen</label> 
      <input type="email" name="email_confirm"/> 
     </div> 
    </div> 

    <div class="form_row"> 
     <label for="phone_number">Puhelinnumero (valinnainen)</label> 
     <input type="text" name="phone_number" class="full-width" /> 
    </div> 

    <div class="form_row"> 
     <div class="sign-pass"> 
      <label for="user_type">Valitse käyttäjätyyppi</label> 
      <select name="user_type" class="add_user_select" id="select_user_type"> 
       <option value="">Käyttäjätyyppi</option> 

       <option value="admin">Hallinto</option> 
       <option value="moderator">Hallinto 2</option> 
       <option value="enduser">Pääkäyttäjä</option> 
      </select> 
     </div> 

     <div class="sign-pass-again"> 
      <input type="submit" name="submit_user" value="Luo käyttäjä" class="login_submit" id="submit_user" style="margin: 5px 24px 0px 0px;"/> </br> 
     </div> 
    </div> 

    <div class="form_row" id="add_user_optional_information"> 
     <label for="school">Choose school</label> 
      <select name="school" class="add_user_select_optional"> 
       <option value="">School</option> 
       <?php foreach($schools as $school) :?> 
       <option value="<?=$school['id']?>"><?=$school['name']?></option> 
       <?php endforeach; ?> 
      </select> 


     <label for="subject">Choose subject</label> 
      <select name="subject" class="add_user_select_optional" style="margin-bottom: 20px;"> 
       <option value="">Subject</option> 
       <?php foreach($subjects as $subject) :?> 
       <option value="<?=$subject['id']?>"><?=$subject['name']?></option> 
       <?php endforeach; ?> 
      </select> 
    </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button> 
       <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<!-- End Bootstrap modal --> 

試試這個代碼,如果你有錯誤嘗試捕獲

0

有一個非常簡單的解決方案,我發現。試試這個

在HTML:

<a class="btn" data-target="#myModal" data-toggle="modal">Open modal</a> 
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div id="render_modal"></div> 
</div> 

jQuery中:

$(document).ready(function(){ 

     $.ajax({ 
     url: '<?php echo base_url('Modal')?>', 
     type: 'post', 
     success:function(){ 
      $('#render_modal').html(data); 
      $('a[data-target="cart_modal"]').click(function(){ 
       $('#myModal').modal('show'); 
      }); 
     } 
     }); 

}); 

在模態控制器:

echo " 
     <div class=\"modal-dialog\"> 
      <div class=\"modal-content\"> 
       <div class=\"modal-header\"> 
       <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"> &times; </button> 
This is Modal body 
       </div> 
       <div class=\"modal-body\"> 
       This is Modal body 
       </div> 
      </div> 
     </div> 

    "; 

感謝。