plugins – Javascript not getting injected into page

I have been pulling my hair out for the past couple days trying to fix an issue that I simply can’t seem to get around.

I’ve provided a file containing 4 files. The steps below will create an environment similar to mine, to replicate the problem.

https://gofile.io/d/Q4Uaiz

  1. install inbox theme in WordPress (found in folder ‘1 – themes’) and activate it
  2. install the plugin Advanced Custom Field (folder ‘2 – plugins’) and activate it
  3. In Advanced Custom Field, import Advanced Custom Field file provided in folder ‘3 – acf content’
  4. In tools, import posts into wordpress from folder ‘4 – wp posts’

We now have the same environment.

If you click on an article in the sidebar, you’ll see the right pane update with the article you clicked on. A read more button also appears.

If you click on read more, it will take you to a new page. On this page, you will see graphs displayed.

This is the problem: for some reason, I cannot display on the graphs on the preview pane (the one with the “Read More” button).
I have tried everything, but the Javascript is simply not being injected into the preview pane page, whereas it is in the single post page, and yet they both get their content from the same file, “content-single.php”.

I would massively appreciate any help, as this is driving me crazy. Thanks a lot

javascript – How to use Anchor tag in SharePoint Custom Navigation

I have a custom master page and I need one of the nav items to link to a section on the same page.

<section class="mt-3 pt-4 pb-5 grey lighten-4" id="cyberHeroes">
        <div style="position: relative;" class="container-fluid">
            <div class="container">
                <h2 class="h2-responsive font-weight-bold text-center cyberHeroes">Everyday Cyber Heroes</h2>
                <p><strong>Heroes are found everywhere.</strong> It could be you, and you may not even know it. An Everyday Cyber Hero is an ordinary individual 
                that practices good cybersecurity habits everyday and anywhere. At Broward County, our employees are the first line of defense in recognizing and 
                reporting cyber threats. You can make a difference. <a href="http://bc-net/CyberSecurity/Articles/Pages/How-to-Become-an-Everyday-Cyber-Hero.aspx">Learn more about becoming an Everyday Cyber Hero.</a>
                </p>
            </div>
            <div id="flickityCarousel" class="container cyber-carousel">
                <!--Inject Carousel Here-->
            </div>
        </div>
    </section>

I added the id to the HTML as shown above and added the URL to the navigation item

/CyberSecurity#cyberHeroes

but it doesn’t work. I also added a code on the page layout that looks like this

<script type="text/javascript">
    $( document ).ready(function() {
    //About the following block of code
    //Because of SharePoint MDS, SP doesnt like appending data to the querystring of a navigation item.
    //If a navigation item has data appeneded like a ? or #, it gets stripped off. I have contacted MS about this and this is by design
    //To get around this, I have that when a navigation item label startes with #, then the #gets stripped off and the url gets
    //appended a # along with the label with spaces stripped off, so the anchor tag will work. -- TJF
        $anchorResults = $('a').filter(function() {
            var txt = $(this).text();
        
            return (txt.length > 1 && txt(0) == "https://sharepoint.stackexchange.com/#");
        });
        
        $.each($anchorResults, function (index, value) {
            var txt = $(value).text().substring(1);
            var href = $(value).attr('href') + "https://sharepoint.stackexchange.com/#" + txt.replace(/ /g, '');
        
            $(value).text( txt );
            $(value).attr('href', href);
        });
        //End Block
    
    });
    </script>

But no positive results. When I go back to the seetings > Navigation the URL I added goes back to this

/CyberSecurity

javascript – por que recebi a exceção “Chat socket closed unexpectedly”?

Recebi a exceção “Chat socket closed unexpectedly” neste script escrito em javascript:

const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/chat/'
            + roomName
            + "https://pt.stackoverflow.com/"
        );

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            document.querySelector('#chat-log').value += (data.message + 'n');
        };

        chatSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

Qual é o problema aqui ?? Eu não consigo resolver isso

javascript – JsPDF HTML2Canvas | Genera el PDF desproporcionado, ligeramente aplastado verticalemente respecto a la web

