JavaScript

122K

Solutions

109

Content

i
The collection of articles, videos, and posts on this topic.

42K

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

How do I determine if a script is a manifest script?  I need to list them all for a specific web app. I can obviously filter ".json" files  but how will I know if it is a manifest script?

Thanks!
0
6 Comments
OWASP: Avoiding Hacker Tricks
LVL 12
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

Start Today!
Hi

In  my ASP.net web app I am using the following Javascript code to redirect users on mobile devices to another page.
On a different page I want to hide a Menu bar called "Menu1" and show a hyperlink called "Link1"

How would I do that?

<head runat="server">

    <script type="text/javascript">
    <!--
    if (screen.width <= 699) {
    document.location = "http://steel1.azurewebsites.net/Mobile_OffersByMe";
    }
    //-->
    </script> 

</head>

Open in new window
1
4 Comments
I have an aspx web form that I want to open with the browser maximized.  To do so I have found this code in a search here at EE.  The post says "Just insert it in your aspx code".  Can anyone tell me where exactly to insert it?

Here is the javascript to insert:
<script language="JavaScript1.2"> 
top.window.moveTo(0,0); 
if (document.all) 
   { top.window.resizeTo(screen.availWidth,screen.availHeight); } 
else if 
   (document.layers || document.getElementById) 
   { 
   if 
    (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth)
     { top.window.outerHeight = top.screen.availHeight; 
       top.window.outerWidth = top.screen.availWidth; } 
   } 
</script>

Open in new window

Here is my code for default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="LineStatus.LineStatus" %>

<!DOCTYPE html>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>"Production Line Status"</title>
    <meta http-equiv="refresh" content="30">
</head>
<body>
    <form id="form1" runat="server">
       
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="100%" Width="100%" Font-Size="X-Large" Font-Names="Calibri" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="2" ForeColor="Black" HorizontalAlign="Center" OnRowCreated="GridView1_RowCreated"

Open in new window

…
0
4 Comments
I have this code in a loop ie: each delete button and csrf token shows as many times as there are database records:

<div class="buttons-to-right">
<a href="edit-listing/<%= products._id %>" class="button gray edit"><i class="sl sl-icon-note"></i> Edit</a>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<a href="#" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>
</div>

Open in new window


I want to get the value of the csrf token that is in the same vicinity as the button that was clicked.

document.body.addEventListener("click", e => {
  if (!e.target.matches(".delete")) return;
  e.preventDefault();

  const deleteBtn = e.target;
  const csrf = document.querySelector("[name=_csrf").value;
  const productId = deleteBtn.dataset.id;

  console.log(csrf);

});

Open in new window


I tried using 'closest' but that was an epic fail.

  
 const deleteBtn = e.target;
  const csrf = deleteBtn.closest("[name=_csrf]").value;

Open in new window
1
10 Comments
I'd like to remove quotation marks from the "username" field before it is submitted.
Can this be done with JavaScript ?
0
6 Comments
I am trying out some Javascript and i cant get this code to work quite the way i want.

I am comparinga password and confirmpassword field. oninput, if the passwords dont match i want to display the Passwords do not match element. Oninput when the passwords DO match i want to hide that input and display the Passwords match element.

So far i can get the Passwords do not match element to work properly, but my fields (even when pw are the same) wont show Passwords Match element.

What am i doing wrong?

<!DOCTYPE html>
<html>
<body>

<input type="password" id="password" oninput="myFunction()">
<input type="password" id="confirmPassword" >
<p id="alert" style="display:none;"> Passwords do not match <p>
<p  id="success" style="display:none;"> Passwords Match <p>



<script>
function myFunction() {

if(document.getElementById("password").value != document.getElementById("confirmPassword").value){

document.getElementById("alert").style.display = "block";
document.getElementById("success").style.display = "none";

} else {
document.getElementById("alert").style.display = "none";
document.getElementById("success").style.display = "block";

}
 
}  




</script>

</body>
</html>

Open in new window
0
3 Comments
https://www.magickitchen.com/weight-loss-meal-delivery/  when I scroll, there's a white space. Another question here showed me it's from the js code that hides the top navigation on scroll. What I need to do is find out what div gives that white background, and change the color.

See earlier question:  https://www.experts-exchange.com/questions/29132073/White-space-on-scroll.html?headerLink=workspace_answered_questions

The top navigation used to be white, so this wasn't a problem. It's still not a huge issue, but I'd like to color that white. Thanks.
0
4 Comments
I have this piece of code where i am trying to validate the jquery based Date of Birth Validation.

is there any JS function which also checks the full date if it falls in a leap year or not, i am trying this but it does seems to be working

