mercredi 3 août 2022

ACF all checkbox values list taken from admin

I have ACF checkbox field with three choices. I'm trying to generate filter for post types in my page template. and I need to show the list of all choices from the admin settings. Not only those that were checked for each post type, but all values to generate the filter on the page. Not getting which exact parameters to use to make this happen. I know how to show posts depending on the checked choices, but I need a list of all values from checkbox field to make the filter with options enter image description here




checkbox not displaying checked after putting checked attribute

I have an $lc public array variable in my livewire which contains a boolean. in my view, I have this.

<input @if($lc[$uaf->id]) checked @endif  wire:model.prevent.defer="lc." id="lc." type="checkbox" />

the value of $lc[$uaf->id] is 1 which in boolean represents true. So, it should display a checked box.

but the display is this. 0 it's not checked.

I have already done this

$lc[$uaf->id] = $uaf->classification->for_locational_clearance;

but it's no luck.




mardi 2 août 2022

Ag Grid header checkbox selelction - check/uncheck for all checkboxes does`t work

I'm stuck with one problem and I need your help!

So, We have Ag Grid table with 1000 and more rows. In every row, in one column we are able to add a checkbox that contains some needed data to make some operation, e.g. using "id" or"value"(always different). If I click on the checkbox and after clicking on the button - the page navigates me to another page. We are also able to check all checkboxes - 1000, 2000, and so on.

The problem when using Ag Grid - Row virtualisation - Only renders a certain number of rows, say 60. The rest - when scrolling. We use lots of cellRenderers and it's not possible to add suppressRowVitrualisation: true. The same is with the rowBuffer - it's not possible to increase it to 1000. When adding these settings, the page freezes.

Is it possible to use checkboxselection: true, headercheckboxselection: true to override it by adding some data inside every checkbox("id" and "value" - always different) and at the same time, the selection of all rows and all checkboxes in the table works, whether the table has 10 or 2000 rows?




React onSubmit are not triggered with some Form.Check checkboxes

I have written modal window with dynamic fields. Text input, date and radio boxes works fine, but when I`m trying to use checkbox inputs it falls. handleSubmit does not work and not goes into method body AnswerQuestion:

function AnswerQuestion(props) {
const {questionStore} = useContext(Context);
const dispatch = useNotification();
const question = questionStore.getActiveAnswer();
const show = props.show;
const handleClose = props.handleClose;
const handleUpdate = props.handleUpdate;

const [checkedState, setCheckedState] = useState(question.id && question.answerEntity.answerType === "CHECKBOX"
    ? Array(question.answerEntity.options.length).fill(false)
    : []
)

useEffect(() => {
    if(question.id && question.answerEntity.answerType === "CHECKBOX") {
        const newCheckedState = question.answerEntity.options.map((option) => question.answerEntity.answer.includes(option));
        setCheckedState(newCheckedState);
    }
}, [])

const setInitialValues = () => {
    if (question.id) {
        return {
            author: question.author.username,
            question: question.question,
            answerType: question.answerEntity.answerType,
            options: question.answerEntity.options,
            date: question.answerEntity.answerType === "DATE" && question.answerEntity.answer ? new Date(question.answerEntity.answer) : new Date(),
            answer: question.answerEntity.answer ? question.answerEntity.answer : "",
        };
    } else {
        return {
            author: "",
            question: "",
            answerType: "",
            options: "",
            date: new Date(),
            answer: "",
        };
    }
};

const schema = yup.object().shape({
    author: yup.string().required(),
    question: yup.string().required(),
    answer: yup.string(),
    answerCheckBox: yup.array(),
    date: yup.date(),
});

const submit = (values) => {
    questionStore
        .answerActiveQuestion(question.answerEntity.answerType, values.answer, values.date)
        .then(() => handleUpdate());
    handleClose();
    dispatch({
        type: "SUCCESS",
        message: "Your answer was saved.",
        title: "Success"
    })
}

return (
    <Formik
        enableReinitialize
        render={(props) => {
            return (
                <AnswerQuestionForm
                    {...props}
                    show={show}
                    handleClose={handleClose}
                    checkedState={checkedState}
                ></AnswerQuestionForm>
            );
        }}
        initialValues={setInitialValues()}
        validationSchema={schema}
        onSubmit={submit}
    >
    </Formik>
)

} And AnswerQuestionForm:

