Hello, how to implement the following, a page opens and a certain block is automatically loaded with ajax'om or js code. This may be a block or a menu, but it needs to be loaded by the ajax machine. Tell me where to dig?

  • So dig or turnkey solution? :) - Redlust

2 answers 2

jQuery $ (document) .ready See here

    Frankly, it is absolutely not clear what the problem is? An example using prototype (although I repeat - what's the problem here is not panatna ...)

    On the server, something like:

    <? // db connection $dbRes = mysql_query('SELECT * FROM comments ORDER BY addData DESC LIMIT 5'); $data = array(); while($row = mysql_fetch_assoc($dbRes)){ $data[] = $row; } echo json_encode($data); // допустим в результате выборки мы получили данные типа $lastComments = array( array('author' => 'Author1','addTime' => '00:00','content' => 'Some text ....'), array('author' => 'Author2','addTime' => '00:00','content' => 'Some text ....'), array('author' => 'Author3','addTime' => '00:00','content' => 'Some text ....'), array('author' => 'Author4','addTime' => '00:00','content' => 'Some text ....'), array('author' => 'Author5','addTime' => '00:00','content' => 'Some text ....') ); // и выводим echo json_encode($lastComments);

    On the client:

     <html> <head> <script type="text/javascript" src="prototype.js"></script> <script> function createCommentsHtml(comments) { comments.each(function(comment){ var commentWrapper = new Element("div",{"class":"comment"}); var authorEl = new Element("div",{"class":"author"}).update(comment.author); var contentEl = new Element("div",{"class":"content"}).update(comment.content); var addTimeEl = new Element("span",{"class":"addTime"}).update(comment.addTime); commentWrapper.appendChild(authorEl); commentWrapper.appendChild(contentEl); commentWrapper.appendChild(addTimeEl); $("lastComments").appendChild(commentWrapper); }); }; Event.observe(window, "load", function(){ new Ajax.Request("/getLastComments.php",{ onSuccess: function(request){ createCommentsHtml(request.responseText.evalJSON(true)) } }) }); Event.observe(window,"load", function(){ // тут остальной код... }) </script> </head> <body> <div id="lastComments"></div> </body> </html>

    As an option - you can completely generate html without waiting for the download, and on window.onload just add it to the page

    Corrected the client code, slightly added the answer.

    We will generate html of this type:

    <div id = "productWrapper"> Products: <span id = "product_name"> name </ span> <span id = "product_total"> quantity </ span> | <span id = "basket_price"> amount </ span> </ div>

    On the server you form an array of type:

      $data = array('name' => 'Имя продукта', 'total' => '100500', 'price' => '100'); // раз ты такой дуб - формируешь массив именно такого вида // т.е. не изменяй ключи, измени только их значения // ну и выводишь echo json_encode($data);

    On the client, now everything is much easier. a single item (if we have a lot of goods, we teach a materiel, namely html (and there we find out that if we write for the id element, it means it is unique or single) by definition, in general, if you have a lot of products, blame yourself.

    In the html page we should have:

      <div id="productWrapper"> <!--сюда мы будем вставлять сформированный html--> </div> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function createCommentsHtml(data) { var productWrapper = $("productWrapper"); var productNameEl = new Element("span",{id:"productName"}).update(data.name); var productTotalEl = new Element("span",{id:"productTotal"}).update("кол-во "+data.total); var basketPriceEl = new Element("span",{id:"basket_price"}).update(data.price + " руб.") productWrapper.apendChild(productNameEl); productWrapper.appendChild(productTotalEl); productWrapper.appendChild(basketPriceEl); }; Event.observe(window, "load", function(){ new Ajax.Request("/getLastComments.php",{ onSuccess: function(request){ createCommentsHtml(request.responseText.evalJSON(true)) } }) });

    If I did the wrong thing - sort it out, if something doesn’t work - look for errors, I already wrote a detailed answer in just a minute ...

    • Something, as it does not display =) I took the library from here ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js added a function to the ajax controller function test_ajax () {$ data = $ this-> db -> get ('catalog') -> result_array (); echo json_encode ($ data); } in js code, I changed only the address to / ajax / test_ajax, and going to the line in / ajax / test_ajax, all the data is displayed in codeigniter 2.1.0 - dogmar
    • Strangely, I did everything as you wrote, changed only the path to the server-side script, and did not want to set up my table in the query. I don’t want to work, and if I go directly to it, as it should be, it displays the data from the table, maybe the old library ajax.googleapis.com/ajax/ libs / prototype / 1.7.0.0 / prototype.js ? or what could be wrong .. - dogmar
    • The point may be that you did not rewrite the formation of elements, etc. properly (I can't help you here), I tested the code - everything works. - Zowie
    • What to do? in js i am oak. I think it’s necessary to help to the end. I don’t want to be bitter before the new year: D Simply, an example of the formation of elements is dogmar
    • An example of the formation is in the code, if you do not understand what needs to be changed in this code for your case, then you are an oak not only in JS. - Zowie