עזרה (קטנה?) בקוד

[chagold]

אני רוצה לעשות את זה אבל בלי jQuery (זה של select2)

$('.js-example-basic-multiple').select2({
 	tags: true,
    tokenSeparators: [',', ' '],
});

איך עושים את זה?
תודה מראש

[מנצפך]

אולי זה:

document.getElementsByClassName('js-example-basic-multiple')[0].select2({
 	tags: true,
    tokenSeparators: [',', ' '],
});

[dovid]

לא מבין, למה בלי jQuery? הספריה הזו בכל מקרה דורשת jQuery.

[chagold]

כי יש לי תקיעה רצינית.
ואולי אפרט יותר.
אני באמצע בניית תוסף לפורום שבנוי על XENFORO.
בטופס שבתוך התוסף אמור להיות אפשרות בחירה מרשימה ענקית של סיווגים (סיווגים מקצועיים - כמו מפתח סיווגים של מדריך). וצריך שיהיה אפשרות בחירה מרובה.
רציתי לעשות אפשרות בחירה בselect2 (כך כל אחד יוכל לבחור הכי נח את הסיווג שהוא רוצה) אבל כאמור לא הצלחתי להטמיע את הספריה החיצונית בפריימוורק הזה (אם זה יעזור אני מצרף לינק).

למעשה כרגע השגיאה האחרונה שקיבלתי היתה

 Uncaught TypeError: $(...).select2 is not a function
     at c.init (<anonymous>:7:28)
     at c (core-compiled.js?_v=adc54a0b:117)
     at e (core-compiled.js?_v=adc54a0b:117)
     at HTMLSelectElement.<anonymous> (core-compiled.js?_v=adc54a0b:117)
     at Function.each (jquery-3.2.1.min.js?_v=adc54a0b:2)
     at r.fn.init.each (jquery-3.2.1.min.js?_v=adc54a0b:2)
     at Object.f [as initialize] (core-compiled.js?_v=adc54a0b:117)
     at Object.activate (core-compiled.js?_v=adc54a0b:43)
     at core-compiled.js?_v=adc54a0b:239
     at HTMLDivElement.complete (core-compiled.js?_v=adc54a0b:14)

[מנצפך]

לדעתי:
זה לא שגיאה של jquery, אלא במשהו אחר. אולי ב select2. הוא פשוט לא מוצא את הפונקציה.

$(...).select2 is not a function

אין הבדל אם תיגש עם JS טהור.

[dovid]

יש שגיאה כל שהיא בקונסול?

[chagold]

השגיאה שכתבתי בהתחלה היתה בקונסול (וכמו שכתב @מנצפך השגיאה קיימת גם בלי jquery).

[dovid]

@chagold ברור, התכוונתי אם יש שגיאה אחרת לפני כן.

[chagold]

לא

[chagold]

אולי הסיבה שהוא לא מזהה זה כיון שהייבוא לא מגיע לאותו הסקופ.

כיון שהקוד כרגע הוא ככה

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
  
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
 
<script>
  
XF.Runselect = XF.Element.newHandler({
  
 init: function(){
  
    $('.js-example-basic-multiple').select2({
       tags: true,
       tokenSeparators: [',', ' '],
    });
    this.alert();
},

alert: function(){
    alert('The text changed to red and underline...');
  }
});
  
  
 XF.Element.register('Runselect', 'XF.Runselect');

</script>

<xf:select data-xf-init="Runselect " class="js-example-basic-multiple" multiple="multiple">
	
	<xf:option value="1">
		orange
	</xf:option>
	<xf:option value="2">
		apple
	</xf:option>
	<xf:option value="1">
		banana
	</xf:option>
	
</xf:select>

כלומר הפונקציה נמצאת בתוך סקופ של XF לעומת שורת הרפרנס שנמצאת בחוץ.
יש צורה לקרוא לקוד של הרפרנס מתוך הסקופ ולא ברפרנס למעלה?

[dovid]

לא רואה שום סיבה שלא יעבוד.
ממילא קשה לי להביא פתרונות.
תוכל לוודא שהjQuery עובד ע"י console.log
לערכים:
$
select2

בstackoverflow כתוב שלעיתים זה לא עובד בגלל טעינה כפולה של jQuey. תבדוק את זה בבקשות בכרטסת network של כלי המפתחים בדפדפן.