Genera el archivo PDF sin problema, pero lo crea de manera ligeramente desproporcionada (verticalmente ligeramente aplastado). ¿Cómo se puede corregir para que sea de proporción exacta o más fiel? Gracias de antemano.

Javascript:

<script type="text/javascript">

const { jsPDF } = window.jspdf;
  function genPDF() {
        html2canvas(document.getElementById("testDiv"),{
            onrendered: (canvas)=>{
                var pdf = canvas.toDataURL("image/png");
                
                var doc = new jsPDF("p", "mm", "a4");

            
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
                
doc.addImage(pdf, 'JPEG', 0, 0, width, height);
                doc.save('test.pdf');
            }
        });
    }
</script>

javascript – How to join 2 Bezier curves smoothly & continuously with HTML5 Canvas

I’m trying to join two separate bezier curves into one continuous curve. Currently, what I have looks like this:

Two separate bezier curves

The problem is that they aren’t joined, so the points at which they meet look pointy/sharp instead of curvy and smooth. I’ve looked into documentation for joining bezier curves in P5.js, but am unsure of how to translate this into HTML5 Canvas. How do I join these two bezier curves so that they look like one smooth and continuous curve?

This is my code:

const canvas = document.getElementById('canvas');
const c = canvas.getContext("2d");
width = 800;
height = 500;
canvas.width = width;
canvas.height = height;
let face;
let centerX = width / 2;
let centerY = height / 3;

setup();

function setup() {
    c.clearRect(0, 0, canvas.width, canvas.height);
    face = new Face();
    draw();
};

function draw() {
    setBackground(`rgba(250, 250, 250, 1)`);
    c.beginPath();
    c.moveTo(centerX - face.hsx, centerY + face.hsy);
    c.bezierCurveTo(centerX - face.hcp1x / 10, centerY - face.hsy2,
        centerX + face.hcp1x / 10, centerY - face.hsy2,
        centerX + face.hsx, centerY + face.hsy);
    c.moveTo(centerX - face.hsx, centerY + face.hsy);
    c.bezierCurveTo(centerX - face.hcp1x, centerY + face.hcp1y,
        centerX + face.hcp1x, centerY + face.hcp1y,
        centerX + face.hsx, centerY + face.hsy);
    c.stroke();
    c.fillStyle = (`rgba(25, 250, 211, 0)`);
    c.fill();
}

function setBackground(color) {
    c.fillStyle = color;
    c.fillRect(0, 0, width, height);
}

function Face() {
    this.hsx = 150; 
    this.hsy = 0;
    this.hsy2 = 120;
    this.hcp1x = 120;
    this.hcp1y = 250; 
}

javascript – Is there a way to pause or turn off individual code completions for sublime text editor 3

I currently have a plethora or plugins installed for sublime text editor,
but I was wondering if there is a way to turn off[Not Uninstall] various different code completions, so If i am working on Js or a Node application, I only see code completions for Node and Js. Currently I’m getting auto completions for webGl, Js, Python, and any other auto completion plugins all at the same time, usually the WebGl ones first..
I want only the ones that I am currently working on to show up, ie if i’m in a html file html
is shown, if python, python is shown, if webGl or OpenGl WebGl should be shown..

If there is not would be a good plugin for someone else to build.

please could you provide instructions, blogs, articles or personal solutions that may help fix this as its bugging me, WebGl is something that I was interested in but have learnt little to none of, until I learnt more Javascript.

Any solutions would be greatly appreciated,
sure alot of you will know alot more about setting up Sublime than I currently do.

If this is suited elsewhere please migrate it.
Kind regards Tao.

javascript – Can’t close accordion after update from 2.3.1 to 2.3.5-p1

tl;dr After upgrading from Magento 2.3.1 to Magento 2.3.5-p1 our custom JavaScript, part of our custom theme, stopped working. I’m receiving the following error when trying to close the accordion using the Magento Accordion widget like so: $('#accordion').accordion('deactivate');

jquery.js:2 Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method ‘deactivate’

Full error


I’m using the native Magento Accordion Widget in my custom theme. The file contains a single #accordion, with a #readmore and #readless button.
Both are loaded into the DOM, however, the #readless button has the default styling: display: none

