[Webinar] Streamline your web hosting managementRegister Today

x

JavaScript

120K

Solutions

41K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hi,

I have a javascript code for session storage for a modal pop up done according to Bootstrap 4 documentation, but I guess I am missing something, because it is not working
<script>
	   $(document).ready(function() {
	    $(function() {
         if (typeof Storage != "undefined") {
              if (!localStorage.getItem("done")) {
    
                   setTimeout(function(){
                     $('#exModal1').modal('show');
                     }, 2000);
                     setTimeout(function() {
                      $('#exModal1').modal('hide');
                        }, 20000);
    localStorage.setItem("done", true);
  }
  }
});             
  }); 
 
</script>

Open in new window

0
When I write a program in Perl 6, is it visible to the user, like JavaScript? Or is it compiled into an interim format that is not accessible to the user?

I am considering using Perl for a public facing web page but also for downloadable tool they would run locally.

I hear there is a bin folder, but what exactly goes into this? Is it the .pl file?

Thanks
1
How to modificate next code to get alert message before image browser widow  appears?
 Variable CanEditProject is false.
document.getElementById('imgLoader').addEventListener("change", function(e) {
 if  (CanEditProject == true)
   {
       //alert("CanEditProject");
   }else{
       alert("You have to be logged to perform this operation.");
      return;
   }
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(f) {
        
        var data = f.target.result;
        fabric.Image.fromURL(data, function(img) {
            var oImg = img.set({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                selectable:false,
                id:document.getElementById("selectProjectID").value+"imageID"
            });
             canvas.setBackgroundImage(oImg).renderAll();
         //canvas.add(oImg).sendToBack().renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
});

Open in new window

0
I have a json config file that describes a json data, but I dont know how to use the config to then read the json data itself

-- json config file
{
    "CustomerColumnPOS": 0,
    "ActivityDateColumnPOS": 1,
    "ActivityTimeColumnPOS": 2,  
    "CustomerColumnNm": "CustomerNum",
    "ActivityDateColumnNm": "Activity_Date",
    "ActivityTimeColumnNm": "Activity_Time",                       	
}

Open in new window


-- json data file
var json = {"CustomerNum":"12345","Activity_Date":"1/24/16","Activity_Time":"06:00:00"};

Open in new window


now I have a function that will receive the json data file and use the config file to interpret that json file.
This is where I need the help

// this is to get my config file
    var config = JSON.parse(JSON.minify(fs.readFileSync(__dirname + '/Config.json', 'utf8')));

// this is to copy the json data into my function
    var FunctionData = PassedDataJson;


// pull the data using the config positional columns
	var CustName1 =  // I need to use CustomerColumnPOS in the config file to then pull
					// data value from the FunctionData that relates to the CustomerNum

	var ActDate1 =  // I need to use CustomerColumnPOS in the config file to then pull
					// data value from the FunctionData that relates to the Activity_Date
					
	var ActTime1 =  // I need to use CustomerColumnPOS in the config file to then pull
					// data value from the FunctionData that relates to the CustomerNum					

// pull the data using the config Name columns

Open in new window

0
I have a json and it have a time stamp string
What I need to do is split this string into the hour , min and second componets
Also if the Activity_time has no value something like "Activity_Time":"", how do I add a default values to the time splits

      var json = {"CustomerNum":"12345","Activity_Date":"1/24/16","Activity_Time":"06:00:00"};

      var CustNum =  json.CustomerNum
      
      var datesplit = new Date(json.Activity_Date);
      var ActivityMonth = datesplit.getMonth() + 1;
      var ActivityDay = datesplit.getDate();
      var ActivityYear = datesplit.getFullYear();
      
      // the time is pulled from Activity_time, and has a format of HH24:MI:SS
      
      var ActivityHR   = // ActivityHR  pull from the 1st char up to the 1st :    -- default to 12 to be midday
      var ActivityMIN  = // ActivityMIN pull from the 1st : up to the second : -- default to 00
      var ActivitySEC  = // ActivitySEC pull from the second : up to the end . -- default to 00
0
Next is from header:
 Select project from the list: <select id="selectProjectID" onfocus="onFocusSelectProject()">
                   </select></br></br>

Open in new window

And next is ajax call.
  function getLastOpenedProject(){  //_____________getLastOpenedProject(){ 
  $.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/PgetJson.php',
  data:  {
      "getLastOpenedProject":1,
       "weGotTheuser":weGotTheuser
   datatype: "text",
    success: function(strdate){
         var selectProject3 = document.getElementById("selectProjectID");
      selectProject3.value=strdate;
      alert(strdate);
     }
  }); 
 }

Open in new window


"Alert" gives me right answer from DB.  What is then wrong in my code? I don't get anything in "select " element.
0
My <courses> is not being listed out in my 'app.component.html' file.  The reason is because 'this.courses = service.getCourses();' in my 'courses.component.ts' file return undefined and I'm not sure why.  I am new to Angular and was going through a udemy course.

app.component.html
<h1>Angular</h1>
<courses></courses>

Open in new window

courses.component.ts
import { CoursesService } from './courses.service';
import { Component } from '@angular/core';

@Component({
    selector: 'courses',
    template: `
          <h2>{{Title}}</h2>
          <li *ngFor="let course of courses">
            {{ course }}
          </li>
          `
})

export class CoursesComponent{
    title = "List of courses";
    courses;

    // getTitle(){
    //     return this.title;
    // }

    constructor(){
        let service = new CoursesService();
        console.log("service:"+service.getCourses())
        this.courses = service.getCourses();
    }
}

Open in new window


courses.service.ts
export class CoursesService{
    getCourses(){
        return ["Course1","Course2","Course3"];
    }
}

Open in new window

1
I have a json row that i am trying to process example below
{"CustomerNum":"12345","Activity_Date":"1/24/16"}

so assume this data is passed to my function, I need to pull out the customer number and split the activity date into three other attributes.


function (context, myDataQueRow) {    
..
..
   // get a copy of the data
    var ActvityData = myDataQue;
       
    //looking to place the values of this data into other variables
      var CustNum =  // get the value from Customer Number
      
      // the date is pulled from Activity_date, and has a format of MM / DD / YY
      var ActivityMonth  = // Activity_date pull from the 1st char up to the 1st /
      var ActivityDay  = // Activity_date pull from the 1st / up to the second /
      var ActivityYear = // Activity_date pull from the second / up to the end, also prefix with 20 since need 4 digit year
..
..
..
0
hi,

are there any good free or cheap online training technical course without monthly fees that i have to pay. I am ok to pay some amount and use the course life time rather pay every month. please advise
0
I have the following code :

  ngOnInit() {

    this.data = this.apollo.query({ query: ResidentQuery }).subscribe(({data, loading}) => {
      this.data = data;
      this.loading = loading;
    });

    if (!this.loading) {
      // using this.data
    }
   }
I want data to be loaded before processed themm after the (!this.loading). It is not the case as loading is asynchronous. How I can wait the data is loaded before using them ?

I am making a graphql query using apollo client. ResidentQuery is a string containing the graphql query.

Thank you for your feedbacks !
0
I'm trying to get the bot to continuously scan the page for any instances for the word "Follow" (But also checking that it is not "Following") and then click on all of these instances but with a set delay between each click. Is there any way to do this?
0
This is a map of the united states. I am using area coordinates to make hotspots on the map. When a user clicks the hotspot  I want to load info about that State into the div "myArea" using ajax. I have tried and tried, the Jquery is not binding to the link. Every time i click the area link it goes to the page instead of loading the page in the div with ajax.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAP</title>
<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>




<script>
$(function() {
		$('.map').maphilight();
	});
		
</script>	


</head>

<body>


<img class='map' src="SitePad_Test.jpg" alt="" width="3840" height="2160" usemap="#Map"/>
<map name="Map">
  <area class="link" shape="poly" coords="1017,389,840,225,840,170,838,100,1071,101,1071,332" href="gpio.php?psh1" alt="build_1"  onclick="play()">
  <area class="link" shape="poly" coords="1057,427,1244,227,1247,104,1414,107,1411,204,1460,254,1184,558" href="gpio.php?psh2" alt="blding_2"  onclick="play()">
  <area class="link" shape="poly" coords="1076,596,927,733,824,638,835,354,1037,545" href="gpio.php?psh3" alt="building_3"  onclick="play()">
  <area class="link" shape="poly" coords="1677,379,1544,253,1546,86,1712,91,1713,176,1793,258" href="gpio.php?psh4" alt="building_4"  onclick="play()">
</map>
	

Open in new window

0
I am building this buttong to be rendered on the fly.

I need to provide a confirmation before delete.

Since I am building this on the fly ..not sure.

Please help.

   contact.Delete = "<button id=\"btnDelete\"  class=\"btn btn-danger btn-xs actionButton\"";
  contact.Delete += "onclick=\"javascript:Delete('" + contact.clientxcontactId + "')\";>DELETE</button>";

Open in new window

0
I use the google maps plugin in a Joomla article since 3 years
It worked fine
Now you get this message when the special tag displays the map (the map just flashes for a second then the error comes) :
Google Maps ne s'est pas chargé correctement sur cette page. Pour plus d'informations techniques sur cette erreur, veuillez consulter la console JavaScript. (site www.cbwsl.be => Accès)
Error is : "Google Maps ne s'est pas chargé correctement sur cette page. Pour plus d'informations techniques sur cette erreur, veuillez consulter la console JavaScript."
Where can I find that Joomla console Javascript to guess what is now happening ?
Thanks
0
hello

I would like to know how to disable div based on order id status
0
Hello,

I have a website where a list of orders, an initial order status is "Pending Validation" then it changes when admin approves it.

When you click on an order, it will take you to the order information such as Shipping Address, of course the seller will not ship yet if the status isn't change, but I would like to make it more professional to not let them click until that status change

I would like to disable the click on order when its status is in "Pending Validation" with JS



Take a look at screenshot
C1.JPG
0
Here's the code:

<!DOCTYPE html>
<html lang=en><head>
<title>Get Checks and ADD</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<style>
body{background:#fed;}

#avail1 {
font-family: serif;
width: 48em;
padding: 5px;
border: 1px dotted #00b;
}

#avail1 input {
background: #99d;
margin-right:25px;
margin-bottom: 38px;
vertical-align: top;
}

#avail1 span {
display: inline-block;
width: 33em;
vertical-align: top;
}

#avail1 button {
margin: 7px 42px;
vertical-align: top;
}

