0
저는 CodeIgniter에서 일하고 저에게 많은 빈자리를 보내는 컨트롤러가 만든 뷰를 가지고 있습니다. 내보기에 동적 코드는 다음과 같습니다하는 필터가 아직 선택하지 않았기 때문에AJAX를 통해 다른 PHP 객체로드하기
<div class="row vacancy-grid">
<?php
foreach ($vacancies as $vacancy) {
?>
<div class="col-lg-3 vacancy-item">
<div class="vacancy-header">
<img src="<?php
if (isset($vacancy[0]->banner)) {
echo base_url() . VACANCY_IMAGES . $vacancy[0]->banner;
}else {
echo base_url() . IMAGES_BASE . "noimage.png";
}
?>" alt="Logo Lochtfest" />
</div>
<div class="vacancy-info">
<h2><?php echo $vacancy[0]->name; ?></h2>
<?php
if (!empty($vacancy[1])) {
?>
<ul class="list-interests">
<?php
foreach ($vacancy[1] as $interest) {
?>
<li><?php echo $interest; ?></li>
<?php
}
?>
</ul>
<?php
}
if (!empty($vacancy[2])) {
?>
<ul class="list-skills">
<?php
foreach ($vacancy[2] as $skill) {
?>
<li><i class="fa fa-check"></i><?php echo $skill; ?></li>
<?php
}
?>
</ul>
<?php
}
?>
<ul class="list-logistics">
<li>
<i class="fa fa-map-marker"></i>
<?php echo $vacancy[0]->address_line_1; ?> <br />
<?php echo $vacancy[0]->address_postal_code . ", " . $vacancy[0]->address_city; ?>
</li>
<li class="bold-sm"><i class="fa fa-calendar"></i> <?php echo $vacancy[3]; ?></li>
</ul>
<ul class="list-type">
<?php
if ($vacancy[0]->occupancy_kind == 1) {
?>
<li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li>
<?php
} else if ($vacancy[0]->occupancy_kind == 2) {
?>
<li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li>
<?php
} else {
?>
<li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li>
<li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li>
<?php
}
?>
</ul>
</div>
</div>
<?php
}
?>
</div>
먼저 $ 공석이 모든 공석을 포함합니다. 그래서 사용자가 사용할 수있는 몇 가지 필터가 있습니다. 제 문제는 페이지를 새로 고침하지 않고이 콘텐츠를 같은 위치에 다시로드하려면 어떻게합니까? 나는 페이지 새로 고침으로 그것을 할 수 있었다. 그러나 나는 그것을 없애고 싶다. 내 JS 코드는 다음과 같습니다
//This is for the filters in the vacancy overview page
filteredVacancies = $('#filterbtn'),
ajaxOptions4 = {
type: 'POST',
url: "http://localhost/codeigniter/codeigniter/dashboard/vacancy/vacancyFiltering",
dataType: 'json'
};
filteredVacancies.click(function (ev) {
var options4 = $.extend({}, ajaxOptions4, {
data: {
"datefrom": $('#date-from').datepicker('getDate'),
"dateto": $('#date-to').datepicker('getDate')
}
});
ev.preventDefault();
// ajax done & fail
$.ajax(options4).done(function (data) {
if (data.result === 'success') {
//TODO: how to do this???
}
}).fail(function (xhr, status, error) {
console.warn(xhr);
console.warn(status);
console.warn(error);
});
});