Ответы пользователя по тегу JavaScript
  • Datetimepicker почему не скролится на телефонах?

    @iljaGolubev
    jQuery('#dtp').datetimepicker({
      format:'d.m.Y H:i',
      scrollInput:false, // не выбирать значение при скроле
      timepickerScrollbar:false // скрыть полоску скрола
    })
    Ответ написан
  • Авторизация в одном домене с переходом на другой домен?

    @iljaGolubev
    Если document.origin у всех приложений одинаковый используйте Broadcast_Channel_API

    А вообще, ваша форма "авторизации" не должна ничего делать кроме как отправить форму методом post на url выбранного приложения в нужный роут - там разберутся.
    <form method="post" action="App1.xyz://authorize"> ...
    Ответ написан
    Комментировать
  • На странице товара в девтулсе появилась ошибка. Может кто сталкивался?

    @iljaGolubev
    перечитайте документацию. https://api.jquery.com/load/
    вы возможно думали, что это про события. а нет.
    Ответ написан
    Комментировать
  • Как получить значение текста из инпута в конкретной ячейке таблицы?

    @iljaGolubev
    При клике на кнопку не могу получить текст с инпута в "count"

    Вы не из того места пытаетесь получить значение.
    Значение тут: `$(this).parents('tr').find('.number-text').val() `
    А у вас: `table.row(значение)` - скобка не на месте.

    // вместо $('#users_table tbody').on('click' ...
     table.on("click", "button", function (e) {
        let data = table.row(e.target.closest("tr")).data();
        console.log(data);
        let cart_count = $(e.target.closest("tr")).find("input.number-text").val();
        console.log(cart_count);
      });


    Но лучше работать с api datatables. Примерно так:
    var table = null;
    $(document).ready(function () {
      table = $("#users_table").DataTable({
        data: [[29, "Andrew", "Ruby", "9300000", "1", "btn"]],
        columns: [
          { title: "id" },
          { title: "name" },
          { title: "code" },
          { title: "description" },
          // вместо createdRow использовать renderer и изменять table.data сразу при изменении значения поля
          { title: "count", render: function (data, type, row, meta) {
            return "<input type=\"text\" value="+row[4]+" onchange=\" table.cell("+meta["row"]+", 4).data(this.value)\">"; 
         }},
          { title: "action" }
        ],
        columnDefs: [
          {
            data: null,
            defaultContent: "<button>Click!</button>",
            targets: -1
          }
        ],
        
      });
    
      table.on("click", "button", function (e) {
        // тогда нужное вам значение уже есть тут
        let data = table.row(e.target.closest("tr")).data();
        console.log(data);
      });
    });
    Ответ написан
    Комментировать
  • Как повторно изменить значение переменной из URl?

    @iljaGolubev
    почините бардак в коде чтобы не было "Uncaught ReferenceError: eeer is not defined" - и всё заработает.
    const eeer = ()=>{
        // if (location333 === 'arzamas' ) { ...
    }
    window.addEventListener('DOMContentLoaded', eeer);
    Ответ написан
    Комментировать
  • Как вытащить информацию об элементе при клике в amcharts5?

    @iljaGolubev
    а какой год на линии между точками 2026 и 2027 ?
    Вешайте событие на точку
    Ответ написан
    Комментировать
  • Как вывести результат из ответа JSON на HTML страницу?

    @iljaGolubev
    function createTable(i, data){
     const div = document.createElement("div");
     div.classList.add('data' + [i]);
     document.body.append(div); // тут!
     div.innerHTML =  i + "  <pre>"  + JSON.stringify(data,null,'  ' ) + "</pre>"; 
    }


    С таблицей будет сложнее пока вы получаете данные в разных реквестах - порядок XMLHttpRequest.DONE может не соответствовать i++;
    но для начала - вот (не проверял)
    const t= document.createElement('table')
    function addRow(table, index, json){
        const row=document.createElement('tr')
        const cell=document.createElement('td')
        cell.innerHTML= i + "  <pre>"  + JSON.stringify(json,null,'  ' ) + "</pre>"
        row.appendChild(cell)
        table.appendChild(row)
    }
    
    // ваши реквесты
    for(let i=0; i<count; i++) {
    ...
        addRow(1,data)
    ...
    }
    Ответ написан
  • Бесконечная загрузка страницы, как исправить?

    @iljaGolubev
    Патамушта.
    o=[1,2,3];
    console.log('o.len : ',o.length)
    // можно убрать && i<10
    for(let i=0;i<o.length && i<10; i++){
        o.splice(i+1,0,'added_'+i);
        console.log('NEW o.len : ',o.length)
    }
    Ответ написан
    Комментировать
  • Как найти точный url сайта на javascript?

    @iljaGolubev
    Вариантов нет.
    Они появятся когда изменение любого (нужного) из "множество разделов и фильтров" будет менять url страницы. Параметры запросы или якорь.
    Ответ написан
    Комментировать
  • Как сделать фиксированную ширину таблицы datatables с одинаковой шириной колонок?

    @iljaGolubev
    Если речь об этих datatables , то в общем-то с помощью css и атрибутов html.
    Например, если в body кроме table больше ничего нет, то так:
    <table id="example" width="70%" style=" white-space: pre-wrap;">
        <thead>
            <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
        </thead>
        <!-- ... -->

    $('#example').DataTable( {
        autoWidth: false,
        columnDefs: [
            { targets: '_all', "width": "1%" }
        ]
    } );

    Если используете бутстрап - у таблицы не должно быть 'nowrap' css класса.
    Используйте style="overflow-wrap: anywhere;" eсли в датасете есть слишком_длинные_значения_которые_точно_не_влезут в конечную ширину колонки .
    Ответ написан
  • Как делается такой эффект при скролле?

    @iljaGolubev
    если посмотреть в devtools network то видно кучу jpg и png.
    При прокрутке страницы нужно показывать нужное. Дальше пишите js управляющий логикой отображения.

    Можно через css background.
    Можно найти подходящую библиотеку (впрочем, сомневаюсь что именно такие существуют).
    Или использовать фреймворк: treejs, GSAP, konvajs. Последний, имхо, попроще будет для старта и ближе к решению на том сайте.
    Ответ написан
    Комментировать
  • Как разделить контент в блоке на две части?

    @iljaGolubev
    С трудом понял, что-же вам нужно, но, надеюсь, правильно:)
    Идея в том, чтобы рекурсивно перебирать все ноды спана, считать длину содержимого каждой ноды, и добавлять её в первую часть пока пока не превышен лимит количества. В начале итерации лимит - половина от всего текста спана.

    function aggregator (a, c, maxChars){
        if (a[0].textContent.length > maxChars) {
            a[1].appendChild(c)
        } else if (c.children?.length > 0) {
            const agg = spanParse(c, maxChars - a[0].textContent.length);
            a[0].appendChild(agg[0])
            if (agg[1]) {
                a[1].appendChild(agg[1])
            }
        } else {
            a[0].appendChild(c)
        }
        return a;
    }
    function spanParse(rootSpan, maxChars) {
        const aggregated = [document.createElement('span'), document.createElement('span')]
        return [...rootSpan.childNodes].reduce((a, c) => aggregator(a, c, maxChars), aggregated)
    }
    function split(elem) {
        const r = spanParse(elem, elem.textContent.length / 2)
        console.log(r[0].textContent.length, r[1].textContent.length)
    }
    
    split(document.getElementByTag('span'));


    С тем кодом который в вопросе работать будет если span с текстом есть на странице. Если с какой-то другой разметкой будут ошибки, то нужно докрутить логики в aggregator.
    Ответ написан
    Комментировать
  • Как приостановить работу map до выполнения определённых условий пере return?

    @iljaGolubev
    Завернуть FileReader в Promise
    как-то так

    const readAsDataURL = (image) => {
      const fr= new FileReader();
      return new Promise((resolve, reject) => {
        fr.onerror = () => {  fr.abort();  reject(new Error( 'err msg' ));  };
    
        fr.onload = () => { resolve(fr.result); };
        fr.readAsDataURL(image)
      });
    };
    
    
    [...selectedImages].map( async (image, index) => {
       const data =  await readAsDataURL(image)
       return (<img src={data} alt="" key={`previewImage:${index}`} />
    })
    Ответ написан
  • Откуда при рекурсии в консоли берутся B:1 и B:2?

    @iljaGolubev
    Если не нужно чтобы выводило B, добавьте return.
    if (counter != 0){
                    Operation(counter)
                    return
                }
    Ответ написан
    Комментировать
  • Как сортировать объект в алфавитном порядке в js?

    @iljaGolubev
    Вы не можете управлять порядком отображения свойств при переборе.
    В вашем объекте свойства указаны как число и js всегда будет перебирать такие свойства в порядке возрастания. Можно создать новый объект, но со строковыми именами свойств - тогда они будут в порядке добавления.
    var ordered = Object.entries({
      4889: "Скрипт ",   4914: "Ааа",   11994: "Сервис",   12344: "иииии",    12417: "Тестовая",  12432: "ТТТ ",   12446: "Ма"
    }).sort(
      (a,b)=>a[1]<b[1]?-1:a[1]>b[1]?1:0
    ).reduce(
      (a,c)=>{a[`'${c[0]}'`]=c[1]; return a},
      {}
    );
    Object.getOwnPropertyNames(ordered)
    // ["'4914'", "'12446'", "'11994'", "'4889'", "'12432'", "'12417'", "'12344'"]
    Ответ написан
  • Почему при прокрутке вниз прокручивается до конца страницы?

    @iljaGolubev
    Потому что scroll event появляется пока до конца не докрутит.
    handleScroll меняет this.start в сеттере которого вызывается vertulScroll() в которой меняется this.html.item[0].style.marginTop после чего срабатывает scroll event
    Ответ написан
    Комментировать
  • Как правильно использовать get и set в классах?

    @iljaGolubev
    для начала исправить имена свойств

    this.firstName = firstName;
    // или
    this._firstName = value;
    Ответ написан
    Комментировать
  • Изменение CSS стилей элемента в JS?

    @iljaGolubev
    Ничего не изменилось: вы по-прежнему можете изменять стили напрямую у элемента.
    при обращении к элементу в JS и изменении стилей методом style DOM дерево
    Не скажу как раньше было, но и сейчас при неудачной вёрстке можно вызвать reflow для всего документа даже при применении класса. Изменение шрифта и так и так заставит браузер что-то пересчитать.
    Другое дело, что сейчас есть техники позволяющие минимизировать вычисления: сказать браузеру, что пересчитывать нужно только определённую часть (утрирую).

    Есть tailwindcss с новым (по отношению к 2015 году) подходом - чтобы поменять 1-2 стиля нужно добавить/удалить 1-2 класса. Часто это удобнее.

    Используя классы вместо style код становится понятнее, легче поменять значения для повторяющихся стилей, следовательно меньше багов.

    Впрочем, от style всё равно не уйти полностью. Например, динамически высчитываемые анимации - только class не обойтись.
    Ответ написан
    Комментировать
  • Как работает finally и then в Promise?

    @iljaGolubev
    fetch(url)
        .then((response) => response.json())
        .then(({ cart }) => cartStore.setCart(cart))
        .catch(e=>console.log(e))
        .finally(() => setPreloader(false));

    finally выполнится после того как fetch и цепочка then(catch) выше полностью выполнится.
    Независимо от результата.
    По сути, это тоже самое что написать
    fetch(url)
        .then((response) => response.json())
        .then(({ cart }) => {cartStore.setCart(cart); setPreloader(false)} )
        .catch(e=>{console.log(e); setPreloader(false)})
    Ответ написан
    Комментировать