لود کمبو باکس بصورت ajax بصورت نامحدود

**engmmrj** · پنج شنبه 29 خرداد 1393, 19:42 عصر

من میخوام کمبو بصورت نامحدود زیر هم لود کنم ، یعنی مثلا یک کمبو کشور داریم مثلا وقتی روی ایران کلیک شد یک کمبو زیر باز بشه به عنوان شهر بعد زیر هر شهر باز دوباره لیست استان ها بصورت کمبو بیاد بعد زیرش لیست منطقه های اون استان بیاد بعد زیر استادن یک کمبو به عنوان خیابان ها بیاد بعد زیر یک کمبو به عنوان کوچه ها بیاد بعد از کوچه ها یک کمبو به عنوان خانه ها بیاد .... این فقط یک مثال بود میخوام بصورت نامحدود بشه زیر هم کمبو لود کرد ، من خود یک نمونه کد نوشتم بصورت تابع بازگشتی که مشکلش اینکه که مثلا روی تهران کلیک میکنی 3 بار ajax میفرسته ! تابع اولی برای اولین کمبو هست تابع دوم برای کمبو ها ی زیر شاخه

    $('#form input[type=checkbox],#form input[type=radio], #form select').change(function(){

        var $this = $(this);

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

        if( $this.attr('type') == 'checkbox' || $this.attr('type') == 'radio'  ) {

            

            if( $this.is(':checked') )

                var parent = $this.val();

            else

                $this.next().filter('#res').html('');

        }

        else

            var parent = $this.children("option:selected").data('parent');

        

        if( parent != 'child' ) {

        

            $.post('ajax.php',{value:value, parent:parent , formid : '<?php echo $query['id']?>' , form : 'loadelement'},function(data){

                    $this.next().html(data);    

                    changeSelect();

            })

        }

        

    })

    

    

    function changeSelect() {

    

    $('#res input[type=checkbox],#res input[type=radio], #res select').change(function(){

        

        var $this = $(this);

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

        if( $this.attr('type') == 'checkbox' || $this.attr('type') == 'radio'  ) {

            

            if( $this.is(':checked') )

                var parent = $this.val();

            else

                $this.next().filter('#res').html('');

        }

        else

            var parent = $this.children("option:selected").data('parent');

        

        if( parent != 'child' ) {

        

            $.post('ajax.php',{value:value, parent:parent , formid : '<?php echo $query['id']?>' , form : 'loadelement'},function(data){

                    $this.parent().append(data);    

                    

                        

                        changeSelect();

                    

            })

        }

**engmmrj** · شنبه 31 خرداد 1393, 18:05 عصر

.

**id1385** · شنبه 31 خرداد 1393, 18:59 عصر

با سلام راستشو بخوایید من کد شما رو نخوندم، چون یه کم وقت دارم
ولی اینکه بخوایید شما بصورت نامحدود المنت لود کنید، نشدنی نیست منتها باید منطقی باشه، یعنی شما یا باید روی جیکوئری زیاد کد بنویسید یا توی فایل پی اچ پی.
شما وقتی می خواهید چیزی رو لود کنید همونطور که گفتید چیزهای مربوط به هم لود می کنید یعنی وقتی کشور لود شد اسامیشون بیاد بعد استانها، شهرستانها و ....
این یعنی ارتباط، توی هر سلکتی که شما لود می کنید و برای هر آپشنی که میخواهید یک ایونت داشته باشه یک ریلیشن برای کمبو بعدی بزارید، بعد اینو بفرستید توی پی اچ پی و اونجا اعتبار سنجی کنید و خروجی رو بفرستید و append کنید، اگه کمی به نتیجه ای که میخواهید فکر کنید راههایی پیدا میکنید که کمتر کد بنویسید، سعی کنید یه فلوچارت برای خود بکشید تا مفهومی تر و منطقی تر کار کنید.
یادتون باشه حتماً از live توی جیکوئری استفاده کنید چون append هست نمی شناسه

اگر تا بعد از امتحانات هنوز نتونسته بودید حل کنید یه نمونه سعی می کنم بنویسم
موفق باشید

**qartalonline** · دوشنبه 02 تیر 1393, 21:43 عصر

برای اینکار بصورت زیر عمل کنید.

با استفاده از jquery و توسط رویداد change تگ select صفت name تگ select رو بگیرید سپس مقدار option انتخاب شده و نام select رو با ajax به صفحه php ارسال کنید در صفحه php نام select و مقدار انتخاب شده رو بررسی کنید و باتوجه به اونها اطلاعات select بعدی رو از دیتابیس بخوانید و بصورت آرایه در پاسخ به ajax ارسال کنید در سمت کلاین که مقدار دریافت شده بصورت آرایه میباشد هر کدوم از مقدارهای این آرایه رو داخل یک option قرار بدید سپس optionها رو داخل تگ select قرار بدید سپس append کنید.

**engmmrj** · سه شنبه 03 تیر 1393, 10:12 صبح

نوشته شده توسط qartalonline

برای اینکار بصورت زیر عمل کنید.

با استفاده از jquery و توسط رویداد change تگ select صفت name تگ select رو بگیرید سپس مقدار option انتخاب شده و نام select رو با ajax به صفحه php ارسال کنید در صفحه php نام select و مقدار انتخاب شده رو بررسی کنید و باتوجه به اونها اطلاعات select بعدی رو از دیتابیس بخوانید و بصورت آرایه در پاسخ به ajax ارسال کنید در سمت کلاین که مقدار دریافت شده بصورت آرایه میباشد هر کدوم از مقدارهای این آرایه رو داخل یک option قرار بدید سپس optionها رو داخل تگ select قرار بدید سپس append کنید.

وقتی یک بار ajax میفرستم و option هارو append میکنم روی تگ select که تازه append کردم رویداد change کار نمیکنه .چون من احتیاج دارم دوباره زیر اون select append شده باز دوباره option لود کنم .

**qartalonline** · سه شنبه 03 تیر 1393, 13:05 عصر

نه مشکلی ایجاد نمیشه.
من یه نمونه خیلی ساده نوشتم.

کد HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document).on("change", "select", function(){
                    var selectName = $(this).attr('name');
                    var optionValiue = $(this).children('option:selected').attr('value');
                    $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: {select: selectName, option: optionValiue}
                    }).done(function(msg) {
                        $('#form').append(msg);
                    });
                });
            });
        </script>
    </head>
    <body>
 
        <div id="form">
            <select name="country">
                <option value="iran">ایران</option>
                <option value="america">آمریکا</option>
                <option value="brazil">برزیل</option>
            </select>
        </div>
 
    </body>
