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

[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]

:ناراحت: .

[id1385]

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

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

[qartalonline]

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

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

[engmmrj]

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

با استفاده از 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]

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

<!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]

کد کار کرد ، قسمت 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]

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

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

[afshin9032]

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


من میخوام کمبو بصورت نامحدود زیر هم لود کنم ، یعنی مثلا یک کمبو کشور داریم مثلا وقتی روی ایران کلیک شد یک کمبو زیر باز بشه به عنوان شهر بعد زیر هر شهر باز دوباره لیست استان ها بصورت کمبو بیاد بعد زیرش لیست منطقه های اون استان بیاد بعد زیر استادن یک کمبو به عنوان خیابان ها بیاد بعد زیر یک کمبو به عنوان کوچه ها بیاد بعد از کوچه ها یک کمبو به عنوان خانه ها بیاد .... این فقط یک مثال بود میخوام بصورت نامحدود بشه زیر هم کمبو لود کرد ، من خود یک نمونه کد نوشتم بصورت تابع بازگشتی که مشکلش اینکه که مثلا روی تهران کلیک میکنی 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]

میخوام مثلا وقتی روی 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]

کد زیر رو قبل از کد ajax اضافه کنید.
$(this).nextAll().remove();

[qartalonline]

<!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]

<!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').rem ove();
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]

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

[afshin9032]

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

[engmmrj]

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

من احتیاج دارم پاک بشه ، فایل ضمیمه مثالی هست که qartalonline (http://barnamenevis.org/member.php?249869-qartalonline) درست کردن ، این دقیقا همون چیزی هست که من میخوام فقط یک مشکلی داره، وقتی سومین کمبو رو انتخاب می کنی بعد میری دومین کمبو رو انتخاب کنی محتوای دومی میریزه تو سومی مشکل اینه
120581

[qartalonline]

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

[engmmrj]

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

[qartalonline]

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

[engmmrj]

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

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

[qartalonline]

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

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