OnClick дадаць тэкставае поле для Div

Я ў цяперашні час ёсць выклік Ajax, калі карыстальнік націскае кнопка на маёй вэб-старонцы ..

Праблема заключаецца ў тым, што пасля падачы, ёсць невялікая затрымка (як другі Аякса выклік неабходна завяршыць, каб паказаць DIV), каб пазбегнуць невялікі лаг .. Мне было цікава, калі гэта было магчыма, каб дадаць змесціва ў DIV:

    


    <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 "></div>'+
                    '<div class="small-9 large-10 columns">'+
                        '
'+User+':'+Status+'

'+ '

');
            } 
        } 
    });       
  });
 }, 1000);

and the call:

 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();

How do I append the text area to a HTML div after pressing the button so my script doesn't have to wait for a response from the newly posted status?


Update. When the button is submitted it calls the following code:

$(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'

        });
    });
});

To handle the ajax input

12
ў вас ёсць што-небудзь яшчэ працуе кнопка?
дададзена аўтар Daryl Gill, крыніца
<�Я> Sidenote: </я> прапаную не змешваць адзінкавыя двукоссі і падвойныя двукоссі ў HTML-кодах.
дададзена аўтар Raptor, крыніца
@ShivanRaptor Заўвага прынята, але агульны адказ?
дададзена аўтар Sophie Mackeral, крыніца
@BabakBandpay У мяне ёсць 1 элемент уводу на гэтай старонцы
дададзена аўтар Sophie Mackeral, крыніца
Сафі, калі ласка, не забудзьцеся націснуць прыняць у пытаннях былі вы атрымалі правільны адказ.
дададзена аўтар Sergio, крыніца
Гэта можа быць проста памылка сервера
дададзена аўтар MayorMonty, крыніца
@BabakBandpay Гэта першы раз, калі я бачу, фігурныя дужкі, званыя «вусы» LOL
дададзена аўтар STT LCU, крыніца
Калі вы не хочаце чакаць адказу ад запыту XHR, дадайце DIV перад выкананнем выкліку. Калі ісці па гэтым шляху, вы павінны мець індыкатар, дадзеныя запытаныя.
дададзена аўтар BingeBoy, крыніца
і ў вас ёсць некалькі элементаў ўводу. які адзін з тых, якія вы нацэльванне на $ ( "уваход")?
дададзена аўтар Babak Bandpay, крыніца
Прывітанне Сафі, у вас ёсць сінтаксічныя памылкі ў кодзе. Заканчэнне вусоў не хапае: .. $ (Функцыя() {$ ( 'ўваход') на ( 'націсніце', функцыя() {вар Status = $ (гэта) .val (); $ ( '# выхад') дадаць (Стан);}});
дададзена аўтар Babak Bandpay, крыніца

12 адказы

Сафі.

<�Моцны> Па-першае, паглядзіце на гэты фрагмент кода.

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

Я мяркую, што гэта jQuery :) гэтая канструкцыя

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

служыць для выканання somecode (); калі DOM з'яўляецца дасягае «гатовае» стан. Гэта значыць - somecode() будзе выконвацца толькі адзін раз, на «гатовы» падзеі дакумента і setInterval тут проста звязвае выкананне функцый для гэтай падзеі.

Вы павінны выкарыстоўваць гэтую канструкцыю замест:

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

        somecode();

    }, 1000);
});

<�Моцны> Другое:

include "../PHP/Database.php";
 $Array = array();
        $Query = $DB->prepare("SELECT UserID, Text FROM statuses абоder BY ID DESC");
        $Query->execute();
        $Query->bind_result($ID, $Text);
        $Query->stабоe_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 ад сервера, калі не - функцыя «поспех» не будзе выконвацца.

If this doesn't help, you should check all data flows to find place where they are broken. Use developer console in your browser to see what is going to server іfrom server in ajax requests to locate the problem, іthen you will be able to easily fix the problem.

Also i have some advices fабо you to make your code mабоe clean:

Паспрабуйце зрабіць больш канкрэтныя селектары для такіх рэчаў, як гэта:

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

Проста дадайце ідэнтыфікатар (ці клас, калі ў вас ёсць шмат кнопак) атрыбут для адпаведнага ўваходу, і зрабіць гэта як:

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

або

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

<�Моцны> Таксама)) Паспрабуйце атрымаць такія рэчы, як:

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

out of HTML structure, if this is not inside the fабоm або you use ajax. I see, that you use UserID in JS, so better solution here will be

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

Notice, that this is just better, but not optimal ofcourse. Google fабо "pass variable from PHP to js" іchoose optimal solutions:)

іthe last: Try to make single SQL requests to get data from DB. Fабо example:

"SELECT UserID, Text FROM statuses абоder 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
абоder BY ID DESC" 