function isValidDate(s) {
  var bits = s.split('/');
  var d = new Date(bits[2] + '/' + bits[1] + '/' + bits[0]);
  return !!(d && (d.getMonth() + 1) == bits[1] && d.getDate() == Number(bits[0]));
}

Open in new window


date i tested is: 02/29/1920 - it is giving false (edited)

testing it like this:

    function init_inputOnKeyUp(){
        $('select[name="day"],select[name="year"]').off('change');
        $('select[name="month"],select[name="day"],select[name="year"]').on('change', function(e) {
        if (type == 'select') {
            var newdate = $('select[name="month"]').val() + '/' + $('select[name="day"]').val() + '/' + $('select[name="year"]').val();
                        var results = isValidDate(newdate.toString());
                        console.log(results);
                        console.log(newdate.toString());
        }
        });
}

Open in new window


problem i can't use any extra library like moment.js

the error is it is always giving me false when i try to validate with a full date

i am not sure at this point, if the error is happening on leap year or onchange issue
1
14 Comments 
getDeals();

    setTimeout(function () {
        timelineController();
    }, 300);

    createDefaultProps();
    loadSocialData();
  
    
    loadLeadData();

    loadActData();
    getJr();
    getJrTimeline();

Open in new window


here is my list of functions which each has a ajax function, how do i tell these functions to wait until ajax is complete ? and run in order
1
3 Comments
Dear Experts,
I have found a code on web that rotate an images, which is perfect.
However, this code works perfectly fine with only one image, but when I want to use it with more than one image it only works for the first image,
I want to rotate an image when I click it.

How can I do that to work with all images on my page?
Thank you

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#image {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}
#image.rotate90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}
#image.rotate180 {
    transform: rotate(180deg) translate(-100%,-100%);
    -webkit-transform: rotate(180deg) translate(-100%,-100%);
    -ms-transform: rotate(180deg) translateX(-100%,-100%);
}
#image.rotate270 {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);
}
</style>

</head>

<body>

<a href=# id="button"><img src="..../img/logo-tr7.fw.png" id="image" />
</a>
<br>

<a href=# id="button">
<img src="https://..../img/logo-tr6.fw.png" id="image" />
</a>