#ordered {
margin-top:3px;
width: 48em;
padding: 5px;
border: 1px dotted #b00;
}
</style>
</head>
<body>
<h3>Get Checks and ADD</h3>
Order Online by Checking the Article below<br />
$10.00 per Article or $25.00 for Three, or $60.00 for all Nine Articles.
<p id="avail1">
<input type="checkbox" /><span>1 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>2 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>3 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" /><span>4 Developmental Article Fill More Fill More Fill More Fill More Fill More Fill More Fill More - Vol 5 Number 2, pages 3-7</span><br />
<input type="checkbox" 

Open in new window

0
Please find my code below:

<div class="tabbable">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#tab1" data-toggle="tab">Investment Planner</a></li>
    <li><a href="#tab2" data-toggle="tab">Take the Portfolio Challenge</a></li>
    <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Portfolio Manager</a>
      <ul class="dropdown-menu">
        <li><a href="#tab3" data-toggle="tab">Create a new e-Portfolio</a></li>
        <li><a href="#tab4" data-toggle="tab">Link e-Portfolio</a></li>
        <li><a href="#tab5" data-toggle="tab">Manage my e-Portfolios</a></li>
        <li><a href="#tab6" data-toggle="tab">Buy/Sell Shares</a></li> 
      </ul>
    </li>
    <li><a href="#tab7" data-toggle="tab">Find a Stockbroker</a></li>
    <li><a href="#tab8" data-toggle="tab">Browse Investment Strategies</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Placeholder 1</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Placeholder 2</p>
    </div>
    <div class="tab-pane" id="tab3">
      <p>Placeholder 3</p>
    </div>
    <div class="tab-pane" id="tab4">
      <p>Placeholder 0</p>
    </div>
    <div class="tab-pane" id="tab5">
      <p>Placeholder text</p>
    </div>
    <div class="tab-pane" id="tab6">
      <p>Placeholder help</p>
    </div>
    <div class="tab-pane" id="tab7">
      <p>Placeholder help</p>
    </div>
    <div class="tab-pane" id="tab8">
      

