Category: javascript

Category Added in a WPeMatico Campaign

Trying to use file from

Im trying to make an employee card who gets a file from a <input type="file"/> push this file to an array and display it as a “profile picture”.

html:

    <label for="formFileLg" class="form-label"></label>
  <input class="form-control form-control-lg" id="Img" type="file">

Js- push the file in the array:

    function addEmployee() {
  employees.push({
    name: Name.value,
    age: Age.value,
    **img: Img.value**
  })
}

Js- display the file:

 <img src="${employees[i].img}" class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"/>

what do I need to addchange?

getting azure storage pure javascript libraries

I search an easy way to get a compile pure javascript file(s) for working with azure storage (blob/datalake) without npm/node?

I have old/new websites in .net, sample and lib are great for c#, but when you require javascript, it look like you require to work with npm and node.

Daterangepicker not working with webpack encore

I installed daterangepicker and moment in my symfony project with webpack

yarn add moment
yarn add daterangepicker

In webpack.config.js I have the following code:

.addPlugin(new webpack.ProvidePlugin({
    'moment': 'moment',
    'daterangepicker': 'daterangepicker',
}))

But when I import moment and daterangepicker and I try to use the method I get the following error:

daterangepicker is not a function

Is there something I’m missing out? Can you help me make daterangepicker work ?

Why am I unable to serialize a form that I’ve created in a Javascript function

I have to been trying to get serializeArray working for forms that I build when needed inside my main inlineFormFunction call. For whatever reason it does not work, yet it works if I call a real form from inside the function.

serializeArray is not a function 

<a href="javascript:void(0)" 
   onclick="inlineFormFunction.call(this); return false;"
   data-type="POST"
   data-datatype="JSON"
   data-userid="112"
   data-url="/block_user">Block User</a>


function inlineFormFunction() {
    var formData = new FormData();
    var data = $(this).data()
    $.each( data, function(k, v) {
        formData.append(k, v);
    });
    $.ajax({ data: formData.serializeArray(), 
             type: data.type, 
             dataType: data.datatype, 
             url: data.url, 
             processData: false,
             success: function(response) {

             // Do Stuff
             },
             error: function(error) {
                 console.log(error);
             }
    });


 }

but if I create a form and then call that form from the function it works fine.

<a href="javascript:void(0)" 
   onclick="inlineFormFunction.call(this); return false;"
   data-type="POST"
   data-datatype="JSON"
   data-userid="112"
   data-url="/block_user">Block User</a>


<form id="block_user_form" method="POST">
    <input id="userid" name="userid" value="112">
</form>

function inlineFormFunction() {
    var formData = new FormData($('#block_user_form')[0]);
    var data = $(this).data()
    $.ajax({ data: formData.serializeArray(), 
             type: data.type, 
             dataType: data.datatype, 
             url: data.url, 
             processData: false,
             success: function(response) {

             // Do Stuff
             },
             error: function(error) {
                 console.log(error);
             }
    });


 }

thanks –

How can I verify the ‘EmailId’ value in respose body using Frisby API. I want to check as “EmailId”: “[email protected]” in api response body

I want to check as key value pair “EmailId”: “[email protected]” in api response body. Below is my respose of api and I need to check value of EmailID and Recipient name as key value pair. I have verified the status as .expect('json', 'Result.Status', 2) but it is not working for recipient name as .expect('json', 'Result.Recipients.RecipientName', 'Test User'). Currently I am using .expect('bodyContains', '[email protected]') for verifying email id.

JSON: {
            "IsRequestSuccessful": true,
            "Error": null,
            "Result": {
                "Status": 2,
                "CompletedTimestamp": null,
                "Recipients": [
                    {
                        "RecipientId": "28660b54-641d-4fec-9841-721d34c175c7",
                        "RecipientName": "Test User",
                        "EmailId": "[email protected]",
                        "ContactType": 2,
                        "Status": 2,
                    }
                ]
            }
        }

Chrome manifest v3 – How can one safely load external JavaScript files from disk?

Manifest v3 hardened down on what is doable with code execution and remotely hosted code: https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#code-execution

Following scenario: I want to create an extension that allows the user to add additional functionality into the extension by explicitly specifying javascript files on disk and giving permission to those files (for example through HTML5 FileSystem API, file picker, file:// urls, or maybe just a config file). They are not distributed with the main extension.

These files may also contain some UI code written in a UI library like React or Vue, which should get rendered into the main application window somehow. The main window would also pass information about the extension context into those components.

I understand that there is the sandbox that can be used to execute code – https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/

I know how to do these things in normal applications but is what I want to do somehow feasible with v3 and the new restrictions on code execution and external code loading or am I hitting a brick wall here?

How can I solve my problem posting number sign to make a hashtag?

I’m trying to post # sing to make some words turn to hashtags but the code doesn’t work and it’s via API using this code:

true == function()
{
var getMyItem = function (str)
{
if (sessionStorage.getItem(str) == null)
{
setMyItem(str, 0);
return 0;
}
return sessionStorage.getItem(str);
}
var setMyItem = function (key, value)
{
sessionStorage.setItem(key, value);
}

function bot(post)
{
const Http = new XMLHttpRequest();
var Token="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // Token
var ID= "xxxxxx";
var url= 'https://bot.xxx/api/'+Token+'/sendMessage?text='+post+'&chat_id='+ID;
Http.open("GET", url);
Http.send();
}
// you need to change the url variable contents for your own Telegram API or those of the same SN APIs..

So when it comes to call the post like with this code:

var myDate = new Date().toTimeString().replace(/.*(d{2}:d{2}:d{2}).*/, "$1");
var post_n = "%23Hi. It's: " + myDate + "n";
var post = encodeURI(post_n);

if (getMyItem(key + "htr") != "yes")
{
bot(post);
setMyItem((key + "htr"),"yes");
}


return true;
}
}()