<script>
var angle = 0, img = document.getElementById('image');
document.getElementById('button').onclick = function() {
    angle = (angle+90)%360;
    img.className

Open in new window

…
1
5 Comments
Big Business Goals? Which KPIs Will Help You
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Get the Guide
Quick overview of JSON tokens

please provide me a few sentences to explain JSON tokens. I have worked with JSON on various full stack positions, and wonder how JSON tokens fit in.

Thanks
0
4 Comments
I'm trying to get a client side javascript reference to a RadWindow opened by a call to radopen().

Example:

function OpenAWin() {
    var oWnd = radopen(null, "myWindow", width, height);
}

How do I get a reference to "myWindow" later on the client side? I do not want a global variable as I may need to open several windows on the same browser.
And I can't use a server-side instantiation of the window either.

Thanks!

-David
1
1 Comment
Hi, please see https://www.magickitchen.com/weight-loss-meal-delivery/.  On scroll in desktop view, there's a white space that appears between the photo and the header, and I can't figure out where it comes from or how to fix it. Can anyone help? Thanks!! (I see it on two browsers, my desktop resolution is 1600x900)

Untitled-1.jpg
0
19 Comments
I have a javascript button at https://www.theherbsplace.com/rebate-program/ it is found at the bottom of the page.

Here is the code 
<script>
document.getElementById("order_comments").innerHTML = "I want membership";
</script>

Open in new window


<p><a class="button exclusive biz-op-button" title="I Want Membership!" href="#" data-register="true">Get My Membership</a></p>
<p class="form-row notes" id="order_comments" data-priority="">
    <label for="order_comments" class="">Order notes&nbsp;<span class="optional">(optional)</span></label>
    <span class="woocommerce-input-wrapper">
        <textarea name="order_comments" class="input-text " id="order_comments" placeholder="Notes about your order, e.g. special notes for delivery." rows="2" cols="5"></textarea>
    </span>
</p>

Open in new window


The button works fine but I need it to change colors and text on click.  This is so the customer will know their request has been logged.

I am not very strong in javascript.  I see on the net some examples but I don't know enough to fold them into what I already have working.

Thanks,
0
6 Comments
Hello everybody,

I have a bunch of AJAX scripts that fetch and give data from and to PHP but the one I'm trying to make, I have no idea how to do it or which is the best way to do it. Here's the scenario:

  1. User selects 1st option form combo box and second combo box gets filled (AJAX)
  2. User selects 2nd option from second combo box and a table with check boxes appears at the bottom (AJAX)
  3. User selects/un-selects options (check boxes), hit SAVE and it supposedly saves the changes into the DB using AJAX and PHP

The problem is that the table rows with its check boxes are generated dynamically. Normally I would iterate through all the check boxes creating variables which would be passed as POST to a PHP function in another page using AJAX but, since in this case the check boxes are created dynamically I can't do that as I don't know the number of variables (check boxes) I will have to deal with or their IDs.

I've made a function in jQuery to fetch all check boxes generated in PHP and sent to the page and got this:

<input type=​"checkbox" data-render=​"switchery" id=​"author-11" name=​"author-11" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-12" name=​"author-12" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-13" name=​"author-13" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery"

Open in new window

…
0
3 Comments
Compare KendoUI w/ Angular 4?

I have used Angular 4 but not KendoUI.

please describe what KendoUI is  and how its different from Angular 4.

Thanks
0
3 Comments
I know this question is asked a lot so please don't downvote or mark as duplicate. I have looked on google and on stack overflow but most answers talk about using passport which I am not using and a lot of the questions I looked at are for php.

I have a login button on a product detail page. If a user clicks on it they are redirected to the login page and after login I want to send them back to the product detail page.

In my starting point (app.js) I am setting a session variable for what I think is the referrer. (Should be like php $_SERVER['REQUEST_URI')

app.use((req, res, next) => {
    req.session.lastPageOn = req.get('Referrer');
    next();
});

Open in new window


In my login script I have:

if (req.session.lastPageOn) {
    res.redirect(req.session.lastPageOn)
} else {
    res.redirect('account/dashboard');
}

Open in new window


But every time I login in I get redirected to the login page as that was the last page I was on before logging in! So, it doesn't seem like req.get('Referrer'); is the right thing to use or my implementation is incorrect.
0
8 Comments
Dear Experts,
I'd like to give a link to on Google map pop up,
I want to give the link but it shows it as plain text,

the code is below,
what do you suggest I should do to get link working?

            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
             text.textContent = address + ' <a href="https://www.mylink.com">Bayi:</a> ' + type ;
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
             …
1
5 Comments
Hi Web Layout Experts,

I'm trying to change a roster webpage from being an HTML table to something responsive so site visitors can easily read it on different devices, without having to zoom a lot (as they currently do with the table).

Attached is a spreadsheet (which I've used as a convenient way to mock up the design) and PDF of the same, which has a single sheet with 3 sections showing:
1.  The current (non-responsive) layout using the HTML table.  Each record/date/event is a row.
2.  A possible responsive alternative layout of the same data in a wide browser.  Each record/date/event is a column.
3.  The same data in the same responsive design in a narrow browser.  Each record/date/event is a column.

(Note that the people's names will be in dropdowns, if that makes any difference.)

I've used the CSS @media tag (but I'm a newbie to it) once before, to automatically force data into less columns on narrow browsers, e.g.:
    @media screen and (max-width: 600px)
    {
        .column
        {
            width: 100%;
            padding: 0;
        }
    }

However, in this case I'm thinking I might have to have row headings (e.g. "Date/Time") at the left of every row of data, as can be seen in cases 2 & 3 of the attachments, but I don't see how a @media tag is going to repeat those row headings so that I get one at the beginning of each row regardless of the number of columns of data to the right.
(I guess I could put row headings to …
0
15 Comments
Learn SQL Server Core 2016
LVL 12
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Learn More!
Hi experts,

I want to iterate reactjs function for object (metadata) for 5 times

The javascript object values are in the below console.log image

console.png
Please see the code I have 

 console.log(metaKeyValues, '-  metadata ');

    var listMetadata = Object.entries(metaKeyValues).map(([key,value])=>{
         return (
           <div style={{display:"block",width:800}}>
                <div className="row">
                     <span style={{display:'inline-block',minWidth:100,padding:5}}> {key} </span>
                     <span style={{display:'inline-block',minWidth:400,padding:10}}> {value} </span>
                </div>
           </div>
         )});

Open in new window


I want to iterate this, for 5 times.  Something like this,  but it is not working.

 var index = 0;
 var testListMetadata = Object.entries(metaKeyValues).map((([key,value]),index)=>{
         return(
             if(index < 5) {
             <div style={{display:"block",width:800}}>
                  <div className="row">
                       <span style={{display:'inline-block',minWidth:100,padding:5}}> {key} </span>
                       <span style={{display:'inline-block',minWidth:400,padding:10}}> {value} </span>
                  </div>
             </div>
             index ++;
          })
    });

Open in new window


Please help me in resolving this issue.

with Many thanks,

Bharath AK
0
8 Comments
I have a database using child rows at datatables.net  The data that I want to display in the "Parent" row actually needs to be grouped.  I'm thinking there should be a way to incorporate
rowGroup and row.child.

My Controller returns a list that has data like this:  I can have multiple Name rows that are the same Name but have a different Order # and Order Detailed information.

Name, Address, City, State, Zip, Order #, Order Description, Order Part #, more Order fields...
Name, Address, City, State, Zip, Order #, Order Description, Order Part #, more Order fields...

My JavaScript looks like this:
/* Formatting function for row details */
function format(d) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Order #: ' + d.OrderNo + '</td>' +
        '<td>Description: ' + d.OrderDescription + '</td>' +
        '<td>Part #: ' + d.PartNo + '</td>' +
        '</tr>' +   
        '</table>';
}

function loadDataTable(data) {
    var table = $('#List').DataTable({
        "data": data,
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "defaultContent": ''
            },
            { "data": "Name" },
            { "data": "Address" },
            { "data": "City" },
            { "data": "State" },
            { "data": "Zip" },

        ],
        "order": [[1, 'asc']]
    });

    $('#List

Open in new window

…
0
2 Comments
Need interactive website for web GUI design

I hope there are a few drag and drop types of easy GUI configuration test sites, where I can download the HTML, CSS and even the Javascript.

If I need to limit myself to just the HTML and CSS, that is fine.

Can you give me some samples of this type of website?

Thanks
0
8 Comments
I have a problem where a record is updating in the database even when validation fails which should obviously not happen. I suspect it is the way I have structured my then() and catch() blocks but I'm not 100% sure.

exports.postEditListing = (req, res, next) => {
    const updatedTitle = req.body.title;
    const updatedDescription = req.body.description;
    const updatedCategory = req.body.category;
    const image = req.file;
    const productId = req.body.productId;
    const updatedSlugTitle = slugify(updatedTitle, {
        lower: true,
        remove: /[*+~.()'"!:@]/g
    });
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
        Category.find({ catName: { $ne: updatedCategory } })
        .then(cats =>{
            return res.status(422).render('account/edit-listing', {
                pageTitle: 'Edit Listing',
                path: '/account/edit-listing',
                product: {
                    title: updatedTitle,
                    _id: productId,
                    category: updatedCategory,
                    description: updatedDescription
                },
                errorMessage: errors.array(),
                successMessage: null,
                pendingCount: req.pending,
                approveCount: req.approved,
                rejectCount: req.rejected,
                userId: req.user._id,
                cats: cats
            });
        })

    }
    Product.findById(productId)
        .then(product

Open in new window

…
0
8 Comments
I am trying to count database records in mongoDB (using mongoose) where records have a status of pending and approved as well as rejected. So, I am basically trying to get a result where I can show a count of each and display it in my view ie:

Pending: 35
 Approved: 97
 Rejected: 12

And I want to hold these in variables that I can use in different places ie:

const pending = ....
const approved = ....
const rejected = .....

I have tried to use the aggregate function and run a loop which gets me all the data I need but I don't know how to actually get the data into the three variables like above.

    Product.aggregate([
        { $group: { _id: { status: "$status" }, totalStatus: { $sum: 1 } } }

    ])

Open in new window


The above code gives me back this (I have no rejected values yet)

[
    {
        _id: {
            status: 'pending'
        },
        totalStatus: 15
    },
    {
        _id: {
            status: 'approved'
        },
        totalStatus: 27
    }
  ]

Open in new window


I then ran a loop and restructured the data:

        .then(status => {
            for (const current of status) {
                const [status, total] = [current._id.status, current.totalStatus];
                console.log(status + ': ' + total);
            }
            next();
        })

Open in new window


That gives me:

pending: 15
approved: 27

But it still isn't what I actually want. I need to get those values into their own variables. How can I do that?
1
8 Comments
I'm running in to some difficulty loading an HTML file into a DIV using JQuery 3.x's load() method:

http://api.jquery.com/load/

Although I am successfully able to load and display the HTML file, .. I am getting JavaScript errors, which I'd like to eliminate/suppress.

I have this very simple JS function to trigger the loading of the HTML file:

function loadGoogleMapView(pageurl) {
	$("#myMap").load(pageurl);
}

Open in new window


.. and then I am calling the method by passing the HTML filename to it:

<a href="#" onclick="loadGoogleMapView('map-view.html');">View Map</a>

Open in new window


The contents of the HTML file that I'm trying to load is as follows (note that I have deliberately stripped out my Google Maps API key).

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style>
	#mapView { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>	

</head>

<body>

<div id="mapView"></div>

<script>
function initMap() {
	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916
	};
	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 41.939670,
		long: -87.655167
	};

Open in new window

…
0
6 Comments

JavaScript

122K

Solutions

109

Content

i
The collection of articles, videos, and posts on this topic.

42K

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.