Category: javascript

tôi có một webpage với tên domain là abc.000webhostapp.com làm sao để chuyển sang trang khác với URL là htpps://abc.000webhostapp.com/congnghe ( tôi làm website với các file HTML ) và làm sao up file html congnghe để nó có thể hiện ra trang công nghệ khi nhấn vào chữ công nghệ trên thanh menu.xin cảm ơn ạ

I am new to testing. I have an error on 3 lines in my react project, but I am not sure what to test for. I have done a few tutorials and understanding how to run a test. However on this project, it wants me to test:

1. setToggle(!toggle);
2. setActive(!active);
3. the render
   But I am not sure what I kind of tests I am suppose to run. How do I know what type of test to run based on the the line info they give me?
   

I am trying to generate pdf using JSPDF and it is working fine, However I have a requirement where I want pdf to be converted with page breaks after div which means Div1 on page1, Div2 on page2 and so on..
Please help, Thankyou in advance.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>
<script>
function generatePDF() {
    html2canvas(document.getElementById('report-container')).then(function (canvas) {

    var imgData = canvas.toDataURL('image/png');

      var imgWidth = 210; 
      var pageHeight = 295;  
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save( 'file.pdf');
});
}
</script>

enter image description here

I am calling my background.js file from content script but i don’t know how to open my popup.html file like normally it’s open when we click on extension icon.

background.js

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == 'buttonClicked') {
        console.log(request.message)
        chrome.tabs.update({
            active: true,
            url:  'sidepopup.html'
        }, null);
   }
  });

• I want to show a menu When the mouse moves to the path
• but farbicjs’s path has a Square Touchable area ,Instead of linear
  https://codesandbox.io/s/xz6mi?file=/src/environments/environment.prod.ts
  zrender has Simple implementation
  thanks, all

It is said that “RETURN” statement terminates a for loop in javascript but in this case the code will still output 3 why? does that mean the return statement doesn’t terminate the loop?

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());

I have a node.js webserver and this webserver is call from around 50 different clients and at every call the same json file is opened and data is written into to the file.

I have code a check which looks like following:

let newtext= JSON.stringify(text);
if(JSON.parse(newtext))
{
 write new data into json
}

normaly this should be a check to help against errors in the Json file, but because this webserver is call from many clients at same time and all are using the same json file because of that i think a error come into the json file.

so my problem is that a error message come from node.js at another place where i read the json file with JSON.parse

I need to remove HTML tags from results retrieved in a column as follows:

var objPattern = new RegExp(
        ("/<[^>]*>/g"),
        );

DTColumnBuilder.newColumn('message_content').withTitle('Message Content').renderWith(
function(data, type, full, meta){
return data === null ? "" : type === 'display' ? data.objPattern : data;})

I’m not sure where/how to implement the Replace method here using the regex pattern above.

i am trying to load this json in my page but foreach break and gives error as the number is not in serial

if we provide the number in serial it works.
serial means in incremental
this is my json

{
    "": {
        "id": "",
        "name": "",
        "reply": "",
        "parent": "",
        "actions": []
    },
    "0": {
        "id": "0",
        "name": "",
        "reply": "",
        "parent": "",
        "actions": [
            "01",
            "02",
            "03",
            "04",
            "06",
            "07"
        ]
    },
    "01": {
        "id": "01",
        "name": "Order Status",
        "reply": "Please provide your order number",
        "parent": "0",
        "actions": [
            "011"
        ]
    },
    "07": {
        "id": "07",
        "name": "Book Appointment",
        "reply": "Book Appoinme",
        "parent": "0",
        "actions": []
    },
    "welcomeMssg": "Do you need help with :-",
    "startId": "0",
    "scName": "test name"
}

and this is my javascript

var scenario = "";
var fdata = null;