Open in new window

0
I need to allow users to upload their financial reports (PDF or CSV) to my site, but enable them to obscure private data (Business Name, Merchant Account Numbers, etc.) before any data gets stored to the disk.

I need to use Angular to create a list of user data fields extracted from the PDF and display them for approval, perhaps with a checkbox next to each field. Fields which contain that merchants proprietary data need to be then be checked off by the user so those fields would be populated with XXXXX's.

I do not want to store that PDF onto my server. Instead, I want the user to select the fields needing to be hidden. Or even ignore them altogether. I just do not want that PDF on my server.

So, the question is...

Can Angular extract the contents of a PDF that has been uploaded? And a PDF that does not exist on disk?

I could save the extracted data onto my server in some other fashion, not yet decided.

I prefer Angular 4, and hope this functionality exists in Angular 4.

It's an interesting challenge. I see Angular as a great platform for nested logic and as a place to store objects and lists of objects. And to do the first part of processing this data on the client is what intrigues me.

Thanks.
0
I have a form containing a dynamic dropdown list, where the last dropdown list will contain a MS Office document (i.e. MS Word, MS Excel, etc.). I've tried various ways to have the user click the 'Submit' button and the document opens/displays, however I'm unable to figure out how to display/open the document. Any help is appreciated.

 <form class="form form-horizontal">
      <div class="form-group">
      <label for="company" class="col-sm-2 control-label">Company</label>
      <div class="col-sm-10">
      <select id="company" name="company" class="form-control linked-
      dropdown" data-linked="make">
      <option value="">-- Select Product --</option>
      <option value="1">Product1</option>
      <option value="2">Product2</option>
      <option value="3">Product3</option>
      </select>
      </div>
      </div>
      <div class="form-group">
      <label for="make" class="col-sm-2 control-label">Make</label>
      <div class="col-sm-10">
      <select id="make" name="make" class="form-control linked-dropdown"
      data-linked="model"></select>
      </div>
      </div>
      <div class="form-group">
      <label for="model" class="col-sm-2 control-label">Model</label>
      <div class="col-sm-10">
      <select id="model" name="model" class="form-control"></select>
      </div>
      </div>
      </form>
      <script src="http://code.jquery.com/jquery.js"></script>
      <script …