</html>

<?php

 

if (isset($_POST['select']) && $_POST['select']=='country' && isset($_POST['option']) && $_POST['option']=='iran')

{

    echo '<select name="province">'

    . '<option value="a">آذربایجان شرقی</option>'

    . '<option value="b">آذربایجان غربی</option>'

    . '<option value="c">اردبیل</option>'

    . '</select>';

}

 

if (isset($_POST['select']) && $_POST['select']=='province' && isset($_POST['option']) && $_POST['option']=='a')

{

    echo '<select name="city">'

    . '<option value="a">آذرشهر</option>'

    . '<option value="b">بناب</option>'

    . '<option value="c">تبریز</option>'

    . '</select>';

}

من ساده ترین حالت ممکن رو نوشتم بسته به نیازتون تغییر بدید.

**engmmrj** · چهارشنبه 04 تیر 1393, 14:23 عصر

کد کار کرد ، قسمت select رو از رو شما کپی کردم کار کرد

    $(document).on("change", "select, input[type=radio],input[type=checkbox]", function(){

فقط یک مشکلی هست ، الان مثلا ایران رو انتخاب میکنی لیست شهر های ایران باز میشه وقتی روی آذربیجان کلیک میکنی لیست استان هاش میاد حالا وقتی شهر آذربیجان رو تغییر میدی یک کمبو باکس استان دیگه بقل استان آذربیجان باز میشه ، یعنی باید وقتی شهر رو عوض میکنیم زیر شاخه های شهر ها هم پاک بشه

باتوجه به توضیحاتی که دادید این الان کد منه

    $(document).on("change", "select, input[type=radio],input[type=checkbox]", function(){

        var $this = $(this);

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

        if( $this.attr('type') == 'checkbox' || $this.attr('type') == 'radio'  ) {

            

            if( $this.is(':checked') )

                var parent = $this.val();

            else

                $this.next().filter('#res').html('');

        }

        else

            var parent = $this.children("option:selected").data('parent');

        

        if( parent != 'child' ) {

        

            $.post('ajax.php',{value:value, parent:parent , formid : '<?php echo $query['id']?>' , form : 'loadelement'},function(data){

                    

                    $('#res').append(data);    

                    

            })

        }

        

    })

چه تغییراتی بدم که مشکل بالا درست بشه ؟

**engmmrj** · پنج شنبه 05 تیر 1393, 11:46 صبح

با این کد درستش کردم

$this.nextAll().filter('#res > *').not('br:eq(0)').remove();

**afshin9032** · جمعه 06 تیر 1393, 11:12 صبح

کاری که می خوای انجام بدی با next() کمی مشکل هست اما نشدنی نیست ، چون next بیشتر برای عناصر همزاد که یک والد دارند کاربرد داره ، شما اگر کد HTML بذارید که ببنیم ساختار کد html چطور هست بهتر میشه راهنمایی کرد . اما راه حل بهتری هست اینکه برای select ها یک seletor مانند کلاس بذاری که تو DOM دسترسی بهش راحت تر باشه و خیلی بهتر میشه کنترل کرد select ها رو .

نوشته شده توسط engmmrj

من میخوام کمبو بصورت نامحدود زیر هم لود کنم ، یعنی مثلا یک کمبو کشور داریم مثلا وقتی روی ایران کلیک شد یک کمبو زیر باز بشه به عنوان شهر بعد زیر هر شهر باز دوباره لیست استان ها بصورت کمبو بیاد بعد زیرش لیست منطقه های اون استان بیاد بعد زیر استادن یک کمبو به عنوان خیابان ها بیاد بعد زیر یک کمبو به عنوان کوچه ها بیاد بعد از کوچه ها یک کمبو به عنوان خانه ها بیاد .... این فقط یک مثال بود میخوام بصورت نامحدود بشه زیر هم کمبو لود کرد ، من خود یک نمونه کد نوشتم بصورت تابع بازگشتی که مشکلش اینکه که مثلا روی تهران کلیک میکنی 3 بار ajax میفرسته ! تابع اولی برای اولین کمبو هست تابع دوم برای کمبو ها ی زیر شاخه

    $('#form input[type=checkbox],#form input[type=radio], #form select').change(function(){

        var $this = $(this);

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

        if( $this.attr('type') == 'checkbox' || $this.attr('type') == 'radio'  ) {

            

            if( $this.is(':checked') )

                var parent = $this.val();

            else

                $this.next().filter('#res').html('');

        }

        else

            var parent = $this.children("option:selected").data('parent');

        

        if( parent != 'child' ) {

        

            $.post('ajax.php',{value:value, parent:parent , formid : '<?php echo $query['id']?>' , form : 'loadelement'},function(data){

                    $this.next().html(data);    

                    changeSelect();

            })

        }

        

    })

    

    

    function changeSelect() {

    

    $('#res input[type=checkbox],#res input[type=radio], #res select').change(function(){

        

        var $this = $(this);

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

        if( $this.attr('type') == 'checkbox' || $this.attr('type') == 'radio'  ) {

            

            if( $this.is(':checked') )

                var parent = $this.val();

            else

                $this.next().filter('#res').html('');

        }

        else

            var parent = $this.children("option:selected").data('parent');

        

        if( parent != 'child' ) {

        

            $.post('ajax.php',{value:value, parent:parent , formid : '<?php echo $query['id']?>' , form : 'loadelement'},function(data){

                    $this.parent().append(data);    

                    

                        

                        changeSelect();

                    

            })

        }

**engmmrj** · جمعه 06 تیر 1393, 16:36 عصر

میخوام مثلا وقتی روی select دومی کلیک شد select ها زیر اونم پاک بشه ، ممکنه select نباشه یا یک input باشه

<div id="res">

<select></select>

<select></select>

<select></select>

<select></select>

<select></select>

</div>

این کدی هم که خودم نوشته درست کار نمکنه ، مثلا ما چندتا check box هم نام داریم میخوام وقتی رو این check box ها کلیک شد هم نام ها پاک نشه ، یک not دیگه هم اظافه کردم برای این کار که الان خود element رو پاک نمیکنه label اون رو پاک میکنه

$this.nextAll().filter('#res > *').not("br:eq(0),[data-name= '"+$this.data('name')+"']").remove();

**qartalonline** · شنبه 07 تیر 1393, 14:43 عصر

کد زیر رو قبل از کد ajax اضافه کنید.

$(this).nextAll().remove();

**qartalonline** · شنبه 07 تیر 1393, 15:10 عصر

کد HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document).on("change", "select", function() {
                    var selectName = $(this).attr('name');
                    var optionValiue = $(this).children('option:selected').attr('value');
                    $(this).parents('.element').nextAll().remove();
                    $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: {select: selectName, option: optionValiue}
                    }).done(function(msg) {
                        if (msg)
                            $('#form').append('<div class="element">' + msg + '</div>');
                    });
                });
            });
        </script>
    </head>
    <body>
 
        <div id="form">
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
        </div>
 
    </body>