function getScenarioData(scid, cid) {
  scenario = scid;
  var obj = {
    client: cid,
    scenario: scid,
  };
  $.ajax({
    type: "GET",
    url: "getdata.php",
    data: obj,
    success: function (data) {
      data = JSON.parse(data);
      fdata = data;
      console.log(fdata);
      document.getElementById("welcomeMessage").value = data.welcomeMssg;
      document.getElementById("scenarioName").value = data.scName;
      scenarioName = data.scName;
      welcomeMessage = data.welcomeMssg;
      start = data.startId;
      buttons = data;
      document.getElementById("main1").style.display = "block";
      document.getElementById("entry").style.display = "none";
      ac = buttons[start].actions;
      for(let k in buttons) {
        if(buttons[k].actions){
          count[k] = buttons[k].actions.length+1;
        }
      }
      console.log(count);
      ac.forEach(e => {
        var input = document.createElement("input");
        input.type = "text";
        input.className = "replybox m-1 p-2 form-control";
        input.placeholder = "reply";
        input.style.display = "inline";
        input.value = buttons[e].name;  
        input.id = buttons[e].id;
        var id = buttons[e].id;
        input.onclick = function () {
            addRes(id, buttons[e].parent);
        };
     //   input.onkeyup = function () {
                input.onchange = function () {
            buttons[id].name = document.getElementById(id).value;
            if (document.getElementById("show" + id)) {
            document.getElementById("show" + id).innerHTML =
                "(for " + document.getElementById(id).value + ")";
            }
        };
        var d = document.createElement("div");
        var s = document.createElement("span");
        d.id = "reply"+id;
        s.innerHTML = `<i class='fa fa-times-circle circle' aria-hidden='true' onclick='deleteButton("${id}");' style='font-size:15px;cursor:pointer;margin-left:-10px;;'></i>`;
        d.appendChild(input);
        d.appendChild(s);
        document.getElementById("replies0").appendChild(d);
      });
  },
  error: function (e) {
    console.log(e.message);
  },
 });
}

if i change the json output to 2 instead of 7 it works fine. i am confused is it mandatory to have data in incremental if we are using foreach

when i say if i replace 7 with 2 means this

"07": {
        "id": "07",
        "name": "Book Appointment",
        "reply": "Book Appoinme",
        "parent": "0",
        "actions": []
    },

here is live site for demo
https://way2enjoy.com/shopify/1/whatsapp-chat/bot/1/2/edit_scenario.php?client=50457

any help will be great

i get this error at console

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at edit_scenario.js:39
    at Array.forEach (<anonymous>)
    at Object.success (edit_scenario.js:33)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

this.prepData.filter(e=>e.workflowRoleDesc!=s)[1].userList.filter(e=>e.value != filteredData.map(e=>e.userId))

this.prepData basically looks like this, inside userList we have another array which has a field called value.

0: {workflowRoleDesc: 'Preparer', userList: Array(61), isRoleEnable: true}
1: {workflowRoleDesc: 'Reviewer', userList: Array(44), isRoleEnable: true}
2: {workflowRoleDesc: 'Approver', userList: Array(49), isRoleEnable: true}

length: 3
[[Prototype]]: Array(0)

s is string variable which can have one of the following value at a time Preparer, reviewer or Approver.

and

filteredData.map(e=>e.userId)
(2) ['86cb7ae5-2b56-4437-af5a-115018d69403', '188e20db-db56-41c9-9bfa-20c7d02b4da0']

In the second filter when i am using filteredData.map(e=>e.userId), it does not filter anything but if i give the value ’86cb7ae5-2b56-4437-af5a-115018d69403′ directly it is working as expected.

What can i do to make it work.

I’m using ckeditor in my blade.php files. But when I paste a text in ckeditor.replaced element, window just scrolling. How can I disable that?

my Config file

config.sharedSpaces = {
    top: 'toolbarTop'
};
config.easyimage = {
    top: 'toolbarTop',
    bottom: 'toolbarBottom'
};
config.removePlugins = 'maximize,easyimage';
config.mathJaxLib = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
// config.mathJaxClass = 'equation';


config.extraPlugins = 'sharedspace,resize,image2,imageresize,dialog,widget,imagebase,katex,video';

config.image2_alignClasses = [ 'image-left', 'image-center', 'image-right' ];
config.image2_captionedClass = 'image-captioned';
// config.removeButtons = 'ShowBlocks,PageBreak,Table,NumberedList,Blockquote,TextColor,BGColor,CreateDiv,CopyFormatting,Smiley,Pagebreak,Iframe,Font,FontSize,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,PasteFromWord,Link,Unlink,Anchor,About,Format,Find,Replace';

config.removeButtons = 'ShowBlocks,PageBreak,Table,NumberedList,Blockquote,Styles,ExportPdf,Save,NewPage,DocProps,Preview,Print,Templates,document,Scayt,SelectAll,Flash,CreateDiv,CopyFormatting,Smiley,Pagebreak,Iframe,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,PasteFromWord,Link,Unlink,Anchor,About,Format,Find,Replace,Math';

// ,Font,FontSize,TextColor,BGColor
config.forcePasteAsPlainText = false;
config.fillEmptyBlocks = false;
config.tabSpaces = 0;
config.katexLibCss = "/js/katex/katex.min.css";
config.katexLibJs = "/js/katex/katex.min.js";

I am working on a scenario where I will ask for the camera and mic permissions before joining the session. so I applied the following constraints in navigator.mediaDevices.getUserMedia