This will improve perfабоmens by decreasing the amount of DB requests.

7
дададзена

Здаецца, што $ ( '# выхад') адсутнічае. Дадаць у ваш HTML:

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

Вы заўважыце, што ёсць памылка JavaScript ў кансолі распрацоўніка, калі гэта так.

2
дададзена
паспрабуйце console.log ($ ( '# выхад') . гэта не вызначана? Атачэце усе коды jQuery з document.ready
дададзена аўтар Raptor, крыніца
ёсць якая-небудзь памылка JavaScript ў кансолі распрацоўніка? з'яўляецца $ ( '# выхад') ініцыялізуецца пасля jQuery загружаецца? Падказка: выкарыстоўвайце document.ready
дададзена аўтар Raptor, крыніца
Не маглі б вы растлумачыць далей? і $ ( «# выхад») можна ініцыялізаваць дык гэта тое, што ў цяперашні час дадаецца таксама на маім Аякс выкліку
дададзена аўтар Sophie Mackeral, крыніца
Гэта дзіў прысутнічае.
дададзена аўтар Sophie Mackeral, крыніца

Што вам трэба для setInterval?

Адказваючы на ​​ваша пытанне, так проста, як я магу. Каб дадаць тэкставае поле ў дзіў вам трэба прывязка падзея націску на кнопку. Калі вы хочаце зрабіць гэта лёгка, вы можаце напісаць так:

<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" />


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

Зірніце на дакумент reaady функцыі $ (функцыя() {}) Я абвясціў яго ў пачатку, і вы ў вашым setInterval аб'явіць яго некалькі разоў. Вы павінны таксама зірнуць на найменне, таму што вашы імёны падобныя адзін на адзін, і што робіць код цяжка адладжваць.

Вы пісалі пра затрымкі. Цалкам відавочна, што ёсць затрымка, таму што гэтыя асінхронныя метады, як варта AJAX. Вы заўсёды можаце зрабіць сінхронны выклік, проста неабходна прайсці $ Ajax (); пароў асінхронны :. Хлусня , але я не рэкамендую.

2
дададзена

Колькі статусы вяртаюцца з базы дадзеных?

Я мяркую, што ў вас ёсць правільны код (які спалучае ў сабе папярэднія адказы, якія былі апублікаваныя тут) і да гэтага часу затрымка прысутнічае. Гэта можа быць выклікана Аякс выкліку, зробленага ў setInterval - пасля таго, як вы дадасце новы статус у #output ён перапісваецца з просьбай аб тым, што было запушчана да націсніце падзея ,

Каб пазбегнуць гэтага вы можаце перапыніць запыт 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();
});

Here is a simple demo of that JavaScript (with working xhr requests) on the 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);
2
дададзена

Вы ўпэўненыя, што вы карыстаецеся правільны тып запыту паміж сінхроннымі або асінхроннымі запытамі AJAX?

  • З дапамогай сінхронных запытаў вы чакаеце адказу сервера. Такім чынам, у некаторых выпадках могуць тайм-аўт і не мае ніякага адказу.
  • Пры асінхронных запытах вы не чакаючы адказу. Адказ будзе апрацоўваць, калі сервер адказ.

Check this other post : jQuery: Performing synchronous AJAX requests

Надзея, што дапамагае.

2
дададзена

