我正在創建一個「單頁」應用程序,我想在我的儀表板 中使用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">×</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">×</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;
});
我不清楚你有什麼問題。你寫過_「但我沒有把它展現在我的眼中」,但我不明白這意味着什麼。你能澄清你的問題嗎? – vvanasten
對不起,我的寫作不好,一直在編碼幾個小時,我很累。問題是模式不能打開。我可以在我的開發人員工具的「網絡」選項卡中預覽它。 –