PDA

View Full Version : انتخاب المنت با id متغیر در جی کوئری(سوال چالشی)



roya_django
شنبه 09 اردیبهشت 1396, 03:51 صبح
سلام دوستان
من یه سوال دارم امیدوارم کسی بتونه کمکم کنه

در صفحه ی html ای که من روش کار میکنم یک المان وجود داره که id اون المان هست: id_0

کاربر این اختیار رو داره که به هرتعداد که میخاد از این المان ایجاد کنه مثلا اگه یکی دیگه ایجاد کنه id المان ایجاد شده خواهد بود : id_1

و به همین ترتیب یعنی بعدی میشه id_2 و بعدی id_3 و بعدی id_4 و ...

حالا من نیاز دارم که با این المان در جی کوئری کار کنم . دسترسی هم ندارم که خودم بهش کلاس اضافه کنم یعنی تنها راه دسترسیم همین id هست.

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

plague
شنبه 09 اردیبهشت 1396, 14:18 عصر
شما مشکلت رو نگفتی که ما راه حل بدیم

roya_django
شنبه 09 اردیبهشت 1396, 16:19 عصر
فک کنم گفتم .

من میخام به اون المان دسترسی داشته باشم اما id اون المان هربار تغییر میکنه. حالا من چطوری بهش دسترسی داشته باشم؟
مثلا میتونم با
[
$("id_0") به اولین المان دسترسی داشته باشم اما وقتی کاربر میتونه ده تا اضافه کنه اون موقع باید چه کار کنم؟

حالا که شما قراره به سوالم جواب بدین و از دانش شما در django اطلاع دارم اجازه بدین مطلب کامل باز کنم:

من یک inline formset دارم برای نمایش این formset یک جدول درست کردم. حالا هر ردیف از جدول یه فرم هست. با افزونه ی زیر که جی کوئری هم هست این قابلیت رو اضافه کردم که
کاربر میتونه به هرتعداد که میخاد به جدول ردیف اضافه کنه

https://github.com/elo80ka/django-dynamic-formset

حالا مشکل اینه که در ردیف هایی که اضافه میشن id های متغیری ایجاد میشه که من با inspect element فهمیدم که id داره به صورت نمایی افزایش پیدا می کنه.
الان من چطور میتونم به تمام المان های این فرم دسترسی داشته باشم؟
امیدوارم توضیحات کافی باشن اگه نبودن بگین تا عکس بگذارم

plague
شنبه 09 اردیبهشت 1396, 21:34 عصر
مشکل اینه که شما نگفتین در چه حالتی و به کدوم یکی از المنت ها میخاید دسترسی پیدا کنید
مثلا آیا یک دکمه در هر سطر قرار داره که با فشردنش میخاید به المنت اون سر دسترسی پیدا کنید
یا اینکه همه رو یکجا میخاید دریافت کنید
میخاید آخرین یا اولین رو دریافت کنید
یا ......
این مهمه نقطه شروع اکشن رو باید بگی و اینکه کدوم المان ها رو میخای

همچنین یک تکه کد html هم کمک میکنه چون در این مواقع که با آیدی نمیشه کار کرد باید بین المنت ها حرکت کرد و از رویه مکان قرار گیری و نوعشون کد رو نوشت

roya_django
شنبه 09 اردیبهشت 1396, 22:45 عصر
من ابتدا عذرخواهی میکنم که نتونستم سوالم رو خوب و شفاف بپرسم.
امیدوارم همین طور مرحله به مرحله باهام حرکت کنین تا بالاخره بتونم منظور اصلی رو منتقل کنم.


. من یه عکس گرفتم و گمان می کنم عکس منظورم رو می رسونه. لطفا عکس رو نگاه کنین

هر ردیف از جدول یک فرم هست. به این ترتیب هر ستون از جدول مربوط به فیلدی خاصه. یکی از این ستون ها به تاریخ اختصاص داره و کاربر میتونه تاریخ رو اونجا وارد کنه.
لطفا اگه با دیدن عکس باز هم متوجه نشدین چی توی ذهنمه نا امید نشین و بهم بگین من بالاخره مقصودم رو می رسونم.145082

alireza_s_84
شنبه 09 اردیبهشت 1396, 23:40 عصر
من ابتدا عذرخواهی میکنم که نتونستم سوالم رو خوب و شفاف بپرسم.
امیدوارم همین طور مرحله به مرحله باهام حرکت کنین تا بالاخره بتونم منظور اصلی رو منتقل کنم.


. من یه عکس گرفتم و گمان می کنم عکس منظورم رو می رسونه. لطفا عکس رو نگاه کنین

هر ردیف از جدول یک فرم هست. به این ترتیب هر ستون از جدول مربوط به فیلدی خاصه. یکی از این ستون ها به تاریخ اختصاص داره و کاربر میتونه تاریخ رو اونجا وارد کنه.
لطفا اگه با دیدن عکس باز هم متوجه نشدین چی توی ذهنمه نا امید نشین و بهم بگین من بالاخره مقصودم رو می رسونم.145082
ابتدا چک کنید ممکنه خود پلاگین ایونتی داشته باشه که بعد از افزودن المنت بتونید به اون دسترسی داشته باشین.
دوم پلاگینی که برای Date Picker ازش استفاده میکنید ممکنه قابلیت اتصال پویا داشته باشه این رو هم بررسی کنید.
در نهایت خودتون میتونید برای دکمه افزودن رویداد بنویسید (از نوع رویداد delegate) و پس از اجرای ایونت آخرین المنت اضافه شده رو دریافت و به تکست باکس مورد نظر دسترسی داشته باشین.
برای راهنمایی بیشتر یک صفحه html به همراه پلاگین قرار بدین تا بررسی بشه.

roya_django
یک شنبه 10 اردیبهشت 1396, 00:42 صبح
والا روی راه حل اول و دومی که گفتین دارم سرچ می کنم اما چیزی پیدا نمی کنم.

می خواستم از راه حل سوم استفاده کنم قصدم این بود یه رویداد click اضافه کنم که هربار روی لینک افزودن ردیف جدید کلیک کرد دوباره تمام المان هایی که در اون ستون قرار دارند رو
به تقویم وصل کنم . اما به مانع دیگه ای خوردم :

تگ a رویداد click رو پشتیبانی نمیکنه.


در مورد پلاگین من از datepicker شمسی استفاده می کنم . گذاشتن محتویات html فک نکنم کمکی کنه چون من از فریم ورک استفاده می کنم و فرم هارو جنگو برام
تولید می کنه




<tbody class="order">
{% for form in formset %}
<tr class="form >
<td>{{form.id}} {{form.name}}</td>

<td>{{form.birthdate}}</td>

<td class="text-center">{{form.DELETE}}</td>

</tr>

{% endfor %}
</tbody>

این قسمت مربوط به کدی است که فرم های اولیه موجود در صفحه رو تولید می کنه بقیه رو هم پلاگینی که در پست قبلی گفتم تولید می کنه

alireza_s_84
یک شنبه 10 اردیبهشت 1396, 01:14 صبح
تگ a رویداد click رو پشتیبانی نمیکنه.
بلا استثنا همه المنتهای موجود در صفحه رویداد کلیک رو پشتیبانی میکنن. شما اگر از مفهوم event bubbling استفاده کنید و یک delegate بنویسید میتونید رویداد کلیک هر المنتی رو catch کنید.
$(document).on('click', 'سلکتور شما', function(){});

roya_django
یک شنبه 10 اردیبهشت 1396, 02:23 صبح
با on هم امتحان کردم کار نکرد.
فک کنم دلیلش به این مربوط باشه:


<a class="add-row" href="javascript:void(0)">add </a>

roya_django
یک شنبه 10 اردیبهشت 1396, 03:50 صبح
ظاهرا یه نفر قبلا مشکل منو داشته:
http://stackoverflow.com/questions/6719063/when-adding-a-new-inline-to-my-formset-my-datepickers-stop-working

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

plague
یک شنبه 10 اردیبهشت 1396, 12:51 عصر
با توجه به عکسی که شما گزاشتین ظاهرا آخرین اینپوت اضافه شده رو میخاید سلکت کنید که کار مشکلی نیست
شم امیتونید با استفاده از tr پدرش اقدام کنید



$('tr.formset_row:last').find('input[type=text]:last')

وقتی با پلاگین کار میکنی ممکنه مشکل از جای دیگه غیر از سلکت کردن باشه پس اگه دیدی کار نمیکنه با یه روش ساده تست کن ببین مشکل از سلکت هستش یا جای دیگه
مثلا یه مقداری بریز تو val اون اینپوت ببین جواب مییده یا نه اگه جواب داد سلکت مشکل نداره


در مورد پلاگین من از datepicker شمسی استفاده می کنم . گذاشتن محتویات html فک نکنم کمکی کنه چون من از فریم ورک استفاده می کنم و فرم هارو جنگو برام
وقتی میگن html بزار منظور کد خروجی/نهایی html هستش
یعنی صفحه رو اجرا کن بعد از سورس صفحه کد های Html رو بردار که دیگه کد جنگو توش نداشته باشه

roya_django
یک شنبه 10 اردیبهشت 1396, 16:46 عصر
این قطعه کد که پیشنهاد می دین تنها در صورتی میتونه مشکل منو حل کنه که به موقع اجرا بشه. منظورم از به موقع اینه که :

اگه همون اول که صفحه لود میشه اجرا شه که سطر اخر رو برام میگیره من احتیاجی به این کار ندارم چون من قبل از اینکه این تایپیک رو ایجاد کنم هم به سطور اولیه دسترسی داشتم.
پس این کد باید بعد از اینکه کاربر روی لینک افزودن سطر جدید کلیک کرد اجرا بشه اون موقع برای من مفید خواهد بود و دقیقا هم مشکل من اینه.
من نمیتونم به لینک ایجاد کننده سطر جدید رویداد اضافه کنم .


حالا من کد پروژه رو براتون می فرستم . این پروژه فقط شامل یه inliine_formset در ابتدایی ترین شکلش هست. اما شما اگه بتونین این رو درست کنین قطعا مشکل منم حل میشه.

برای استفاده از کد تنها کافیه فایل رو از حالت فشرده خارج کنین خط فرمان رو کنار فایل manage.py داخل پروژه باز کنین و دستور python manage.py runserver رو بزنین این کار باقث میشه که
پروژه ران بشه و برای دیدن خروجی کافیه که در مرورگر ادرس http://127.0.0.1:8000/ رو وارد کنین .

اگه به اون لینکی که دادم سر بزنین مشاهده می کنیم که که در سایت stack overflow هم سوال کننده کد رو گذاشته و بهش پاسخ دادن. ممنون و سپاسگزار میشم اگه شما
هم همون کاری که در stack overflow کردن رو برای منم انجام بدین.

roya_django
یک شنبه 10 اردیبهشت 1396, 16:53 عصر
من این صفحه رو هم در گیتاپ پیدا کردم که یه نفر همین سوال رو پرسیده و نویسنده ی پلاگین هم بهش جواب داده اما من نمی تونم از بین حرف ها وکدهایی
که نوشتن راه حل رو پیدا کنم.

https://github.com/elo80ka/django-dynamic-formset/issues/110 (https://github.com/elo80ka/django-dynamic-formset/issues/110)

شما اگه تونستین سری بزنین

plague
یک شنبه 10 اردیبهشت 1396, 22:20 عصر
این قطعه کد که پیشنهاد می دین تنها در صورتی میتونه مشکل منو حل کنه که به موقع اجرا بشه. منظورم از به موقع اینه که :

اگه همون اول که صفحه لود میشه اجرا شه که سطر اخر رو برام میگیره من احتیاجی به این کار ندارم چون من قبل از اینکه این تایپیک رو ایجاد کنم هم به سطور اولیه دسترسی داشتم.
پس این کد باید بعد از اینکه کاربر روی لینک افزودن سطر جدید کلیک کرد اجرا بشه اون موقع برای من مفید خواهد بود و دقیقا هم مشکل من اینه.
من نمیتونم به لینک ایجاد کننده سطر جدید رویداد اضافه کنم .


حالا من کد پروژه رو براتون می فرستم . این پروژه فقط شامل یه inliine_formset در ابتدایی ترین شکلش هست. اما شما اگه بتونین این رو درست کنین قطعا مشکل منم حل میشه.

برای استفاده از کد تنها کافیه فایل رو از حالت فشرده خارج کنین خط فرمان رو کنار فایل manage.py داخل پروژه باز کنین و دستور python manage.py runserver رو بزنین این کار باقث میشه که
پروژه ران بشه و برای دیدن خروجی کافیه که در مرورگر ادرس http://127.0.0.1:8000/ رو وارد کنین .

اگه به اون لینکی که دادم سر بزنین مشاهده می کنیم که که در سایت stack overflow هم سوال کننده کد رو گذاشته و بهش پاسخ دادن. ممنون و سپاسگزار میشم اگه شما
هم همون کاری که در stack overflow کردن رو برای منم انجام بدین.
کدتون رو نزارید کسی دانلود نمیکنه معمولا (َشخصا به دلیل مسائل امنیتی و تنبلی )
سوالات html/js/jquery که دارید رو توی jsfiddle کد بزارید مخصوص اینه که این کد ها رو اجرا کنه

نمیدونم بر چه اساس میگی کار نمیکنه بعد از لود شدن صفحه اصلا امتحانش کردین ؟
دقیقا بعد از اضافه شدن سطر جدید به تیبلتون با همین روشی که من گفتم میتونید به فیلد آخر دسترسی پیدا کنید

من یه نمونه برات نوشتم اینجا که یه ردیف اضافه میکنه به تیبل بعد ت وفیلد اون ردیف جدید اضافه شده شماره سطر رو میریزه

https://jsfiddle.net/mjwg6pzv/1/

roya_django
سه شنبه 12 اردیبهشت 1396, 02:13 صبح
سرانجام با کمک شما دوستان تونستم کار رو انجام بدم البته نه به اون شکلی که میخواستم یه کمی توقعاتم رو پایین اوردم.
مشکلاتم رو شرح میدم شاید برای دیگران مفید بود:
پلاگینی که من برای تقویم استفاده می کردم یک پلاگین قدیمی بود که با جی کوئری یک و شش نوشته شده بود منم به خیال خودم هم از جی کوئری ورژن سه و هم ورژن یک دارم
استفاده می کنم اما بعد از دیدن پستی در stackover فهمیدم که فقط یکیشون به حساب میاد و به دلیل اینکه من یک و شیش رو پایین تر گذاشته بودم اون در نظر گرفته میشد.

در نهایت این کد کار رو انجام داد


$(document).on('focus',".datepicker", function(){
$(this).datepicker();

});

با تشکر از دوستان