const constraints = {
    audio: true,
    video: {
        width: 1280, height: 720
    }
};

Everything works fine till here. But now I want to record the audio tracks only by using MediaRecorder. Other users can see the other peer’s video but in the current session, I just want to record the audio content only for all users.

I tried setting up the MimeType but it still records the video content as well. I think MimeType is just for setting up the mime type for each track.

Do I need to do something on the server side where the blob data is uploaded?

I want it to be stable i mean each new collection will have the same new field here but the content of the field is changed of course for example like uploading a picture and calling it in codes the calling code is easy but how to make the field is what i would like to know ?enter code here

How do I make a modal visible with javascript? I don’t want to do it using jquery. i just want it with javascript. And I don’t want it to open when I click a button. I want it to be opened as a result of some operations in javascript. I made it with modal bootstrap. my codes are below.

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="modal fade" tabindex="-1" id="sonucModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Test Durumu</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p id="durum"></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Çıkış</button>
              <button type="button" class="btn btn-primary">2. Aşamaya Geç</button>
            </div>
          </div>
        </div>
      </div>
    <div class="container" style="height: 100vh;">
        <div class="row" style="height: 100vh;">
            <div class="col-md-12 d-flex justify-content-center" style="height: 400px;">
                <div class="card" style="width: 25rem; margin-top:20vh; ">
                    <div class="card-body" style="text-align: center;">
                        <h5 class="card-title text-primary">Soru</h5>
                        <span class="text-black-50 fs-5" id="soru"></span>
                        <input class="w-100 form-control mt-4" type="text" id="cevap"/>
                        <button class="btn btn-outline-primary mt-4 w-100" id="ok">Tamam</button>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li id="anaCan" class="list-group-item fw-bold">Kalan Can: <span id="can"></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

javascript code:

var turkceCumleler = [
    "Merhaba",
    "İyi Sabahlar",
    "İyi Günler",
    "İyi Akşamlar",
    "İyi Geceler",
    "Tekrar Görüşmek Üzere(Yüz yüze)",
    "Tekrar Görüşmek Üzere(Tel.)",
    "Yakında Görüşürüz",
    "Güle Güle"
    ];
var almancaCumleler = [
    "hallo",
    "guten morgen",
    "guten tag",
    "guten abend",
    "gute nacht",
    "auf wiedersehen",
    "auf wiederhögen",
    "bis bald",
    "tschüss"
]

var sayilar = [];
var healt = 3;

const getQuestion = () =>{

    document.getElementById('can').textContent=healt;
    
    let rastgele = Math.floor(Math.random()*turkceCumleler.length);
  
    if(sayilar.indexOf(rastgele) === -1){
        sayilar.push(rastgele)
        document.getElementById('soru').textContent = turkceCumleler[rastgele];
        document.getElementById('cevap').value = ""
    }else{
        getQuestion();
    }

    if(sayilar.length === turkceCumleler.length){
        //here i want modal to open
    }
       
}

const compareQuestionAnswer = () =>{
    
    if(document.getElementById('cevap').value === ''){
        alert("boş geçilemez")
    }else{
        let deger = almancaCumleler.indexOf(document.getElementById('cevap').value.toLowerCase());
        
        if(deger === -1){
            healt--;
            document.getElementById('can').textContent=healt;
            if(healt === 0){
                document.getElementById('anaCan').style.color='red';
                document.getElementById('ok').disabled = true;
            }
        }else{
            let deger1 = turkceCumleler.indexOf(document.getElementById('soru').textContent);
            
            if(deger === deger1){
                getQuestion();
            }else{
                healt--;
                document.getElementById('can').textContent=healt;
                if(healt === 0){
                    document.getElementById('anaCan').style.color='red';
                    document.getElementById('ok').disabled = true;
                }
            }
        }
    }
    
}

window.onload = getQuestion;
document.getElementById('ok').addEventListener('click',compareQuestionAnswer);
document.getElementById('anaCan').style.color='green';

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return {
            range: new monaco.Range(
                1,
                1,
                model.getLineCount(),
                model.getLineMaxColumn(model.getLineCount())
            ),
            contents: [
                {
                    supportHtml: true,
                    value: '<div style="color red; class="test">yes</div>'
                }
            ]
        };
    }
});

monaco.editor.create(document.getElementById('container'), {
    value: 'nnHover over this text',
    language: 'mySpecialLanguage'
});

I’m trying to provide a HoverProvider for my editor but I can’t seem to render the element with a different foreground or classList, Am I doing something wrong here? It works okay but the style didn’t load / inserted to the hover content. I’m using IMarkdownString