0
Hi:

I have to add remove input fields dynamically in angularJS. I am including a working Javascript implementation below:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.sanwebe.com/wp-content/cache/minify/e907d.js"></script>
<script>
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });
});
</script>
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

</body>
</html>

Open in new window

I need the same things in angularJS to start with. This implementation is Javascript and uses a Javascript library. This is essentially https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery
this example.

A working example of same thing in angularJS would be great.

Best Regards

Sunnybrad
1
Take a look at this screenshot...

screenshot
What I need to do is create a script that goes through all of the checked articles and write the titles of those checked articles into a div and then go back and see how many articles were selected and apply the appropriate discount.

I've seen this done.

What I'm envisioning is a button at the bottom that "totals" all of the checkboxes with a for loop and looks to see which ones have been checked. But after that, I'm lost. How do I create an array or some sort of dynamic that can be appended and then make a calculation based on that appended list?

JQuery or Javascript....

Thanks so much!
0
HI. I am following though example exercise in a javascript book but have received an error using physijs. I get the error "physijs.scene is not a valid constructor" can anyone tell me what is wrong with my code please?

********************CODE*********************************************

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/scoreboard.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
//Physics settings
Physijs.scripts.ammo ='http://gamingJS.com/ammo.js';
Physijs.scripts.worker='http://gamingJS.com/physijs_worker.js';

  // This is where stuff in our game will happen:
  //var scene = new THREE.Scene();
  var scene =new Physijs.scene({ fixedTimeStep: 2/60 });
  scene.setGravity(new THREE.vector3( 0, -100, 0 ));
  

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 200;
  camera.position.y = 100;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********

Open in new window



*************************ENd CODE SO FAR***********************************************************
0
Hi all,

I am using JeasyUI datagrid:
https://www.jeasyui.com/documentation/datagrid.php

I've managed to load and update data without problems.

The issue I have is related to an inputbox where the user can select a date from a calendar.
Once that date is selected I run this code:

$( document ).ready(function() {
    alert('Page reloaded');
    $('#datalav1').val( sessionStorage.getItem("selectedDate") );
    
});

function loadGrid(date_selected) {

        $('#dg').datagrid({
        url:'get_data.php?date='+date_selected,
        method: 'get',
        columns:[[
            {field:'IdentificativoWR',title:'Work request',width:89,align:'Center'},
            {field:'TECNICO1',title:'Tecnico',width:100,align:'Center'},
            {field:'NOTA',title:'Appuntamento',width:1900,align:'left'}
        ]]
    });
    $('#dg').datagrid('reload');
}

$('#datalav1').change(function(){
    var inputDate = new Date(this.value);
    var date_selected = inputDate.format("mm-dd-yyyy");
    sessionStorage.setItem("selectedDate",date_selected);
    loadGrid(date_selected);
});

Open in new window


What seems to happen is that the document is fully reloaded when the user changes #datalav1.
What I see is that the alert with 'Page reloaded' appears correctly but the datalav1 value change happens briefly and then gets deleted.
Imho this happens because the datagrid reload function does something that is not complete yet when the document is declared as ready.

How can I change the value when all the changes in the page are complete?
Is there any other state than document ready?

Thanks for your time and patience.
0
I am a beginner to react. While setting up the installation and loading up all the dependencies, I finally run the
 npm start

Open in new window

command but this generates the error ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C:\Users\me\Documents\React\react-playlist' I have performed all the installation steps correctly. I have also attached the screenshot of the project folder. I also got webpack installed globally v 3.10.0 but that also didn't work. I also tried by inserting resolve loaders code in package.json file but that also didn't work. Here is the error picture.

P.S.: I'm following this tutorial

Below is the code of my project.

Package.json file:

{
  "name": "react-playlist",
  "version": "1.0.0",
  "description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": 

Open in new window

0

JavaScript

120K

Solutions

41K

Contributors

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

Vendor Experts

Gil FeldmanMonday Learn more about Monday