function AnswerQuestionForm(props) {
const {
    values,
    errors,
    touched,
    handleSubmit,
    handleChange,
    handleClose,
    setFieldValue,
    setFieldTouched,
    show,
    checkedState,
} = props;

function insertAnswerModule() {
    switch (values.answerType) {
        case "DATE":
            return (
                <Col sm={9}>
                    <DatePicker
                        name="date"
                        value={Date.parse(values.date)}
                        selected={values.date}
                        className="form-control"
                        onChange={(e) => {
                            setFieldValue('date', e);
                            setFieldTouched('date');
                        }}
                    />
                </Col>
            )
        case "SINGLE_LINE_TEXT":
            return (
                <Col sm={9}>
                    <Form.Control
                        type="text"
                        name="answer"
                        value={values.answer}
                        onChange={handleChange}
                        isValid={touched.question && !errors.question}
                        isInvalid={!!errors.question}
                    />

                    <Form.Control.Feedback type="invalid">
                        {errors.question}
                    </Form.Control.Feedback>
                </Col>
            )
        case "MULTILINE_TEXT":
            return (
                <Col sm={9}>
                    <Form.Control as="textarea" rows={3}
                                  type="text"
                                  name="answer"
                                  value={values.answer}
                                  onChange={handleChange}
                                  isValid={touched.question && !errors.question}
                                  isInvalid={!!errors.question}
                    />

                    <Form.Control.Feedback type="invalid">
                        {errors.question}
                    </Form.Control.Feedback>
                </Col>
            )
        case "CHECKBOX":
            return (
                <Col sm={9}>
                    {values.options.map((option, id) => (
                        <Form.Check
                            id={id}
                            type="checkbox"
                            name="answerCheckBox"
                            label={option}
                            value={option}
                            defaultChecked={checkedState[id]}
                            onChange={handleChange}
                        />
                    ))}
                </Col>
            )
        case "RADIO_BUTTON":
            return (
                <Col sm={9}>
                    {values.options.map((option) => (
                        <Form.Check
                            type="radio"
                            name="answer"
                            label={option}
                            value={option}
                            checked={option === values.answer}
                            onChange={handleChange}
                        />
                    ))}
                </Col>
            )
    }
}

return (
    <Modal show={show} onHide={handleClose} centered backdrop="static">
        <Modal.Header closeButton>
            <Modal.Title>Answer the question</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form>
                <Row className="me-3 md-3 justify-content-between">
                    <Form.Group as={Row}>
                        <Form.Label column sm={3}>
                            From user
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control
                                type="text"
                                name="author"
                                value={values.author}
                                readOnly
                                disabled
                            ></Form.Control>
                        </Col>
                    </Form.Group>
                </Row>
                <Row className="me-3 mt-3 md-3 justify-content-between">
                    <Form.Group as={Row}>
                        <Form.Label column sm={3}>
                            Question
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control
                                type="text"
                                name="question"
                                value={values.question}
                                readOnly
                                disabled
                            ></Form.Control>
                        </Col>
                    </Form.Group>
                </Row>
                <Row className="me-3 mt-3 md-3 justify-content-between">
                    <Form.Group as={Row}>
                        <Form.Label column sm={3}></Form.Label>
                        {insertAnswerModule()}
                    </Form.Group>
                </Row>
            </Form>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="primary" onClick={handleSubmit}>
                SAVE
            </Button>
        </Modal.Footer>
    </Modal>
)

} I would be glad to know where is error and how to solve it.




lundi 1 août 2022

connecting 2 checkboxs with arrow

I need to connect 2 checkboxs with each other by a line between them (like combining a mobile with usb), when I swipe from checkbox to another checkbox like this or as show down in the below picture.

example




struts 2 checkbox creating hidden input field

s:checkbox is creating a hidden input field with __checkbox_name while i only need "name" to be sent to the form.

this is my code

<s:checkbox theme="simple" key="sendIncomplete" name="sendIncomplete" submitUnchecked="true" onchange="setChangeVariable();" value="aBoolean" />

this is the html generated

<input type="hidden" id="__checkbox_saveChecklist_sendIncomplete" name="__checkbox_sendIncomplete" value="true">

How do I santitise the code so that i can only send name "sendIncomplete" instead of __checkbox_sendIncomplete in the form.




How can i add parent-child group checkbox to on vuetify datatable?

When i use the vuetify data datable group header feature and when the top group checkbox is selected, i want the checkboxes below it to be selected as well.

enter image description here

Here is the code. https://codepen.io/ersin-g-ven-/pen/LYdeWor?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      sort-by="name"
      group-by="category"
      class="elevation-1"
      show-select
      show-group-by
    >
      <template v-slot:[`group.header`]="{items}">
        <th colspan="2">
          <v-checkbox
            v-model="selected"
            :label="items[0].category"
          ></v-checkbox>
        </th>
      </template>
    </v-data-table>
  </v-app>
</div>