За последние 24 часа нас посетили 17444 программиста и 1712 роботов. Сейчас ищет 1601 программист ...

Как написать ajax запрос

Тема в разделе "JavaScript и AJAX", создана пользователем timur2008, 23 апр 2017.

  1. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    да там все сложнее. У меня есть таблица со списком и нужно при щелчке на каждой записи из этой таблице чтобы появлялось окно с инфой по этой строке.
    а если не через попапы делать ? то как это делать открывается новый фрэйм и в нем выводятся данные? асинхронно
     
  2. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    Если окна напрягают, можно
    Что там сложного? Все просто, по клику загружаете $.get данные по атрибуту в див окна, открываете окно. Если без окна то исключаете последнее звено, т.е. грузите инфу в нужный див
     
  3. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    да я так и делаю , но постоянные косяки надоели уже. теперь нужно два раза ткнуть по строке чтобы чтобы вывелись данные. В первый раз поменяется именно сама html страница а когда второй раз тыкаешь только тогда нужная инфа появляется.
     
  4. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    Где код-то последний?
     
  5. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    Код (Javascript):
    1. <script>
    2.     $(document).on("click",".open-AddBookDialog",function(){
    3.             var myorgid = $(this).data('id');
    4.             SendPost(myorgid);          
    5.         }
    6.     )        
    7.         function SendPost(id){
    8.             var myorgid = id;            
    9.             $.ajax({
    10.                 type: 'POST',
    11.                 url: 'ajax.php',
    12.                 data: {
    13.                 orgid: myorgid,              
    14.                 },
    15.                 success: function(data){
    16.                 $('.modalclass').html(data);              
    17.                    }
    18.                });
    19.            };  
    20.     </script>
    В классе ajax.php
    PHP:
    1. ?>
    2. <div class="modalclass">eeee<?php print_r($_POST['orgid'])?></div>
    3. <?php
    4.  
    5.         $modal = new modalpage();
    6.         print_r($modal->getModal($_POST['orgid']));
    ну и сам класс modalpage
    PHP:
    1. <?php
    2. require_once 'Organisationsinfoview.php';
    3. /*
    4. * To change this license header, choose License Headers in Project Properties.
    5. * To change this template file, choose Tools | Templates
    6. * and open the template in the editor.
    7. */
    8.  
    9. /**
    10. * Description of modalpage
    11. *
    12. * @author Tim
    13. */
    14.  
    15. class modalpage {
    16.     public function getModal($orgid) {
    17.         ?>
    18.  
    19.        
    20.         <div id="myModalBox" class="modal fade">
    21.            
    22.                           <div class="modal-dialog">
    23.                             <div class="modal-content">
    24.  
    25.                               <div class="modal-header">
    26.                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    27.                                 <h4 class="modal-title">Проблемы организации</h4>
    28.                               </div>
    29.                               <div class="modal-body">                                                                
    30.                                   <?php
    31.                                     $view = new Organisationsinfoview();
    32.                                     $view->getView($orgid);
    33.                                   ?>                                                  
    34.                               </div>
    35.  
    36.                               <div class="modal-footer">
    37.                                 <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
    38.  
    39.                               </div>
    40.                             </div>
    41.                           </div>
    42. </div>
    43. <?php
    44.        
    45.     }
    46. }
    там есть
    PHP:
    1. <?php
    2.                                     $view = new Organisationsinfoview();
    3.                                     $view->getView($orgid);
    4.                                   ?>      
    там как раз и рисуется наша таблица с нужными данными
     
  6. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    Как-то так, добавляйте нужные опции
    Код (Javascript):
    1.     $(document).on("click",".open-AddBookDialog",function(){
    2.          $.get("/ajax.php", { orgid: $(this).data('id') }, function(data) {
    3.        $('.modalclass').html(data);
    4.     });      
    5.         }
    6.     );  
     
  7. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    нент , так не работает , он id уже не передает на страницу
     
  8. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    Лишнее в коде, так:
    Код (Javascript):
    1.  $(document).on("click",".open-AddBookDialog",function(){
    2.          $.get("/ajax.php", { orgid: $(this).attr('id') }, function(data) {
    3.        $('.modalclass').html(data);
    4.        $('#myModalBox').modal('show');
    5.     });    
    6.         }
    7.     );  
     
  9. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    пишет TypeError: $(...).modal is not a function
     
  10. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    не bootstrap что-ли?
    закомментируйте:
    //$('.modalclass').html(data);
    //$('#myModalBox').modal('show');
    вместо них впишите alert(data);
    узнаем, приходят ли данные
     
  11. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    тогда окно выводит с
    HTML:
    1. <div class="modalclass">eeee</div>
    2.  
    3.  
    4.        
    5.  
    6.         <div id="myModalBox" class="modal fade">
    7.  
    8.            
    9.  
    10.                           <div class="modal-dialog">
    11.  
    12.                             <div class="modal-content">
    13.  
    14.  
    15.  
    16.                               <div class="modal-header">
    17.  
    18.                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    19.  
    20.                                 <h4 class="modal-title">Проблемы организации</h4>
    21.  
    22.                               </div>
    23.  
    24.                               <div class="modal-body">                                                                
    25.  
    26.                                                    
    27.                     <legend>Проблемы</legend>                  
    28.                     <table class="table" id="content" cellspacing="0" width="100%">
    29.                        <thead>
    30.                            <tr>
    31.                 <th>фио</th>
    32.                                 <th>время</th>
    33.                                 <th>контактная инфа</th>
    34.                                 <th>проблема</th>
    35.                                 <th>инн</th>
    36.                                 <th>название организации</th>
    37.                                 <th>статус</th>
    38.                                 <th>отправить</th>
    39.                             </tr>
    40.                         </thead>                        <tbody>
    41.                              
    42.                         </tbody>  
    43.                         </div>
    44.                     </table>
    45.                                                      
    46.  
    47.                               </div>
    48.  
    49.  
    50.  
    51.                               <div class="modal-footer">
    52.  
    53.                                 <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
    54.  
    55.  
    56.  
    57.                               </div>
    58.  
    59.                             </div>
    60.  
    61.                           </div>
    62.  
    63. </div>
    64.  
     
  12. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    что-то все у вас там напутано, айди то передается или нет, что XHR показывает?
     
  13. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    с этим скриптом походу нет, а с тем передается

    там в ответе вот такая штука
    HTML:
    1. <div class="modalclass">eeee</div>
    2.  
    3.  
    4.        
    5.  
    6.         <div id="myModalBox" class="modal fade">
    7.  
    8.            
    9.  
    10.                           <div class="modal-dialog">
    11.  
    12.                             <div class="modal-content">
    13.  
    14.  
    15.  
    16.                               <div class="modal-header">
    17.  
    18.                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    19.  
    20.                                 <h4 class="modal-title">Проблемы организации</h4>
    21.  
    22.                               </div>
    23.  
    24.                               <div class="modal-body">                                                                
    25.  
    26.                                                    
    27.                     <legend>Проблемы</legend>                  
    28.                     <table class="table" id="content" cellspacing="0" width="100%">
    29.                        <thead>
    30.                            <tr>
    31.                 <th>фио</th>
    32.                                 <th>время</th>
    33.                                 <th>контактная инфа</th>
    34.                                 <th>проблема</th>
    35.                                 <th>инн</th>
    36.                                 <th>название организации</th>
    37.                                 <th>статус</th>
    38.                                 <th>отправить</th>
    39.                             </tr>
    40.                         </thead>                        <tbody>
    41.                              
    42.                         </tbody>  
    43.                         </div>
    44.                     </table>
    45.                                                      
    46.  
    47.                               </div>
    48.  
    49.  
    50.  
    51.                               <div class="modal-footer">
    52.  
    53.                                 <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
    54.  
    55.  
    56.  
    57.                               </div>
    58.  
    59.                             </div>
    60.  
    61.                           </div>
    62.  
    63. </div>
    64.  
     
  14. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    дайте html код ссылки, кликнув по которой должно открыться окно
     
  15. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    HTML:
    1. "<td id='orgdata'><a href='#myModalBox' data-id=".$this->Problem->getOrganisationFKid()." class='open-AddBookDialog'  data-toggle='modal'>".$name."</a></td>"
     
  16. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    пробуйте поменять $(this).attr('id') на $(this).attr('data-id') или $(this).data('id')
     
  17. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    не помогло :(
     
  18. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    не может быть такого, с тем который передается указан $(this).data('id'), логично предположить что и здесь с $(this).data('id') должен передаваться
     
  19. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    я так в начале тоже думал , и когда в первый раз запускал с бутстрапом эту тему , но так не работало, потом сделал как в примере и заработало.Т.е как я изначально сделал.
     
  20. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    А где пример нашли?
     
  21. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    Вообщем анализирую пост ответ нажали первый раз кликнули во вкладке ответ
    PHP:
    1. <div class="modalclass">eeee5390</div>
    2.  
    3.  
    4.    
    5.  
    6.         <div id="myModalBox" class="modal fade">
    7.  
    8.        
    9.  
    10.                           <div class="modal-dialog">
    11.  
    12.                             <div class="modal-content">
    13.  
    14.  
    15.  
    16.                               <div class="modal-header">
    17.  
    18.                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    19.  
    20.                                 <h4 class="modal-title">Проблемы организации</h4>
    21.  
    22.                               </div>
    23.  
    24.                               <div class="modal-body">                                                            
    25.  
    26.                                                
    27.                     <legend>Проблемы</legend>              
    28.                     <table class="table" id="content" cellspacing="0" width="100%">
    29.                        <thead>
    30.                            <tr>
    31.                 <th>фио</th>
    32.                                 <th>время</th>
    33.                                 <th>контактная инфа</th>
    34.                                 <th>проблема</th>
    35.                                 <th>инн</th>
    36.                                 <th>название организации</th>
    37.                                 <th>статус</th>
    38.                                 <th>отправить</th>
    39.                             </tr>
    40.                         </thead>                        <tbody>
    41.                                     <tr>
    42.                 <td><h4>20.04.17</h4></td>
    43.                 <td></td>
    44.                 <td></td>
    45.                 <td></td>
    46.                 <td></td>
    47.                 <td></td>
    48.                 <td></td>
    49.                 <td></td>
    50.            
    51.         </tr>
    52.         <tr id='idpag'><form method='POST' action='Tempdata.php' class='form-inline'><input  type="hidden" id="ident0" size="0"  name="id" value="818">   <input  type="hidden" id="orgId" size="0"  name="orgid" value="">   <input  type="hidden" id="typeProbl0" size="0"  name="myProblem" value="">  <td><label id= >Михайлов Т.Ш.</label></td><td><input  type="time" id="id_time0" size=""  name="timeproblem" value="14:46"></td><td><input  type="text" id="id_contact0" size=""  name="contactInfo" value="923-423-0535"></td><td><input  type="textarea" id="id_problem0" size=""  name="problemDescription" value="Проблема на площадке, написала в тп"></td><td><label id= >7017354603</label></td><td id='orgdata'><a href='#myModalBox' data-id= class='open-AddBookDialog'  data-toggle='modal'><label id=idname >ООО «Салют»</label></a></td><td><select size = '1' name='problemstatus' ><option value='Не решена'>Не решена</option><option value='Решена'>Решена</option><option value='Удалить'>Удалить</option></select></td>   <td><button type='submit' class='btn btn-primary btn-md'>Обновить</button></td></form></tr>        <tr>
    53.                 <td><h4>10.04.17</h4></td>
    54.                 <td></td>
    55.                 <td></td>
    56.                 <td></td>
    57.                 <td></td>
    58.                 <td></td>
    59.                 <td></td>
    60.                 <td></td>
    61.            
    62.         </tr>
    63.         <tr id='idpag'><form method='POST' action='Tempdata.php' class='form-inline'><input  type="hidden" id="ident1" size="0"  name="id" value="586">   <input  type="hidden" id="orgId" size="0"  name="orgid" value="">   <input  type="hidden" id="typeProbl1" size="0"  name="myProblem" value="">  <td><label id= >Заремба А.В.</label></td><td><input  type="time" id="id_time1" size=""  name="timeproblem" value="09:14"></td><td><input  type="text" id="id_contact1" size=""  name="contactInfo" value=""></td><td><input  type="textarea" id="id_problem1" size=""  name="problemDescription" value="крипоп не работает"></td><td><label id= >7017354603</label></td><td id='orgdata'><a href='#myModalBox' data-id= class='open-AddBookDialog'  data-toggle='modal'><label id=idname >ООО «Салют»</label></a></td><td><select size = '1' name='problemstatus' ><option value='Решена'>Решена</option><option value='Не решена'>Не решена</option><option value='Удалить'>Удалить</option></select></td>   <td><button type='submit' class='btn btn-primary btn-md'>Обновить</button></td></form></tr>        <tr>
    64.                 <td><h4>07.04.17</h4></td>
    65.                 <td></td>
    66.                 <td></td>
    67.                 <td></td>
    68.                 <td></td>
    69.                 <td></td>
    70.                 <td></td>
    71.                 <td></td>
    72.            
    73.         </tr>
    74.         <tr id='idpag'><form method='POST' action='Tempdata.php' class='form-inline'><input  type="hidden" id="ident2" size="0"  name="id" value="572">   <input  type="hidden" id="orgId" size="0"  name="orgid" value="">   <input  type="hidden" id="typeProbl2" size="0"  name="myProblem" value="">  <td><label id= >Сенчилов В.А.</label></td><td><input  type="time" id="id_time2" size=""  name="timeproblem" value="15:29"></td><td><input  type="text" id="id_contact2" size=""  name="contactInfo" value=""></td><td><input  type="textarea" id="id_problem2" size=""  name="problemDescription" value=""></td><td><label id= >7017354603</label></td><td id='orgdata'><a href='#myModalBox' data-id= class='open-AddBookDialog'  data-toggle='modal'><label id=idname >ООО «Салют»</label></a></td><td><select size = '1' name='problemstatus' ><option value='Решена'>Решена</option><option value='Не решена'>Не решена</option><option value='Удалить'>Удалить</option></select></td>   <td><button type='submit' class='btn btn-primary btn-md'>Обновить</button></td></form></tr><tr id='idpag'><form method='POST' action='Tempdata.php' class='form-inline'><input  type="hidden" id="ident3" size="0"  name="id" value="568">   <input  type="hidden" id="orgId" size="0"  name="orgid" value="">   <input  type="hidden" id="typeProbl3" size="0"  name="myProblem" value="">  <td><label id= >Михайлов Т.Ш.</label></td><td><input  type="time" id="id_time3" size=""  name="timeproblem" value="14:38"></td><td><input  type="text" id="id_contact3" size=""  name="contactInfo" value=""></td><td><input  type="textarea" id="id_problem3" size=""  name="problemDescription" value="нет информации о новом ключе. Объяснил что нужно с"></td><td><label id= >7017354603</label></td><td id='orgdata'><a href='#myModalBox' data-id= class='open-AddBookDialog'  data-toggle='modal'><label id=idname >ООО «Салют»</label></a></td><td><select size = '1' name='problemstatus' ><option value='Решена'>Решена</option><option value='Не решена'>Не решена</option><option value='Удалить'>Удалить</option></select></td>   <td><button type='submit' class='btn btn-primary btn-md'>Обновить</button></td></form></tr>
    75.                         </tbody>
    76.                         </div>
    77.                     </table>
    78.                                                  
    79.  
    80.                               </div>
    81.  
    82.  
    83.  
    84.                               <div class="modal-footer">
    85.  
    86.                                 <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
    87.  
    88.  
    89.  
    90.                               </div>
    91.  
    92.                             </div>
    93.  
    94.                           </div>
    95.  
    96. </div>
    во вкладке ПОСТ
    PHP:
    1. orgid 5390
    Далее щелкаю второй раз по той же ссылке прилетает тоже самое но окно открывается с инфой как надо, но не стабильно иногда может тупо черное окно открыться без кнопок без всего.
    Я не помню что за сайт был к сожалению :( Это с моим глючным скриптом. Для отладки использую firebug/
    И там же в предпросмотре он реально мне таблицу отдает с данными , но она почему то не выводится. Если жмешь второй раз то тогда выводится уже.
     
    #46 timur2008, 26 апр 2017
    Последнее редактирование: 26 апр 2017
  22. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    поменяйте в моем коде $.get на $.post - заработает т.к. у вас в ajax.php $_POST, забыли там подправить на гет))
     
  23. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    нет таже фигня :(
    --- Добавлено ---
    Слушайте почему данные не визуализируются ? Ведь они приходят
     
  24. marsik

    marsik Активный пользователь

    С нами с:
    30 дек 2008
    Сообщения:
    246
    Симпатии:
    17
    показывает id:
    Код (Javascript):
    1.  $(document).on("click",".open-AddBookDialog",function(){
    2. alert($(this).data('id'));
    3.     });  
     
  25. timur2008

    timur2008 Новичок

    С нами с:
    14 окт 2015
    Сообщения:
    136
    Симпатии:
    2
    да в моем скрипте он тоже работает, дело тут даже не в этом. Ощущение что он не может отобразить данные потому что в ответе там прямо то чтомне нужно передалось.
     
    #50 timur2008, 26 апр 2017
    Последнее редактирование: 26 апр 2017