[imdejv1]

Pytanie do ninja programistów :D
Mam wtyczkę na WP w której jedno pole input jest "text" aby wpisać sobie nazwę/tytuł. Chciałbym to pole ograniczyć do wpisywania tylko kilku nazw i wpadłem na pomysł, że zmienie to pole na dropdown z listą już z góry ustaloną do wyboru.

Czy istnieje sposób na "wstrzyknięcie" w to miejsce innego inputa? Nie ma chyba możliwości nawet edycji tego miejsca z poziomu ftp. Blagam pomóżcie

#programowanie #js #php

[imdejv1]

tutaj sprawdzamy czy jest widoczny input z takim id, żeby na innych podstronach nie sypało błędami

@mat89c: To ważne, ponieważ ten input jest włączany lub nie w zależności od potrzeb.
Czyli klika się checkbox "włącz" i dopiero on się włącza w pojedynczej ofercie.

[mat89c]

@imdejv1: Czyli trzeba podpiąć się pod ten checkbox. W jQuery nasł#!$%@? event click tego checkboxa i dopiero wtedy wykonujesz powyższy kod.

[imdejv1]

@mat89c: Rozumiem, to jest checkbox od tego

[mat89c]

@imdejv1:

$('body').on('click', '#_wc_booking_has_person_types', function() {
if ($('#_wc_booking_person_types_person_name_0').is(':visible')) {
$("#_wc_booking_person_types_person_name_0")
.replaceWith('' +
'Pierwsza wartość' +
'Druga wartość' +
'');
}
});

[imdejv1]

@mat89c: Wkleiłem, ale niestety nic sie nie zmienilo

[mat89c]

@imdejv1: Sprawdź w konsoli czy jest widoczne poniższe wywołanie console.log.

console.log('start');
$('body').on('click', '#_wc_booking_has_person_types', function() {
console.log('click');
if ($('#_wc_booking_person_types_person_name_0').is(':visible')) {
console.log('replace');
$("#_wc_booking_person_types_person_name_0")
.replaceWith('' +
'Pierwsza wartość' +
'Druga wartość' +
'');
}
});

[imdejv1]

@mat89c: Mam coś takiego

[mat89c]

@imdejv1: Zamiast $ wpisujemy jQuery.

console.log('start');
jQuery('body').on('click', '#_wc_booking_has_person_types', function() {
console.log('click');
if (jQuery('#_wc_booking_person_types_person_name_0').is(':visible')) {
console.log('replace');
jQuery("#_wc_booking_person_types_person_name_0")
.replaceWith('' +
'Pierwsza wartość' +
'Druga wartość' +
'');
}
});

[imdejv1]

@mat89c: Prawie działa. Jedynie ten checkbox od włączania to on działa na zasadzie zwykłej klasy z "hide" display: none. Czy mozemy jednak te walidacje pominąć? Chodzi o to, że obecnie działa to tak:

Wchodzą w tworzenie > Klikam checkbox WŁĄCZ > pokazuje mi zwykły input text > Odklikuje WŁĄCZ > Klikam znowu WŁĄCZ > pokazuje dopiero pole wyboru

[mat89c]

@imdejv1: Tak, tę walidację można wyrzucić. Można też zmienić tego ifa na:

 if (jQuery('#_wc_booking_person_types_person_name_0').length) {

powyższy if sprawdza czy element z takim id istnieje na stronie, nawet jak jest ukryty .

[imdejv1]

@mat89c: Świetnie,to działa. Tylko po zapisaniu lub wejściu w to miejsce drugi raz wyświetla to pole jako text ( to w sumie jest spoko, bo można to jako atut uznać, że jest możliwość wybrania z listy lub po zapisaniu ręczna edycja, ale chciałbym też opcje "na sztywno" czyli bez tego "atuty". Myślę, że to dzieje się dlatego, że jest ta walidacja czyli powiązanie z tym checkboxem "włącz". Przeprzaszam Cię jeśli piszę

[imdejv1]

Tam też jest opcja, która pozwala dodawać kolejne i wtedy tworzy:
wcbookingpersontypespersonname2, wcbookingpersontypespersonname3, wcbookingpersontypespersonname_4 ale to wystarczy, że powtórze ten kod np. 20 razy prawda ? (żeby już nie mieszać).

[mat89c]

@imdejv1: Jeśli po wejściu na stronę już widoczny jest ten input text (bez kliknięcia w checkbox), to można tak:

// tutaj zamieniamy inpu text na select zaraz po wczytaniu strony
convertInputTextToSelect(); 

// tutaj zamieniamy input text po kliknieciu w checkbox. Myślę, że poniższy kod można wyrzucić, bo jak wspomniałeś input text jest zawsze na stronie - ma tylko klasę css hide, to powyższe wywołanie funkcji zawsze przekonwertuje go na select. Czyli

[imdejv1]

@mat89c: Wow, dziękuje. Czyli ostatecznie jakby taki kod wyglądał?

[mat89c]

@imdejv1: Ostatecznie to powinno wystarczyć

if (jQuery('#_wc_booking_person_types_person_name_0').length) {
jQuery("#_wc_booking_person_types_person_name_0")
.replaceWith('' +
'Pierwsza wartość' +
'Druga wartość' +
'');
};

[imdejv1]

@mat89c: Niestety nie działa. Jak narazie najlepiej sprawdził się kod:

console.log('start');
jQuery('body').on('click', '#wcbookinghaspersontypes', function() {
console.log('click');
if (jQuery('#wcbookingpersontypespersonname0').length) {
console.log('replace');
jQuery("#wcbookingpersontypespersonname_0")
.replaceWith('' +
'Pierwsza wartość' +
'Druga wartość' +
'');
}
});

tylko że po wejściu z powrotem w oferte w tych miejscach jest text z info: pierwszaWartosc, drugaWartosc

[mat89c]

@imdejv1: Ok, to wstaw ten poniższy. Jeśli chodzi o ponowne wejście w oferte i ten błąd że w text jest pierwszaWartosc, drugaWartosc, to tutaj trzeba przechwycić zapisaną wartość, którą wybrałeś wcześniej z selecta jeszcze przed konwersją input text na select i po konwersji ustawić flagę selected na odpowiedni option. Jeśli pojawią się błędy to w konsoli będzie info co się wysypało.

convertInputTextToSelect(); 

jQuery('body').on("click", '#_wc_booking_has_person_types', function() {
convertInputTextToSelect();
});

function convertInputTextToSelect() {

[imdejv1]

@mat89c: Również nie działa. W sensie, że ten kod oraz ten powyższy po wklejeniu nie daje żadnego efektu, nie ma nawet dropdown wtedy. po prostu nic się nie dzieje.

[mat89c]

@imdejv1: Był błąd w tym kodzie, poprawiłem, sprawdź teraz, jeśli nie będzie działał to zobacz co wyświetla się w konsoli.

[imdejv1]

@mat89c: Jest prawie okej, tylko po odświeżeniu jest: pierwszaWartosc, drugaWartosc i żeby był dropdown trzeba odkliknąć "włącz" i znowu kliknąć "włącz" i wtedy robi sie dropdown.