Как загрузить представление внутри div, используя ajax в codeigniter

Question

Я хочу загрузить представление в другом представлении, используя AJAX в CodeIgniter. Я написал этот код в представлении.

<button class="btn btn-primary shadow" id='add_items'>Add Items</button>
<div class="row-fluid sortable shadow">     
  <div id="#show"></div>
</div>

$('#add_items').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: "<?=base_url();?>Items/add_items",
    type: 'get',
    dataType: 'html',
    success: function(output) {
      $('#show').html(output);
    }
  });
});

Это контроллер, с которого я хочу загрузить представление внутри <div id="show">

public function add_items()
{
    $this->show('admin/Items/index');
}

Answer 1

Я думаю, что этот пример моего кода с вашими навыками объектно-ориентированного программирования может помочь вам почувствовать себя.

просто создайте содержимое XML-файла с несколькими видами просмотров, которые вам нужны, и отметьте каждого из них уникальным идентификатором.

это часть моего xml файла, сохраненная по пути:

{папка проекта} /src/CentralAppView.xml

 <?xml version="1.0" encoding="UTF-8"?>
<root>
<view id="adduser"><!-- choose ur id as libel of ur view must be unic  -->
           <!-- u can edit/insert everything u need here -->
           <fieldset>
               <form ...>
                  ....... Content View ....
                </form>
          </fieldset>
      </view>
 </root>`

Сейчас

1) вам нужно создать экземпляр XMLHttpRequest с именем, например, "xmlserver", например:

var xmlserver = new XMLHttpRequest();

2) Когда вы создаете этот экземпляр Object, вы должны определить для него абстрактный метод с именем:

onreadystatechange

, поскольку вам нужно настроить контроль для каждого состояния сервера, которое вы получаете, в этот момент вам нужно проверить, получаете ли вы необходимый ответ для выполнения вашего ответа на ваш текстовый ответ, используя tow. Атрибуты объекта XMLHttpRequest меняют значения на каждом сервере. изменение состояний:

xmlserver.status и xmlserver.readyState (вы можете изменить 'xmlserver' на 'this', если у вас есть что-то неоднозначное).

хорошо, теперь вы должны знать, какие значения могут иметь там атрибуты, и какое состояние сервера лучше всего, чтобы вы были готовы сделать то, что вам нужно, по ответу вашего сервера.

давайте начнем с атрибута 'status':

status является целочисленным атрибутом, и значения были получены из серверных приставок для обозначения тега ответа сервера. В эти значения можно ввести интервал, соответствующий поведению и функциональности вашего сервера, для используемого вами сервера он может составлять 100 .. 600, у каждого значения есть индикатор.

у нас есть очень известный пример значения:

404 запрос не был найден на этом сервере, поэтому «запрос не был найден на этом сервере» - это индикатор / значение, соответствующее значению 404 атрибута «статус».

200 - это показатель / значение, присвоенный успешному доступу и ответу.

Теперь перейдем к атрибуту readyState:

readyState также является целочисленным атрибутом, он просто содержит число состояний ur, полученных с сервера ur, его интервал фиксирован между 0..4, 0,1,2,3 означает отказавший сетевой доступ к вашему серверу и значение 4 присваивается соединению доступа.

Я думаю, что это также связано с количеством пингов соединения с сервером.

Теперь, если у вас есть значение 200 состояний и 4 состояния чтения, вы сможете выполнять настройку и просматривать вставку с помощью текстового ответа сервера, поскольку это единственный формат ответа, используемый для всех серверов (возможно).

Посмотрите код, и я думаю, вы поймете больше:

     xmlserver.onreadystatechange = function() {
        if (this.status == 200 && this.readyState == 4) {
            // do ur response traitment and ur view insert here
        }
    } 

После этого вам нужно указать, какой файл или какую страницу php вам нужно загрузить из него, для просмотра содержимого, просто используя метод экземпляра объекта XMLHttpRequest 'Open' с передачей следующих аргументов:

ваш режим отправки: Get / POST, get используется для получения данных, а post используется для отправки текстовых данных в качестве аргумента метода send, о котором мы поговорим позже.

.

ur путь к файлу / содержимому: в вашей ситуации это должен быть {проектная папка} /src/CentralAppView.xml или тот же путь, по которому вы его использовали.

Внимание : неправильный путь может или состояние выключения сервера может вернуть нежелательные значения, о которых мы говорили раньше.

и

ваш уровень синхронизации: true / false.

код будет:

xmlserver.open("GET", "./src/Containts_Dialogs.xml", true);

окончательно в части Ajax

вызовите метод send, чтобы начать транзакцию между сервером и браузером для получения необходимого представления с этого сервера.

xmlserver.send(); // arg is undefined because we used the GET sending mode in the open methode

в конце концов с DOM для вставки вашего вида в элемент вашего Div *

Использование предопределенного экземпляра объекта XMLDocument, его метода getElementById () и атрибута innerHtml.

1. получение элемента DOM с идентификатором 'show' из XMLDocumentЭкземпляр объекта называется document и влияет на него в новой переменной называется например viewelm.

2. Обновление представления новым ответом Content ajax.

Теперь мы просто возвращаемся к ower 'onreadystatechange' и вставляем эту особенность в комментарий, который я делаю для вас, чтобы получить код:

    var xmlserver = new XMLHttpRequest();
    xmlserver.onreadystatechange = function() {
        if (this.status == 200 && this.readyState == 4) {
            document.getElementById("show").innerHtml = xmlserver.responseText;
        }
    }
    xmlserver.open("GET", "./src/Containts_Dialogs.xml", true)
    xmlserver.send();

Предупреждение: удалите # из элемента атрибута html div id, чтобы правильно запустить код .

Хороший помощник по программированию :).

Answer 2

В контроллере вы загружаете строку html страницы просмотра, которую вы хотите загрузить как:

$output = array(
  'result' => $this->load->view('admin/Items/index','',true)
);

Вы отправляете вывод как ответ на запрос ajax:

print(json_encode($output));

Вы получаете ответ клиента:

success: function(output) {
  $('#show').html(output.result);
}

После комментария от @Danish я понял, что ajax ожидает, что ответом будет HTML, в этой реализации сервер отвечает данными json.

Чтобы использовать это решение, вам нужно изменить тип ответа на вызов ajax на Json.

 $('#add_items').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: "<?=base_url();?>Items/add_items",
    type: 'get',
    dataType: 'JSON',
    success: function(output) {
      $('#show').html(output.result);
    }
  });
});

Надеюсь, что это работает.