Jquery добавление контента методом after

Тема в разделе "JavaScript", создана пользователем Maza, 3 авг 2012.

Модераторы: ZiX
  1. Maza

    Maza

    Регистр.:
    3 июл 2007
    Сообщения:
    255
    Симпатии:
    118
    Подскажите, как можно подгрузить страницу с помощью jquery после определённого блока <div> в данном случае, после after_post, чтобы при этом он плавно появлялся.
    В закоменченном варианте он отображает как надо но грузит прямо в блок
    <div id='after_post'>

    HTML:
    <html>
    <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
    <script type='text/javascript' src='jquery-1.7.2.js'></script>
    <link rel='stylesheet' type='text/css' href='css/form.css'>
    <link rel='stylesheet' type='text/css' href='css/reset.css'>
     
    <script>
        $(document).ready(function(){
            $("#stype").change(function () {
                var type = $('#stype option:selected').val().split(":");
                if (type[1] == 0){
                    //$('div#after_post').fadeOut(100 , function(){ $(this).load('add_tech.php'); }).fadeIn( 500 );
                    $('#after_post').after( function(){ $(this).load('add_tech.php'); } );
                }
                return false;
            });
        });
    </script>
     
    </head>
    <body>
     
    <div id='container_index'>
    <form id='add_data'>
     
        <div class='formLine'>
            <label for='type' class='leftlabel' > <font style='color:#ff0000'>*</font>Тип:</label>
            <select id='stype' size='1'>
                <option value='-1' disabled selected>Выберите тип</option>
                <option value='0:0'>0</option>
                <option value='0:1'>1</option>
            </select>
        </div>
       
        <div class='formLine' id='after_post'>
            <label for='number' class='leftlabel' >№ :</label>
            <input type='text' id='number' />
        </div>
     
       <!-- Здесь должна подгружаться другая стр -->
    </form>
    </div>
     
    </body>
    </html>
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    по ходу $(this).load('add_tech.php') фактически это $('#after_post').load('add_tech.php') поэтому и грузит непосредственно в этот блок...
    А что, если после блока after_post заранее впихнуть span или что-то подобное, и уже в него грузить данные?
     
    Maza нравится это.
  3. Maza

    Maza

    Регистр.:
    3 июл 2007
    Сообщения:
    255
    Симпатии:
    118
    Со span получилось, но всё таки интересно можно ли сделать, так чтоб дополнительные теги не прописывать, и было плавное появление пока дошёл до такого велосипеда, осталось сделать чтобы плавно появлялось, чуствую не получится....
    HTML:
    $.get('add_tech.php', function(data){
    $('#after_post').after( data );});
     
  4. Maza

    Maza

    Регистр.:
    3 июл 2007
    Сообщения:
    255
    Симпатии:
    118
    Попробовал ещё так, но не вышло....
    HTML:
    $.get('add_tech.php', function(data){
                        $('#after_post').after(   
                            function(){
                            $(this).fadeOut(100 ,
                                function(){
                                return data;
                                }).fadeIn( 500 );
                        });
                    });
     
  5. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    может попробовать так:
    Код:
    <style>
    .afdata{
    display: none;
    }
    </style>
    .........
     
    $.get('add_tech.php', function(data){
                        $('#after_post').after('<span class="afdata">'+ data+'<span/>' );
                        $('.afdata').fadeIn('slow');
    });
     
     
    
     
    Maza нравится это.