Block code

<div class="homepage-block">
<div id="accordion" class="fade-active" data-mage-init="{&quot;accordion&quot;:{&quot;openedState&quot;: &quot;active&quot;, &quot;collapsible&quot;: true, &quot;active&quot;: false, &quot;multipleCollapsible&quot;: true}}">
    <div class="row">
            <p>Lorum Ipsum</p>
    </div>
    <div class="col2-set">
        <div id="readmorecontainer">
            <div id="readmore" data-role="collapsible">Read More...</div>
        </div>
        <div data-role="content">
            <div class="col-1">
                <p>Lorum Ipsum</p>
            </div>
            <div class="col-2">
                <p>Lorum Ipsum</p>
            </div>
            <div id="readlesscontainer" class="col-1">
                <div id="readless">Read Less...</div>
            </div>
        </div>
    </div>
</div>

Javascript code

The JS code has always worked, the functionality is as follows:

  • On #readmore click

    • Toggle the #readless button
    • Toggle fade-active class (Pure styling, used as kind of overlay)
  • On #readless click

   require((
        'jquery'
        ), function($) {
        'use strict';
    
        $(function() {
    
            // Accordion readmore
            $("#readmore").on("click", function () {
                $('#readmore').hide();
                $('#accordion').toggleClass('fade-active');
            });
    
            // Accordion readless
            $('#readless').on('click', function () {
                $('#readmore').show();
                $('#accordion').accordion('deactivate');
                $('#accordion').toggleClass('fade-active');
            });
        });
    });

The issue

After the update the block, pressing the #readless button triggers the error. I guess the accordion function changed, or my JavaSript file isn’t loaded in the correct order.

Any advice is welcome

javascript – objeto add por .prepend não abre a modal do objeto

var ids_p = "<?= $ids_p ?>";
    var count_p= "<?= $count_p ?>";

    
    var data_json = {
        'ids_p' : ids_p,
        'count_p' : count_p
    }


setInterval(function(){
    
var url =  "http://localhost/comp.php"; 


  $.ajax({
      url: url ,
      type: 'POST',
      data: data_json,
      dataType:'html',
      success: function(data){
          data = JSON.parse(data);      
         //console.log(data);

        if(data != 'erro'){
            // console.log(data.length);
            if(data.length > 0) {

                data_json.count_p = parseInt(data_json.count_p) + parseInt(data.length)
                
                

                  for (const obj of data) { 
                    
                    
                    

                      var inputs = '<tr class="item" data-target="#myModal"' + obj .id_p_exercicio + '">'
                      + '<td  style="background-color:'+ obj .cor_funcao  + ';">'+ obj .nome_funcao + '</td>'
                      + '<td>' + obj .id_p_exercicio + '<td>'+ obj .numero + '</td>' + '<td>'+ obj .dia_p + '</td>' 
                      + '<td>'+ obj .descricao + '</td>'                
                      + '<div class="modal fade" id="myModalcad' + obj .id_p_exercicio + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'
                      + ' <div class="modal-dialog" role="document">'
                      + '<div class="modal-content">'
                      +'<div class="modal-header text-center">'
                      + '<h4 class="modal-title w-100 text-success" id="myModalLabel">Inserir Texto</h4>'
                      + '<button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span></button>'
                      + '</div>'
                      + '<div class="modal-body">'
                      + '<form method="POST" action=".php" >'
                      + '<label for="">Texto:</label>'
                      + '<textarea class="form-control" type="text" name="dec_cmd_exec" ></textarea>'
                      + '<input type="hidden" name="id_pms_exerc" value="">'                           
                      + '<div class="modal-footer d-flex justify-content-center">'
                      + '<button type="submit" class="btn btn-success" name="enviar">Enviar</button>'
                      + '</div>'
                      + '</form>'
                      + '</div>'
                      + '</div>'
                      + '</div>'
                      +'</div>'
                      +'</tr>';
                          var modal = '#myModal' + obj .id_p_exercicio
                      data_json.ids_p = data_json.ids_p + ',' + obj.id_p_exercicio
                      
                        $('#table').prepend(inputs);                                    
                        $(document).on('click', '.item', function(){            
                        $(modal).modal({ show: true }) 
                    })          
                }
            }
        }   
        else{
            
          }
        }          
  });  

},5000);

