Onclick добавить текстовое поле в div

В настоящее время у меня есть вызов ajax после того, как пользователь нажимает button на моей веб-странице.

Проблема заключается в том, что после отправки есть небольшая задержка (поскольку второй вызов ajax необходимо завершить, чтобы показать DIV), чтобы избежать небольшого запаздывания. Мне было интересно, можно ли добавить содержимое в DIV:

    <textarea name='Status'> </textarea>
    <input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">
    <input type='button' value='Status Update'>
  <script>
  $(function () {
    $('input').on('click', function () {
        var Status = $(this).val();
       $('#output').append(Status);
});
  </script>

Это моя текущая конфигурация кода. Теперь это не работает должным образом. Он не добавляет представленный контент в DIV.. вот как он отображается через мой вызов ajax:

window.setInterval(function()
{
  $(function () 
  {
    $.ajax({                                      
        url: 'Ajax/AjaxStatuses.php', data: "", dataType: 'json',  success: function(rows)        
        {
        $('#output').empty();
            for (var i in rows)
            {
                var row = rows[i];          
                var User = row[0];
                var Status = row[1]
                    $('#output').append(''+
                    '<div class="small-3 large-2 columns "><img src="http://placehold.it/80x80&text=[img]" /></div>'+
                    '<div class="small-9 large-10 columns">'+
                        '<p><strong><a href="#">'+User+'</a>:</strong>'+Status+'</p>'+
                        '<ul class="inline-list">'+
                            '<li><a href="">Reply</a></li>'+
                            '<li><a href="">Share</a></li>'+
                        '</ul><hr>');
            } 
        } 
    });       
  });
 }, 1000);

и вызов:

 include "../PHP/Database.php";
    $Array = array();

        $Query = $DB->prepare("SELECT UserID, Text FROM statuses Order BY ID DESC");
        $Query->execute();
        $Query->bind_result($ID, $Text);
        $Query->store_result();
        while($Query->fetch()){
            $Second_Query = $DB->prepare("SELECT Username FROM users WHERE ID=?");
            $Second_Query->bind_param('i',$ID);
            $Second_Query->execute();
            $Second_Query->bind_result($Username);
            $Second_Query->fetch();
                $Array[] = array ($Username, $Text);
            $Second_Query->close();         
        }
        $Query->close();

Как добавить текстовую область в HTML-div после нажатия кнопки, чтобы мой script не мог ждать ответа от недавно опубликованного статуса?

Update. Когда кнопка отправляется, она вызывает следующий код:

$(function () {
    $('input').on('click', function () {
        var Status = $(this).val();
        $.ajax({
            url: 'Ajax/StatusUpdate.php',
            data: {
                userid: $("input[name=UserID]").val(),
                text: $("textarea[name=Status]").val(),
                Status: Status
            },
            dataType : 'json'

        });
    });
});

Для обработки ввода ajax

Ответы

Ответ 1

Софи.

Сначала просмотрите этот фрагмент.

window.setInterval(function()
{
  $(function () 
  {
      ...   
  });
 }, 1000);

Я думаю, это jQuery:) Эта конструкция

$(function() { somecode(); });

служит для выполнения somecode(); когда DOM достигает "готового" состояния. Это означает, что somecode() будет выполняться только один раз, в событии документа "ready", а setInterval здесь просто связывает выполнение функций для этого события.

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

$(function () 
{
    window.setInterval(function()
    {

        somecode();

    }, 1000);
});

Второе:

include "../PHP/Database.php";
 $Array = array();
        $Query = $DB->prepare("SELECT UserID, Text FROM statuses Order BY ID DESC");
        $Query->execute();
        $Query->bind_result($ID, $Text);
        $Query->store_result();
        while($Query->fetch()){
            $Second_Query = $DB->prepare("SELECT Username FROM users WHERE ID=?");
            $Second_Query->bind_param('i',$ID);
            $Second_Query->execute();
            $Second_Query->bind_result($Username);
            $Second_Query->fetch();
                $Array[] = array ($Username, $Text);
            $Second_Query->close();         
        }
        $Query->close();

Это, фактически, не посылает никакого ответа. Если это весь код, вы должны добавить

echo json_encode($Array);

по крайней мере, чтобы получить любой ответ.

Третье:

$.ajax({  
    url: 'Ajax/AjaxStatuses.php', data: "", dataType: 'json', ....

dataType: 'json' означает, что вы должны отправить действительную строку JSON с сервера, если нет - функция "success" не будет выполняться.

Если это не помогает, вы должны проверить все потоки данных, чтобы найти место, где они сломаны. Используйте консоль разработчика в своем браузере, чтобы узнать, что происходит с сервером и сервером в запросах ajax, чтобы найти проблему, а затем вы сможете легко устранить проблему.

Также у меня есть некоторые советы, чтобы сделать ваш код более чистым:

Попробуйте сделать более конкретные селектора для таких вещей:

$('input').on('click', function () {

Просто добавьте атрибут id (или класс, если у вас есть много кнопок) для соответствующего ввода, и сделайте так:

$('#id').on('click', function () { ...

или

$('.class').on('click', function () { ...

Также)) Попробуйте извлечь такие вещи, как:

<input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">

из структуры HTML, если это не внутри формы или вы используете ajax. Я вижу, что вы используете UserID в js, поэтому лучшее решение здесь будет

<script type="text/javascript">
   var UserID = "<?=$_SESSION['UserID']; ?>";
</script>

Обратите внимание, что это лучше, но не оптимально. Google для "pass variable from php to js" и выбрать оптимальные решения:)

И последнее: Попробуйте сделать отдельные запросы SQL для получения данных из БД. Например:

"SELECT UserID, Text FROM statuses Order BY ID DESC"

"SELECT Username FROM users WHERE ID=?"

вы можете заменить на:

"SELECT statuses.UserID, statuses.Text, users.Username
FROM statuses 
INNER JOIN users ON users.ID = statuses.UserID
Order BY ID DESC"

Это улучшит выполнение, уменьшив количество запросов БД.

Ответ 2

Кажется, что $('#output') отсутствует. Добавьте в свой HTML:

<div id="output"></div>

Вы заметите, что в консоли разработчика есть ошибка JavaScript, если это так.

Ответ 3

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

Взгляните на это, просто очень просто: http://jsfiddle.net/ABFV9/

Итак, вы хотите получить предоставленные данные из текстового поля:

var getText=jQuery("[name='Status']").val();

Ответ 4

Не позволяйте форме автоматически отправлять "по щелчку" (вы можете удалить поле действия из атрибутов формы). Пусть происходит вызов AJAX и добавьте $("#YourFormIdHere").submit(); в качестве последней строки вашей функции обратного вызова успеха в вызове ajax (Out здесь для вашего цикла). Он должен работать.

Ответ 5

Когда вы вызываете запросы statusupdate, вы должны возвращать пользователя и статус, закодированные в JSON, то функция callBack в вашей функции JQuery позволяет декодировать JSON и добавлять в ваш div

1) в statusupdate.php

return json_encode('status:{'.$Array.'});

2) callBack в JQuery

$.ajax{(
)}.done(function(status) {
  var status = jQuery.parseJSON(status);
  Userstatus = status.text;
  UserName = status.username;
});

3) $('#output').append('<div class="status"><span>'+User +':</span><a href="#">'+UserName+'<span><strong>'+Userstatus+'</strong></span></div>');

Ответ 6

Вы уверены, что используете правильный тип запроса между синхронными или асинхронными запросами AJAX?

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

Отметьте этот пост: jQuery: Выполнение синхронных запросов AJAX

Надеюсь, что это поможет.

Ответ 7

Для чего вам нужно setInterval?

Отвечая на ваш вопрос так просто, как я могу. Чтобы добавить текстовое поле в div, вам нужно привязать событие click к кнопке. Если вы хотите сделать это легко, вы можете написать вот так:

<script>
$(function (){
  $("#btn_append").click(function (){
     //$("#output").html($("#mytext").val()); //overwrite text
     $("#output").append($("#mytext").val()); //append text
  });
});
</script>
<input type="button" id="btn_append" value="append" />
<textarea id="mytext"></textarea>
<div id="output"></div>

Взгляните на функцию reaady документа $(function (){}) Я объявил ее в начале, и вы в своем setInterval объявите ее несколько раз. Вам также нужно взглянуть на соглашение об именах, потому что ваши имена похожи друг на друга, и это затрудняет отладку кода.

Вы писали о задержке. Очевидно, что есть задержка, потому что это асинхронные методы, как AJAX. Вы всегда можете сделать синхронный вызов, вам просто нужно перейти к $.ajax(); param async:false, но я не рекомендую его.

Ответ 8

Сколько статусов возвращено из базы данных?

Я предполагаю, что у вас есть правильный код (сочетающий предыдущие ответы, которые были отправлены здесь), и все же существует задержка. Это может быть вызвано вызовом ajax, сделанным в setInterval, после добавления нового статуса в #output, который был перезаписан запросом, который был запущен перед событием click.

Чтобы предотвратить отмену запроса xhr и очистить функцию интервала при нажатии кнопки:

$(function(){


    // interval reference and jQuery XHR object
    var ajaxInterval, jqxhr;

    // initialize fetching data from server
    function startPolling() {
        stopPolling();
        ajaxInterval = setInterval( function() {
            jqxhr = $.ajax({                                      
                url: location.href, 
                data: {ajax: 1}, 
                dataType: 'json',  
                type: "GET",
                success: function(result)        
                {
                    // parse result and insert into #output
                    // ...
                } 
            });     
        }, 1000);
    }

    // clear interval and abort xhr request
    function stopPolling() {
        if(ajaxInterval)
            clearInterval(ajaxInterval);
        if(jqxhr)
            jqxhr.abort();
    }


    $('input').click(function(){

        // this prevents overwriting from old ajax call
        stopPolling();

        // insert into #output our new status
        var getText=jQuery("[name='Status']").val();
        $('#output').append('<div>'+getText+'</div>');

        // post status into server
        $.ajax({                                      
            url: location.href, 
            data: {ajax: 1, status: $("[name='Status']").val()}, 
            dataType: 'json',  
            type: "POST",
            success: function(result)        
            {
                // parse result and insert into #output here
                // ...

                // restart fetching data
                startPolling();
            } 
        });     
    });

    // start fetching data
    startPolling();
});

Вот простая демонстрация этого javascript (с рабочими xhr-запросами) на phpfiddle: http://phpfiddle.org/lite/code/hn0-0e1

Но мне интересно, сколько статусов будет выбрано в каждом запросе? Не было бы лучше хранить уже выбранные статусы в переменной и просто загружать те, которые новее, чем предыдущие, которые у нас уже есть? Так же, как и в facebook - когда вы открыли свою стену, она не перезагружает всю стену каждые X секунд, а просто извлекает статусы, которые были добавлены после предыдущего вызова.

Просто быстрая идея:

$(function(){


    // interval reference and jQuery XHR object
    var ajaxInterval, jqxhr;
    var statuses = [];

    // initialize fetching data from server
    function startPolling() {
        stopPolling();
        ajaxInterval = setInterval( function() {

            // get the newest stored id
            var lastStatusId = 0;
            if(statuses.length)
                lastStatusId = statuses[0].id;

            jqxhr = $.ajax({                                      
                url: location.href, 
                data: {ajax: 1, lastStatusId: lastStatusId}, 
                dataType: 'json',  
                type: "GET",
                success: function(result)        
                {
                    if(result.updateStatuses) {
                        // prepending the latest statuses to our variable
                        statuses = result.statuses.concat(statuses);
                        // merge repaint output
                        displayStatuses();
                    }
                } 
            });     
        }, 1000);
    }

    // clear interval and abort xhr request
    function stopPolling() {
        if(ajaxInterval)
            clearInterval(ajaxInterval);
        if(jqxhr)
            jqxhr.abort();
    }


    function displayStatuses() {
        var $output = $('#output');
        $output.empty();

        // parse statuses array of objects and 
        // insert the result in the #output
        // ...
    }


    $('input').click(function(){

        // this prevents overwriting from old ajax call
        stopPolling();

        // insert into #output our new status
        var getText=jQuery("[name='Status']").val();
        $('#output').append('<div>'+getText+'</div>');

        // get the newest stored id
        var lastStatusId = 0;
        if(statuses.length)
            lastStatusId = statuses[0].id;

        // post status into server
        $.ajax({                                      
            url: location.href, 
            data: {ajax: 1, status: $("[name='Status']").val(), lastStatusId: lastStatusId}, 
            dataType: 'json',  
            type: "POST",
            success: function(result)        
            {
                if(result.updateStatuses) {
                    // prepending the latest statuses to our variable
                    statuses = result.statuses.concat(statuses);
                    // merge repaint output
                    displayStatuses();
                }

                // restart fetching data
                startPolling();
            } 
        });     
    });

    // start fetching data
    startPolling();
});

Итак, ваш php-код должен выглядеть примерно так:

    $Query = $DB->prepare("SELECT Statuses.ID, Text, Username FROM statuses, users WHERE Username.ID = statuses.UserID AND statuses.ID > ? ORDER BY Statuses.ID DESC");
    $Query->bind_param('i',intval($_REQUEST['lastStatusId']));
    $Query->execute();
    $Query->bind_result($ID, $Text, $Username);
    $Query->store_result();
    $Array = array();
    while($Query->fetch()){
         $Array[] = array ('id'=>$ID,'username'=>$Username, 'text'=>$Text);
    }
    $Query->close();

    // are there any new statuses?
    $result['updateStatuses'] = false;
    if( count($Array) )
        $result['updateStatuses'] = true;

    $result['statuses'] = $Array;
    echo json_encode($Array);

Ответ 9

Я сделал рабочую демонстрацию из вашего кода. Надеюсь, он может решить вашу проблему. В любом случае, я бы порекомендовал вам потратить немного времени, чтобы прочитать о стиле jQuery и JavaScript.

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

<!-- TEXTAREA that we will update --> 
<textarea name='Status'> </textarea>

<!-- I didn't saw output DIV in your code. It should be present in HTML -->
<div id='output'></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>

 $(function(){

   // 1. Update on click:
   $('input').on('click', function () {

       var Status = $(this).val();

       // append content to the DIV
       $('#output').append(Status);

       // save content to the TEXTAREA
       $('textarea').val(Status);
   });

 }

</script>

Ваш код, который делает запросы AJAX, также выглядит не менее-менее тонким и почти работает. Я сделал несколько изменений:

<textarea id='status' name='Status'> </textarea>
<div id='output'></div>
<input type='button' value='Status Update'>

<script id="AjaxStatusesTemplate" type="text/template">

  <div class="small-3 large-2 columns ">
    <img src="http://placehold.it/80x80&text=[img]" />
  </div>
  <div class="small-9 large-10 columns">
      <p><strong><a href="#">{{User}}</a>:</strong>{{Status}}</p>
      <ul class="inline-list">
          <li><a href="">Reply</a></li>
          <li><a href="">Share</a></li>
      </ul>
      <hr/>
   </div>

</script>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>

    // 2. Update by timer with 1 second delay: 
    function UpdateOutputWithAjaxStatuses(){
        var htmlTemplate = $('#AjaxStatusesTemplate').html();
        $.ajax({ url: 'http://your-server.com/Ajax/AjaxStatuses.php', data: '', dataType: 'json',
          success: function(rows){
            $('#output').empty();
            for (var i=0, row=rows[i]; i<rows.length;i++)
            {     
              var User = row[0];
              var Status = row[1];

              var html = htmlTemplate
                           .replace('{{User}}', User)
                           .replace('{{Status}}', Status);

              $('#output').append(html);
            } 
          },
          error: function(){
              var now = new Date();
              $('#output').html('error at '+now);
          },
          complete: function(){
            setTimeout(UpdateOutputWithAjaxStatuses, 1000);
          }
        });       
    }

    // comment next line to stop autostart for ajax request scheduler
    UpdateOutputWithAjaxStatuses();

</script>

Здесь вы можете найти рабочие примеры: http://jsfiddle.net/vmysla/XWuDf/6/

(Вы должны изменить URL-адрес для запросов AJAX, чтобы заставить их работать)

Ответ 10

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

Некоторые советы по отладке:

выведите несколько операторов debugger; в свой код
в chrome откройте инструменты разработчика и сделайте свой javascript пройденным через этот путь кода, например, нажмите кнопку. Код будет остановлен в операторах отладчика.
Исследуйте значения, переданные и выходящие из различных функций. Подтвердите предположения о том, какие вызовы вызываются и какая информация они получают.

Места для проверки:

убедитесь, что ваши обратные вызовы ajax на самом деле запущены. Тип mime с вашего сервера должен быть application/json. Если ваш обратный вызов ajax не запускается, его либо проблема с типом/ответом, либо отказ сервера какого-либо рода.
убедитесь, что $('# output') возвращает что-то. Попробуйте открыть консоль хром и введите ее, когда вы приостановили использование одного из этих операторов debugger;. Вы должны вернуть HTML-элемент.
Ваш обновленный код не указывает мне, что все происходит после завершения вызова ajax. Это намеренно/нормально? Вы должны указать аргумент success, если вы хотите, чтобы что-то произошло потом.

Ответ 11

Pajax - это простое решение для обновления содержимого на странице с помощью ajax-ответа, это позволит избежать многих повторных шагов, просто проверьте ниже ссылки

yui:: http://yuilibrary.com/yui/docs/pjax/
jQuery:: https://github.com/defunkt/jquery-pjax

Также рассмотрите возможность использования шаблонов для генерации html, они являются красивым и более коротким способом заполнения html данными json.

шаблон javascript: http://handlebarsjs.com/
php side templating: https://github.com/bobthecow/mustache.php (если вы решили создать html-генерация на стороне php-сервера)

Ответ 12

Извините, если я неправильно понял ваш вопрос, но это кажется относительно легким для меня. В #output есть еще один div, содержащий статусы... так:

<div id = "output">
    <div id="statuses">
    ...
    </div>
<textarea name='Status'> </textarea>
<input type='hidden' name='UserID' value="<?=$_SESSION['UserID']; ?>">
<input type='button' value='Status Update'>
</div>

Тогда, здесь

window.setInterval(function()
{
  $(function () 
  {
    $.ajax({                                      
        url: 'Ajax/AjaxStatuses.php', data: "", dataType: 'json',  success: function(rows)        
        {
        $('#output').empty();
        for (var i in rows)
        {
            var row = rows[i];          
            var User = row[0];
            var Status = row[1]
            $('#output').append(''+
                '<div class="small-3 large-2 columns "><img src="http://placehold.it/80x80&text=[img]" /></div>'+
                '<div class="small-9 large-10 columns">'+
                    '<p><strong><a href="#">'+User+'</a>:</strong>'+Status+'</p>'+
                    '<ul class="inline-list">'+
                        '<li><a href="">Reply</a></li>'+
                        '<li><a href="">Share</a></li>'+
                    '</ul><hr>');
        } 
    } 
});       
});
}, 1000);

измените $('#output').empty(); на $('#statuses').empty(); Таким образом, вы никогда не удаляете текстовую область в первую очередь!: D

Также посмотрите сообщение QArea, так как у вас есть куча других ошибок в вашем синтаксисе, который был там рассмотрен.: D Если вам нужна дополнительная помощь, если я неправильно понял вопрос, lemme знаю в комментариях:)

Приветствия

Pranay