</html>

**qartalonline** · شنبه 07 تیر 1393, 15:38 عصر

کد HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document).on("change", "select", function() {
                    var selectName = $(this).attr('name');
                    var optionValiue = $(this).children('option:selected').attr('value');
                    $(this).parents('.element').nextAll('.jquery').remove();
                    var thisElement = $(this).parents('.element');
                    $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: {select: selectName, option: optionValiue}
                    }).done(function(msg) {
                        if (msg)
                            thisElement.after('<div class="element jquery">' + msg + '</div>');
                    });
                });
            });
        </script>
    </head>
    <body>
 
        <div id="form">
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
        </div>
 
    </body>
</html>

**engmmrj** · شنبه 07 تیر 1393, 16:54 عصر

الان یک مشکلی هست ، مثلا وقتی کمبو اولی زیرش یک سری المنت لود میشه وقتی روی کمبو دومی کلیک می کنی که زیر اون یه سری چیز لود بشه میاد المن های خودش میریزه جای المنت اولی
http://www.engmmrj.ir/forms/form.php?formid=my3
تو این لینک درست کردم خودتون مشاهد کنید

**afshin9032** · شنبه 07 تیر 1393, 17:32 عصر

فایل ضمیمه رو یک نگاه بندازین

**engmmrj** · شنبه 07 تیر 1393, 19:43 عصر