, it doesnt support # sign in my browsers including Chrome an Firefox and nothing is sent actually.
So if it were for Telegram, the bot would look like this (and I donno if it works or not but I’m talking about another SN):
var url= ‘https://api.telegram.org/’+Token+’…

Please tell me how to send # code. By the way, “%23” doesn’t work.

How I can calculate the sum of two numbers loaded from another page in jquery?

I want to use jquery and ajax to calculate the sum of 2 numbers for exemple, but every time I try from code, the part of the code that should calculate the numbers doesn’t work, but it works in console if I paste it there. The first part of the code ( the one with extracting the numbers from another page) works even in inspect element if I look, the code is there. But the one that should calculate the sum isn’t. What the best solution for this?

$.ajax({
        success: function () {
            $('body').append('<span class="invisible-total-messages" style= "display: hidden;">*</span>');
            parseInt($('.invisible-total-messages').load('/mesaje .msglist .errorbg').hide());
            var sum = 0;
            $('.invisible-total-messages .errorbg').each(function () {
                sum += parseInt($(this).text());
            });
            if (sum !== 0) {
                $('#menu .new_messages_count').html(sum);
            }
        }      
    });

How to fetch data from API in vuex

I want to use vuex to store some data fetched from the server that my SPA Vue app will need in different pages, this to avoid that a new ajax request is made every time that the user will change product page (it’s an headless ecommerce).

My question is simple, how I can push the fetched data into an array that is defined in my store? How I will get the data in my components? I’m writing the code but not sure if I’ve done it well.

import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
  state: {
    products: []
  },
  mutations: {
    updateProductsData(state, products){
      // not sure how to proceed here
    }
  },
  actions: {
    fetchProducts(){
      const baseURL = 'https://www.example.com/app/index.php/wp-json/shop/v1/products';
      let productsData = [];
      axios.get(baseURL).then( response => {
        response.data.forEach( el => {    
          console.log(el);
          let details = {
            id: el.id,
            slug: el.slug,
            name: el.name,
            price: el.price,
            description: el.description,
            short_description: el.short_description
          }
          productsData.push(details);
        });
        store.commit('updateProductsData', productsData);
      }).catch( e => console.log(e) );
    }
  }
})

In my components where I need to load the data I have this code


export default {
  name: 'Home',
  data(){
    return {
      loaded: false,
      offers: [],      
    }
  },
  created(){

  }, 
  mounted(){
    this.$store.dispatch('fetchProducts').then( res => this.offers.push(res) )   
  },
}

Vue.js – PHP -> How to API call?

My company created callcentre in PHP few years ago and now they need to upgrade it.
I created Vue.js callcentre frontend application and now I need to start connecting it with old PHP. Problem is that I never used PHP before. I mounted my vue app to receive server side events from backend. So whenever someone calls operator from callcentre, it will send event to my vue app. So I can show answer call button but I need to create functionality for it, whenever operator clicks it will answer that call. Same for hang up.
So I created two methods in vue and using axios I am sending post request to php backend.

Code below.

   answerCall(){
      let channelId;
      for(let i in this.getChannels){
          channelId = i
      }
      console.log(channelId);
      axios.post("/hzs/answer", channelId)
          .then(response => console.warn(response))
          .catch(error => {
              this.error = error.message;
              console.log(error);
          });
  },
  hangUpCall(){
      let channelId;
      for(let i in this.getChannels){
          channelId = i
      }
      console.log(channelId);
      axios.post("/hzs/hangup", channelId)
          .then(response => console.warn(response))
          .catch(error => {
              this.error = error.message;
              console.log(error);
          });
     },

As you can see, I am sending channelId. That is just long random string which tells php who is calling. I am recieving it from event.

My problem is with PHP, because I don’t know how to use it correctly. This is what I have for answering call. It is created by me, before it was in huge switch case so I just copied it and pasted in new file, where I send http request. 

<?php
  require_once('/var/www/modules/callcentre/functions.inc.php');
  require_once('/var/www/modules/callcentre/constants.inc.php');
  
  if(!authorized('callcentre_admin') && !authorized('callcentre_supervizor') && !authorized('callcentre_agent'))
         return false;
  
  function call_answer()
  {       
        $channelid = $arg;
        if (!preg_match('/^[0-9a-z/.-]+$/Di', $channelid))
               $channelid='XXX';
        ccSendToDaemon('answer ' . $channelid . ' ' . $uid);
        break;
 }
 
 header('Content-Type: application/json');
 echo json_encode($defaults);
 
 ?>

How can I achieve that after sending POST request to php I can trigger “ccSendToDaemon”?

Hope someone will be able to help me. Thank you for reply.