Не дазваляйце адпраўкі формы аўтаматычна «па пстрычцы» (Вы можаце выдаліць поле дзеянні з атрыбутаў формы). Хай выклік AJAX адбудзецца і дадайце $ ( «# YourFormIdHere») уяўляюць() ;. у якасці апошняга радка вашага поспеху функцыі зваротнага выкліку ў выкліку Ajax (Out боку вашага цыкла тут). Ён павінен працаваць.

2
дададзена
Гэта не выкарыстоўваючы кнопку. HTML-ўваходы нават не ў <�форма> тэг, як гэта сартуецца з дапамогай Ajax/JSON
дададзена аўтар Sophie Mackeral, крыніца
ну, яны не павінны быць у форме. Вы заўсёды можаце выкарыстоўваць $ ( «# <�ваш абгортачнай div>») серыялізацыі() ;. , каб атрымаць значэння пасля фарматавання усіх HTML уваходаў. а затым адправіць яго ў AJAX. шляхам прысваення выніку сериализовать() <�код /> да <�Код> дадзеных поле
дададзена аўтар Archer, крыніца

Вам не здаецца, чытаць правільныя дадзеныя для дадання. Вы чытаеце ад уваходнага элемента, але вы павінны чытаць з тэкставага поля.

Have a look at this, just very basic: http://jsfiddle.net/ABFV9/

Так што вы хочаце, каб атрымаць прадстаўленыя дадзеныя з тэкставага поля з дапамогай:

var getText=jQuery("[name='Status']").val();
2
дададзена
і я ўжо казаў вам, што ёсць яшчэ невялікая затрымка з гэтым. См pastebin.com/PExM7wjZ для маёй ўстаноўкі кода
дададзена аўтар Sophie Mackeral, крыніца
Як я ўжо сказаў, у мяне ёсць пастаянны выклік AJAX з дапамогай: window.setInterval , які далучае да таго ж DIV .. Так што я думаю, што гэта дзе праблема
дададзена аўтар Sophie Mackeral, крыніца
Гэта не дадае да майго выхаду. Калі ласка, прачытайце каментары, я думаю, што-то рабіць з Аяксам абнаўленняў
дададзена аўтар Sophie Mackeral, крыніца
Ён яднае з элементу #output. Я думаю, што я не атрымліваю што-то тут.
дададзена аўтар bouscher, крыніца
Як вы можаце бачыць у маёй скрыпцы, вы можаце дадаць столькіх рэчаў, як вам падабаецца, неаднаразова называючы $ ( «#») выхадам. Далучаць. Тое, што я спрабаваў сказаць вам, што ў сцэнары вышэй, вы выклікаеце уаг Status = $ (гэта) .val (); «Гэта» тут ставіцца да ўваходнага элементу, які не мае ніякага значэння, а не ў тэкставае поле. '
дададзена аўтар bouscher, крыніца

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

У першую чаргу мы выправім код, які неабходна абнавіць статус пасля таго, як вы націснеце на кнопку:

<!-- TEXTAREA that we will update --> 



<!-- 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 запыты таксама выглядае не больш-менш нармальна, і ледзь было не працуе. Я зрабіў некалькі змен у яго:




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

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

  <div class="small-3 large-2 columns ">
    
  </div>
  <div class="small-9 large-10 columns">
      
{{User}}:{{Status}}

      

   </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

You can find working examples here: http://jsfiddle.net/vmysla/XWuDf/6/

(You should change URL for AJAX requests to make them working)

2
дададзена

Пры выкліку 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">'+User +':'+UserName+''+Userstatus+'</div>');

2
дададзена

Там можа быць цэлы шэраг пытанняў тут. Я збіраюся пачаць гэты адказ з некаторымі парадамі адладкі, то спіс месцаў, каб праверыць.

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

  • праліваюць адладчык; заявы ў кодзе
  • ў хром адкрыць інструменты распрацоўніка і зрабіць Javascript прайсці праз гэты код шлях, напрыклад, націсніце на кнопку. Код спыніцца на заявы адладчыка.
  • Даследаваць значэння, перададзеныя ў і з розных функцый. Пацверджанне здагадкі аб розных функцыях выклікаўся і якую інфармацыю яны атрымліваюць.

Месца, каб праверыць:

  • пераканайцеся, што вашыя зваротныя выклікі Ajax на самай справе з'яўляецца запуск. Ваш тып міма з вашага сервера павінен быць дадатак/JSON. Калі ваш Ajax зваротнага выкліку не атрымлівае запускаць яго альбо мім/ответ вопрос набраўшы або збой сервера нейкі.
  • пераканайцеся, што $ ( '# выхад') вяртае нешта. Паспрабуйце адкрыць ўверх храмаваную кансоль і набраўшы, што ў тым, калі вы выкарыстоўваеце паўзу адзін з тых адладчык; заявы. Вы павінны атрымаць HTML-элемент.
  • Ваш абноўлены код не паказвае мне, што-небудзь здарыцца пасля завяршэння Ajax выкліку. Ці з'яўляецца гэта наўмыснае/кі? Вам трэба будзе падаць поспеху аргумент, калі вы хочаце нешта здарыцца потым.
1
дададзена

Pajax з'яўляецца простым рашэннем для абнаўлення кантэнту на старонцы з адказам Аякс, гэта дазволіць пазбегнуць шмат паўторных крокаў, проста праверыць ніжэй спасылак

Таксама рэкамендуецца выкарыстоўваць шаблоны для генерацыі HTML, яны прыгожыя і карацей спосаб запаўнення HTML з дадзенымі JSON

1
дададзена

Ну прабачце, калі я няправільна зразумеў ваш пытанне, але гэта, здаецца, адносна лёгка для мяне. У #output, ёсць яшчэ адзін DIV, які змяшчае статусы ... напрыклад, так:

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


<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 "></div>'+
                '<div class="small-9 large-10 columns">'+
                    '
'+User+':'+Status+'

'+ '

');
        } 
    } 
});       
});
}, 1000);

change $('#output').empty(); to $('#statuses').empty(); That way, you never remove the text area in the first place! :D

Also look at QArea's post since you've got a bunch of other errors in your syntax which has been covered there. :D If you need more help, pr if i misunderstood the question, lemme know in the comments :)

Cheers

Pranay

1
дададзена