نوشته شده توسط afshin9032

فایل ضمیمه رو یک نگاه بندازین

من احتیاج دارم پاک بشه ، فایل ضمیمه مثالی هست که qartalonline درست کردن ، این دقیقا همون چیزی هست که من میخوام فقط یک مشکلی داره، وقتی سومین کمبو رو انتخاب می کنی بعد میری دومین کمبو رو انتخاب کنی محتوای دومی میریزه تو سومی مشکل اینه
test.rar

**qartalonline** · شنبه 07 تیر 1393, 20:36 عصر

من اون لینکی رو که گذاشته بودید رو دیدم، کدهاتون مشکلات زیاد و اساسی داره با inspect element مرورگر ببینید متوجه میشد.

**engmmrj** · شنبه 07 تیر 1393, 21:06 عصر

نوشته شده توسط qartalonline

من اون لینکی رو که گذاشته بودید رو دیدم، کدهاتون مشکلات زیاد و اساسی داره با inspect element مرورگر ببینید متوجه میشد.

کد هایی که شما گذاشتین برای نمونه یک مشکل داره ، وقتی سومین کمبو رو انتخاب می کنی بعد میری دومین کمبو رو انتخاب کنی محتوای دومی میریزه تو سومی مشکل اینه

**qartalonline** · شنبه 07 تیر 1393, 21:11 عصر

من به این مشکل برخورد نکردم! کدومشون؟ کشورها یا استان یا شهر ؟

**engmmrj** · شنبه 07 تیر 1393, 23:02 عصر

نوشته شده توسط qartalonline

من به این مشکل برخورد نکردم! کدومشون؟ کشورها یا استان یا شهر ؟

هر چی زیر کشور ها لود میشه ، این دستوری رو که من میگم رو اجرا کنید خواهید دید این مشکل رو :
اول روی کمبو 3 کلیک کنید تا شهر ها زیرش لود بشه بعد روی کمبو دوم کلیک کنید تا شهر های اون زیرش لود شه ، خواهید دید که شهر های کمبو 3 حذف میشود .

**qartalonline** · یک شنبه 08 تیر 1393, 00:26 صبح

خودتون دستکاری کنید کدها همش که نمیشه کد آماده داد.
کدی رو که نوشتم رو چک کنید. به ساختار کدها دقت کنید.

کد HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document).on("change", "select", function() {
                    var selectName = $(this).attr('name');
                    var optionValiue = $(this).children('option:selected').attr('value');
                    $(this).nextAll('.jquery').remove();
                    var $this = $(this);
                    $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: {select: selectName, option: optionValiue}
                    }).done(function(msg) {
                        if (msg)
                            $this.after('<div class="element jquery">' + msg + '</div>');
                    });
                });
            });
        </script>
    </head>
    <body>
 
        <div id="form">
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
            <div class="element jquery">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
            <div class="element">
                <select name="country">
                    <option value="iran">ایران</option>
                    <option value="america">آمریکا</option>
                    <option value="brazil">برزیل</option>
                </select>
            </div>
        </div>
 
    </body>
</html>

نام تاپیک: لود کمبو باکس بصورت ajax بصورت نامحدود

ابزار های تاپیک

نمایش

لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

نقل قول: لود کمبو باکس بصورت ajax بصورت نامحدود

تاپیک های مشابه

سوال: نمایش اولین آیتم کمبو باکس بصورت زیر

حرفه ای: لود کردن js بصورت ajax

حذف یک سطر جدید از table بصورت ajax

لود شده اطلاعات از طریق کمبو باکس

طراحی Navagation Panel با Ajax بصورت کامل به همراه سورس کد

قوانین ایجاد تاپیک در تالار