javascript – Como consumir event-stream com nodejs

Tenho uma aplicação nodejs que precisa consumir um endpoint que me devolve um text/event-stream. A aplicação que emite esses eventos é feita com java e empacota um dado dentro de um objeto ServerSentEvent contendo id, event, retry, comment e data, onde data é a minha mensagem.
Para consumir o endpoint tentei utilizar alguma lib de eventSource mas nenhuma funcionou como esperado. Agora estou tentando consumir utilizando a lib http, desse modo:

http.get({
    agent: false
    , path: "/streaming"
    , hostname: "localhost"
    , port: 8080
}, (res) => {
    res.on('data', data => {
        console.log(data);
    })
});

Observando o objeto data que é retornado, percebo que ele é do tipo Buffer. Porém não consigo convertê-lo para um formato que eu consiga manipular.
Qual deveria ser a forma correta de consumir esse endpoint? Continuar buscando uma lib de EventSource ou há uma forma de consumir utilizando a lib http?

PS: a aplicação Node não carrega nada no browser, é apenas backend. Node v10.16.3

Javascript to show folder and files by calling Web Api

    var divFolder = document.getElementById("rootFolder");
    var divFiles = document.getElementById("files");

    function createFolderElement(data) {
        var li = document.createElement("div");
        li.setAttribute('data-id', data.filePathId);
        li.setAttribute('class', "folder");

        divFolder.appendChild(li);
        li.innerHTML = data.folderName
    }

    function createFileElement(data) {
        debugger
        var li = document.createElement("div");
        li.setAttribute('data-id', data.id);
        li.setAttribute('class', "file");

        divFiles.appendChild(li);
        li.innerHTML = data.fileName
    }

    async function fetchFolder(parentId) {
        document.getElementById('spinner').style.display = 'block'
        divFolder.innerHTML = ''

        const response = await fetch(`https://localhost:44371/api/file/folder/${parentId}`);

        if (!response.ok) {
            const message = `An error has occured: ${response.status}`;
            $("div.message").text(message);
            $("div.message").addClass("message alert alert-warning");
            //throw new Error(message);
        }

        const files = await response.json();
        if (files.length > 0) {
            files.forEach((data) => {
                createFolderElement(data)
            })

            createFolderEventListener();

            document.getElementById('spinner').style.display = 'none'
        }
    }

    async function fetchFiles(filePathId) {
        document.getElementById('spinner').style.display = 'block'
        divFolder.innerHTML = ''

        const response = await fetch(`https://localhost:44371/api/file/files/${filePathId}`);

        if (!response.ok) {
            const message = `An error has occured: ${response.status}`;
            $("div.message").text(message);
            $("div.message").addClass("message alert alert-warning");
            //throw new Error(message);
        }

        const folders = await response.json();
        debugger
        if (folders.length > 0) {
            folders.forEach((data) => {
                createFileElement(data)
            })

            createFileEventListener();
        }

        document.getElementById('spinner').style.display = 'none'
    }

    function createFolderEventListener() {
        const myfolder = document.getElementsByClassName("folder");
        (...myfolder).forEach(function (element) {
            element.addEventListener("click", function () {
                fetchFolder(element.dataset.id);
                fetchFiles(element.dataset.id);
            });
        });
    };

    function createFileEventListener() {
        const myfolder = document.getElementsByClassName("file");
        (...myfolder).forEach(function (element) {
            element.addEventListener("click", function () {
                downloadPdf(element.dataset.id, element.textContent)
            });
        });
    };

    $(function () {
        document.getElementById('spinner').style.display = 'none'
        fetchFolder(1);
    })
    div.folder {
        border: 1px solid black;
        margin: 2px;
        cursor: pointer
    }

    div.file {
        border: 1px solid black;
        margin: 2px;
        cursor: pointer
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message"></div>
<img src="~/img/loading.gif" id="spinner" />
<div id="rootFolder"></div>
<div id="files"></div>