[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

JavaScript

121K

Solutions

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

<?php

//index1.php

?>
<!DOCTYPE html>
<html>
 <head>
  <title>Import CSV File into Jquery Datatables using PHP Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>  
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  .box
  {
   max-width:600px;
   width:100%;
   margin: 0 auto;;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Mark distribution Sheet</h3>
   <br />
   <form id="upload_csv" method="post" enctype="multipart/form-data">
    <div class="col-md-3">
     <br />
     <label>Add More Data</label>
    </div>  
                <div class="col-md-4">  
                   <input type="file" name="csv_file" id="csv_file" accept=".csv" style="margin-top:15px;" />
                </div>  
                <div class="col-md-5">  
                    <input type="submit" name="upload" id="upload" value="Upload" style="margin-top:10px;" class="btn btn-info" />
                </div>  
                <div …
0
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Hi Experts,

Bootstrap row is not working in my react application.  Please see the screenshot for reference.

I want two columns in a single row but each column is in each row.  Please help me in resolving this issue.

row not working
What I need is col-md-8 and col-md-4 in a single row not one below the other.

Please help me in resolving this issue.

With Many thanks,

Bharath AK
0
in JavaScript assign values of one object to the properties of another object

emp =  {
id :"",
name : "",
designation : ""
}

empValues = [ 
        [
           1,
            'scott',
            'manager'
         ],
         [
           2,
            'steve',
            'Director'

         ] 
,
         [
           3,
            'charlie',
            'developer'
         ]
]

Open in new window


And i i want to get the output as below after mapping properties of 'emp' object with 'empValues' object

[
  
    {
    id : 1,
    name : 'scott',
    designation : 'manager'
    },
    
    {
    id : 2,
    name : 'steve',
    designation : 'Director'

      },
      
    {
    id : 3,
    name : 'charlie',
    designation : 'developer'
      
    } 
]

Open in new window


i tried in the following way but no luck

empValues.forEach(function(value,index){
  
  empValues[index].forEach(function(value,i){
    Object.keys(emp)[i] = value ;
  });
  
});

Open in new window


is there an easier way for mapping 2 javascript objects that are in different forms?
1
I want the code to look beautiful but have Bugphobia .
Let me explain my fear:I am afraid to add wired spaces to break my code I want a convention to help me make it look nice without breaking it.
this is  post request of the real code where I changed the secret fields to pseudo fields .
look how beautiful the JavaScript looks like but it's deceiving as i am going to transform all VALUES into variables later (json does not like variables).
Here is the javascript (which looks good ):

var data = JSON.stringify({
  "fields": {
    "horse_colour": "brown",
    "birth_date": "2011",
    "sire_name": "sire name",
    "dam_name": "dam name"
  }
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://breeding-portal.mystagingwebsite.com/wp-json/acf/v3/listings/726");
xhr.setRequestHeader("authorization", "Basic bG93ZXNhbGV4QGdtYWlsLmNvbTpNYXJ0eW1jZmx5MTIz");
xhr.setRequestHeader("content-type", "application/json");

xhr.send(data);

Open in new window


This is a working C# code using RESTSHARP (which I am looking for a pretty way to organise it READY FOR VARIABLES.(the values).

var client = new RestClient("https://breeding-portal.mystagingwebsite.com/wp-json/acf/v3/listings/726");
var request = new RestRequest(Method.POST);
request.AddHeader("authorization", "Basic bG93ZXNhbGV4QGdtYWlsLmNvbTpNYXJ0eW1jZmx5MTIz");
request.AddHeader("content-type", "application/json");
request.AddParameter("application/json", "\t{\n  \"fields\": {\n\t\t\"horse_colour\":\"brown\",\n\t\t\"birth_date\":\"2011\",\n\t\t\"sire_name\":\"sire name\",\n\t\t\"dam_name\":\"dam name\"\n  }\n}\n", ParameterType.RequestBody);
IRestResponse response = client.Execute(request); 

Open in new window

0
What would be the Javascript regex to only allow sub-domains of:
  • we.abc.com
  • wesource.abc.com
  • we-uat.abc.com
  • we-qa.abc.com

Thanks!
0
I saw this example
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange2

When you run it, it looks like this. So the textbox has the value Hello.

p1.PNG
Now I type the word World in the textbox and click outside the textbox which fires the onchange event like this.

p2.PNG

Is there a way to store the existing value of the textbox in a hidden field and also store the new text i typed in the textbox in a hidden field also, but separately.

So when I run the above example and then type World.

I want to store the existing value which is "Hello" in a hidden field called HiddenField1
and the new text that I typed in the textbox which is "World" in a hidden field called HiddenField2

What's the best way to do that?
1
I am using jquery datatable, with a checkbox to select 1 for each row.

as the person clicks through the checkboxes I need to calculate how much money the items will cost based on which boxes are checked.

Right now, it's only calculating the visible rows.

Is there any API that I can use to get which checkboxes are clicked off?

if I try to use something like oTable.rows().every( ), it is displaying the text as it was when the table was written before it gets checked.
0
I'm looking to replicate this same type of popup Google Maps functionality on a website that I'm developing (complete with different locations plotted on the map, each with some kind of popup preview -- plus the zoom functionality, .. search fields and filters, etc):

https://www.tripadvisor.com/Attractions-g34227-Activities-Fort_Lauderdale_Broward_County_Florida.html#MAPVIEW

Aside from the basic Google Maps API documentation .. can anyone here recommend some good tutorials or code examples that will help me get started with all of this?  I suspect that I've got quite a bit of work ahead of me, and I'm thinking that using some kind of boilerplate might be in order.  Please advise.

Thanks,
- Yvan
0
hi,

I want to create a simple series of thumbnail images that when clicked turn opaque, or clear (toggle on/off opacity when clicked)

Ideally I'd like to overlay text on the images, so I expect SVG is good for that, but may make the above harder.

Can anyone give some example code or point me to an example I can drill into?

This is for a simple visual shopping list.

Thanks
0
I am just getting started with Angular (https://angular.io).

What I notice is every time I create a new project using the ng new myproject  (e.g. ng new angular-tour-of-heroes), it creates a (nodes_module) directory with like over 20,000 files.

I understand that in some cases you can set different settings that don't require all of the same nodes so that would create a different set of files for nodes_module.

But if I have multiple projects that all will use the same basic set of files, is there a way to share the nodes_module?

It seems that if I'm working on ten different projects at once that's an awful lot of files and disk space that is identical...

Is there a space saving option?

Also, if this is the best way to do this, is there a best practice for how to archive old projects.  In other words, if I have a project that I work on and turn over to a client, I no longer need it on my drive taking space. But if I want to save it in case the client wants me to replicate it again... is it okay just to save the src files or do I need to save the whole thing including the 24K+ nodes_miles?

Thanks.
0
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.

Hello Experts,

Does anyone know how to open a openDialogView maximized?  I know how to accomplish this using window.open; however, I am stuck using opemDialogView and cannot find anything  on this.

Thank you

<li><a href='#' data-role="hint" data-hint="All Open Items." data-hint-position="right" data-hint-background="bg-orange" data-hint-color="fg-white" onclick="javascript:openDialogView('https://honeywellprod.sharepoint.com/teams/PMTProcurementMaterialsEscalationPortal/Lists/PMTMaterialsEscalationTracker/All%20Open%20Items.aspx');">All Open Items</a></li>

Open in new window

0
Javascript routine works on PCs but not on touchscreen phones or tablets:

Zakaria Acharki helped me at www.experts-exchange.com/questions/29129533 with a webpage I designed in 2012 to get it partially working on touchscreen phones and tablets.

Here is a link to the webpage modified so it doesn't send data to me: www.barnwellmd.com/PainDiagram/Testdrawing.html

But this routine which works great with a mouse on a PC does not work on phones or tablets:
function clearGray()
{
	var imageData2 = context.getImageData(0, 0, 700, 643);
	var newPixels = imageData2.data;
	for (var i = 0, il = pixels.length; i < il; i += 4) 
	{
		if((pixels[i] == 255 && pixels[i+1] == 204 && pixels[i+2] == 153) 
		|| (newPixels[i] > 235 && newPixels[i+1] < 150 && newPixels[i+2] > 75 && newPixels[i+2] < 110))
		{
		}
		else
		{
		   newPixels[i] = pixels[i];
		   newPixels[i+1] = pixels[i+1];
		   newPixels[i+2] = pixels[i+2];
		}
	}
	context.putImageData(imageData2, 0, 0);
	context.fillStyle  = "#CDCDCD";
	context.fillText("Referred pain",275,600);
}

Open in new window

This routine deletes the markings not on the body image when mouseup is fired.

This is what it looks like on the pc after swiping the mouse across the entire image: desktop imageThis is what it looks like on my phone after swiping my finger across the entire image:phone image
So on the phone, lines drawn on the image are not deleted outside of the body image.

What do I need to do to get this to work on touchscreens?
Thanks!
0
Have a jpg image that needs to be:
  • Opened and displayed
  • Resizeable using its lower-right corner
  • Draggable around the screen
  • Closeable
When first opened, it needs to be resized to fit inside whichever parent element is holding it ... a <div> maybe?
There should be no scrollbars.  Whatever size the parent is dragged to then that is the size of the jpg (but it remains the same ratio).
I thought this would be simple, but nothing I tried so far has worked.  Tried <img>.  Tried background-image.  I must be missing something.
Tools we use here are HTML5, CSS3, jQuery, and JavaScript.
Chrome is the web browser used internally.
0
ASP.NET - I am looking for recommendations on a good popup window control which can use something like CSS, jquery, or javascript.

I don't have a problem with using codecanyon, but it's so hard to find what is good versus bad out there.

So please recommend something, free or for reasonable purchase, that works well.

I am not interested in using Telerik or AjaxControl Toolkit.

Thanks!
0
How to stop the scroll when it reaches the last image in the folder?
 <ul id="carousel" class="jcarousel jcarousel-skin-tango">
				<li><a href="#" rel="p1"><img src="images/small/1.jpg" ></a></li>
				<li><a href="#" rel="p2"><img src="images/small/2.jpg" ></a></li>
				<li><a href="#" rel="p3"><img src="images/small/3.jpg" ></a></li>
				<li><a href="#" rel="p4"><img src="images/small/4.jpg"></a></li>
	            <li><a href="#" rel="p5"><img src="images/small/5.jpg" ></a></li>
				
			  </ul>
		

Open in new window

0
Razor# MVC

I have a javascript function that is called when a drop down is changed. this function calls a code behind function in the controller. the problem is the js function does not wait for the function to run, it never calls success or error. Once the java script function exists then the function called in the code behind runs.

Can anyone advise on how to make the javascript function wait while the code behind function is called and returns?

Javascript
function toggleDIvDisplay(e) {
        debugger;
        var result;
        $.ajax({
            type: "POST",
            url: '@Url.Action("FleetSelect", "Reports")',
            data: "{'value':'" + e + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                result = data;
                if (data == "OK") {

                }
            },
             error: function () {
                alert("Failed to load Item");
            }
        });

        if (result == "123") {
            $('#divtwo').show();
        }
        else {
            @* $('#divtwo').hide(); *@
        }
    }

Open in new window



Code behind controller
 public JsonResult FleetSelect(string value)
        {
            List<ReportType> rList = GetReportList();
            foreach (ReportType rt in rList)
            {
                if (rt.id == Convert.ToInt32(value))
                {
                    if (rt.vehicle)
                    {
                        return new JsonResult { Data = "V" }; 
                    }
                    else
                    {
                        return new JsonResult { Data = "F" };
                    }
                }
            }
            return new JsonResult { Data = "V" };
        }

Open in new window

0
I am trying to update a custom filed using put requests in POSTMAN
I manage to update the page title slug or any filed which wordpress created.(fields)
For example I have :
if I do a get request :
https://breeding-portal.mystagingwebsite.com/wp-json/acf/v3/pages/735
you will see :
{
    "acf": {
        "dog_name": null
    }
}

What I want to do is update dog_name I have tried multiple solutions.
the PUT request echoes :
{
    "code": "cant_update_item",
    "message": "Cannot update item",
    "data": {
        "status": 500
    }
}
Anyone solved this ?
0
I am trying to use child rows datatables found at:  https://www.datatables.net/examples/api/row_details.html

I have a Controller that returns my SQL View as a List:

 public ActionResult List()
        {
            MyDB DB = new MyDB();

            List<vw_Report> data = (from x in DB.vw_Report
                                                    select x).ToList();

            data = (from x in vw_Report.GetRows()
                    select x).ToList();

            return View(data.ToList());
        }

My View follows the example provided:

    @model List<master.path.Models.vw_Report>
        @{
            ViewBag.menu = false;
        }

        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width" />
        </head>

        <body>

            <h1 style="text-align:center">Report</h1>

            <div style="padding: 25px;">
                <table class="DTStyle" id="List">
                    <thead>
                        <tr>
                            <th>

                            </th>
                            <th>
                                Text Field 1
                            </th>
                            <th>
                                Text Field 2
                            </th>
                            <th>
                                Text Field 3
                            </th>
                            <th>
 …
0
UPDATE:  Added the 'which' columns to the query.

Database comparison of two tables.

I'm looking for a query that will compare two databases with identical schemas.  Here is a simple query that I've written:

select *
from
(
  select 'db1' as which, a, b, c
  from db1.tbl where attrib = 'test'
UNION ALL
  select 'db2' as which, a, b, c
  from db2.tbl where attrib = 'test'
)
group by a, b, c
having count(*) = 1
order by a, b, c

Open in new window


This will show the row differences but does not tell me which database a row as added to (db1 or db2). [UPDATE: added which so I believe I can see which db row was added to]
It will show if two rows differ but does not tell me specifically which column data was changed.
Also, when a row is delete from one of the dbs, it does not tell which db is was delete from (db1 or db2). [UPDATE: added which so I believe I can see which db row was delete from]

And the above query be amended support the three items?  I'm using SQLite (an older version) so I don't have the flexibility of stored procedures or functions.  Another possibility is to solve this using JavaScript.  I'm aiming for short and simple.
0
Starting with Angular 5
LVL 12
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

I am trying to print labels using a DYMO Developer SDK it uses javascripts here is my files PrintMeThatLabel2.js

I got most of it working with the help for you all. I have a from the user query sql then save the info to a json then the PrintMeThatLabel2.js get that info and prints the label. If the query get 10 recorded it prints 10 labels Great!


But if I want to print 1 label out of the 10 I don't know how to push the 1 json to the PrintMeThatLabel2.js for printing.


I got most of it working so when I press Print me button it reloads the json array with just 1 recorded then I have to click the big print button at the top to print just that 1 recorded.

If the user then want to print them ALL 10 he/she will have to query the db again for it to load all the recorded in to the json array then click the big print button to run PrintMeThatLabel2.js and print.

I am trying to not have the user rerun the page to print all label ones the just pick one of the record to print.


so 2 buttons 1 prints all the recorded and 1 prints just the one he/she picked.

Most of you will recognize this code

<html>
<head>
<title>Search</title>

<link rel="stylesheet" type="text/css" href="PrintMeThatLabel.css" />
<script src = "cookie.js" type="text/javascript"> </script>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<script src = "http://www.labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.3.0.js" type="text/javascript" charset="UTF-8">

Open in new window

0
I need to copy a drop-down section on a form to another form element.

So I have a drop-down List:

<div class="row">
                        <div class="col-xs-6">
                            @Html.Label("Select one or more Item(s):")
                            @Html.DropDownListFor(x => x.List, sl.getItem(s)(), new
                       {
                           @type = "drop",
                           @multiple = true,
                           @style = "width: 100%",
                           @id = "List",
                           data_placeholder = "Select Item(s)",
                       })
                        </div>

                        <div class="col-xs-2 col-xs-offset-1">
                            <button type="button" class="btn btn-info" style="vertical-align:bottom;" onclick="NewRequest.copyList();">
                                Copy to Summary
                            </button>
                        </div>
                    </div>

The View also has:

<script type="text/javascript">
    var NewRequest = new NewRequestClass();
    NewRequest.init();
</script>

My JavaScript file has:

function NewRequestClass() {
    this.List;
    this.notes;
}

copyList: function (sender) {
        alert(this.List);
        this.notes = this.List;
    },

    //Maps variables to the correct field
    init: function () {
        this.List = document.getElementById("List");
        this.notes = …
1
I am running a node/express website.
I am trying to make a sequelize call to a proc.

Then I need to take the returned results and loop through , run a second proc

at the end I am trying to return the information in order.

It looks like it is making the calls as they come through and I am not getting the information back in order.
can i maybe split these up in separate routes and call each other?

it should look something like this

first proc
    response row 1
          second proc call with first response row 1
               second proc response 1
               second proc response 2
               second proc response 3
    response row 2
          second proc call with first response row 2
               second proc response 1
               second proc response 2
               second proc response 3
end code

var response;
sequelize
	.query(
    " exec ***** @startDate=?,@endDate=?" ,
    {  replacements: [ req.body.startDate, req.body.endDate ], type: sequelize.QueryTypes.SELECT }
  )
	 
	.then(results => {
	 if (results.length == 0 ) { 
                  response = `<p>There are no records to be found within that date range. Please try again.</p> `;
              }else {
				response +=  "top of file";
			 	results.forEach(function(payment) {

		 		response +=payment;
		 	
		 			sequelize
	.query(
    " exec dbo.***** @linkID = ?, @linkType= ?" ,
    {  replacements: [payment.LinkID, payment.LinkType ], type: 

Open in new window

0
Hi There,

I have 3 dynamically constructed Textboxes (input) (Location, keyword, Contributor) on a reactjs application.   I want to filter the below list of checkboxes onChange event of input boxes (Text box).  It is a react redux application.  Please see the embedded image to have a complete idea about UI.   Please suggest how to achieve this result.

to handle onChange event of dynamically created input boxes
Please see the below code which I had done to create this gui on reactjs.

export default class SearchOptions extends Component {
  constructor(props) {
     super(props);
     //this.updateFacet = this.updateFacet.bind(this);
     this.onInputBoxChange = this.onInputBoxChange.bind(this);
  }

  /*updateFacet(key,value,isChecked) {
      console.log("updateFacet - " + isChecked);
      this.props.actions.updateFacet(key,value,isChecked,false);
  }*/

  onInputBoxChange(e,items,key) {
     items.map(i => console.log(i.value + " count (" + i.count + ")" ));
     console.log("target - " + e.target.value);
     var keysList = items.filter(i => i.value.toLowerCase().indexOf(e.target.value.toLowerCase().toString()) >= 0 ? true : false);
     console.log(keysList);
  }

  createListKeyValues() {
        const listKeyValues = (
          <div style={{marginLeft:10}}>
          {(()=>{
               return i.items.slice(0,3).map((j) => {

                  const label = j.value.charAt(0).toUpperCase() + j.value.slice(1);
                  const count = j.count && j.count > 0 ? ` (${j.count})` : '';

Open in new window

0
I have a navigation bar on the left side of the product category per the attached image. There is a  vertical scroll bar. Inside  the bar, there are titles with arrows, when user clicks the arrows, and it will expand and see the contents. When user checks the checkbox, it will expand again. When users selects the checkbox, it will go to the linked page. On the linked page, the checkbox the users just selected should still be collapsed instead of hiding, with the check mark checked   Any simple example?
Navigation-bar.jpg
0
Hello, so I have this customer who has come up with a math formula and he doesn't want anybody to see it. But he also wants me to create a web app which uses the formula.

Now, I have a decent knowledge of Javascript, but I've dabbled very little with php.

So, if I use js exclusively, the code will always somehow be visible, as obfuscated as it may be.

I was wondering, is there a way to use php? The app would be very simple: the user inputs some values into a form and the app needs to make some calculations with those values and spit out some results. Since I am near zero with php, I have no idea if this can be done with it, easily or otherwise.

The app would be mostly identical to this one: http://www.laconfraternitadellapizza.net/calcolapizza/
I made that in js though.

I hope someone can help me, I don't need the details but I'd just like to know if it's doable and maybe some hints on how to handle the data.

Thanks.
0

JavaScript

121K

Solutions

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.