[מנצפך]

@chagold לא חושב. הוא אמור להחיל את האלמנט להיות select2 וזה אמור להיות נגיש מכל המסמך. (לא התעמקתי ואני גם כלל לא מכיר את select2).
אולי תשתף את כל הקוד בצורה נורמלית באתר כמו CodePen וכדו?

[chagold]

@מנצפך אמר בעזרה (קטנה?) בקוד:

אולי תשתף את כל הקוד בצורה נורמלית באתר כמו CodePen וכדו?

טכנית אין אפשרות כי זה בתוך הפרימוורק שלהם

[chagold]

@dovid אמר בעזרה (קטנה?) בקוד:

לא רואה שום סיבה שלא יעבוד.
ממילא קשה לי להביא פתרונות.
תוכל לוודא שהjQuery עובד ע"י console.log
לערכים:
$
select2

בstackoverflow כתוב שלעיתים זה לא עובד בגלל טעינה כפולה של jQuey. תבדוק את זה בבקשות בכרטסת network של כלי המפתחים בדפדפן.

זה הלוג אחרי שהרצתי את הפקודות הנ"ל. = אין לו את select2

 $
 ƒ (a,b){return new r.fn.init(a,b)}
 select2
 VM4287:1 Uncaught ReferenceError: select2 is not defined
     at <anonymous>:1:1

 console.log($)
 VM4406:1 ƒ (a,b){return new r.fn.init(a,b)}
 undefined
 console.log(select2)
 VM4421:1 Uncaught ReferenceError: select2 is not defined
     at <anonymous>:1:13

עריכה: התוצאה דומה גם כשהרצתי את זה מתוך הקוד ולא רק בקוסנסולה.

[מנצפך]

@chagold אמר בעזרה (קטנה?) בקוד:

טכנית אין אפשרות כי זה בתוך הפרימוורק שלהם

לא הבנתי.

[chagold]

@מנצפך אמר בעזרה (קטנה?) בקוד:

@chagold אמר בעזרה (קטנה?) בקוד:

טכנית אין אפשרות כי זה בתוך הפרימוורק שלהם

לא הבנתי.

זה מערכת פורומים שיש להם טכניקה ספציפית שלהם כדי שאני יוכל להריץ פונקציות (כמו שרואים בקוד שהבאתי לעיל). אין לי אפשרות להכניס את הטכניקה שלהם לתוך codepen.

[dovid]

@chagold אמר בעזרה (קטנה?) בקוד:

$('.js-example-basic-multiple').select2({
tags: true,
tokenSeparators: [',', ' '],
});

נסה לעטוף את הקוד בפונקציית jquery נוספת, ככה:

$(function(){
    $('.js-example-basic-multiple').select2({
     	tags: true,
        tokenSeparators: [',', ' '],
    });
});

המשמעות של זה היא onReady. פה זה עזר למישהו https://stackoverflow.com/a/43391779/1271037

[chagold]

יש אולי אפשרות דומה שתריץ לאחר קריאת כל המסמך?

תודה על הכל

[chagold]

אבל למעשה גם כשאני מריץ את הפונקציה בקונסולה זה מביא את אותה שגיאה.
לדעתי הוא לא מקבל את הספריה של הselect2. ואת זה צריך לפתור

[chagold]

@dovid אמר בעזרה (קטנה?) בקוד:

התברר שהתוכנה של XENFORO משתמשת באיזה מקום בפורום שלהם ב-SELECT2, מה שמאשש את הכיוון של @dovid שהסיבה היא שיש פעמיים קריאה לקוד

ניסתי ללכוד את הקוד שהם השתמשו איתו לצרכי, ללא הצלחה.

אז ניסיתי עכשיו להתשמש עם ספריה אחרת בשם chosen אבל התוודעתי לכך שהשגיאה נמצאת ם שם. אולי כיון שselect2 בנוי על chosen.

יש ספריה שלישית שאני יכול לממש איתה את זה אולי?

[מנצפך]

@dovid כתב שיש כפל קריאה ל Jquery. אתה מדבר על select2.
תנסה לא לטעון בעצמך את select2 אלא להשתמש בשלהם.

[chagold]

ניסיתי בכל מיני וריאציות.
Jquery לא הטענתי בכלל, רק את הselect2.