JavaScript

Get html element position on window scroll

11-Jan-19 22:50

As far as I recall, Javascript is loosely typed. I am not sure the specifics of scope, but take a look at JavaScript | MDN[^].

Re: JavaScript

Nathan Minier14-Jan-19 1:16

Nathan Minier

14-Jan-19 1:16

Scope depends on what declaration you use. The old "var" declaration gives you function scope, where everything in a given function and sub function can refer to that scope (because "this" can mess that up big time, and is likely one of the hardest things to get used to in JS). ES 2016+ introduces the "let" declaration, which has proper block scope.

Global scope comes from either declaring a var outside of a function block, or the cleaner approach of attaching it to the window object:

JavaScript

var variable =  value;
window.variable = value;

In classically-driven approaches to JS, the window object is effectively the global namespace.

"Never attribute to malice that which can be explained by stupidity."
- Hanlon's Razor

User 41802549-Jan-19 3:43

User 4180254

9-Jan-19 3:43

I have 3 nav bars on my angular page and need to stick 3rd nav bar when window is scroll. It behave weird on different browsers.

Is there any way to pick the top position of 3rd nav bar when window is scrolled and reached top of browser window? I tried with offsetTop and scrollTop but these values are fixed always.

modified 20-Sep-20 21:01pm.

Re: Get html element position on window scroll

Richard Deeming9-Jan-19 8:12

Richard Deeming

9-Jan-19 8:12

It sounds like you're looking for "sticky" positioning:
Sticky positioning | position | MDN[^]

Browser support is pretty good, with Internet Explorer being the main culprit:
Can I use... CSS position:sticky[^]

If you need support for IE9+, you can use a polyfill:
GitHub - wilddeer/stickyfill: Polyfill for CSS `position: sticky`[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Failing to call the put and post Web Api methods from the react js components

simpledeveloper24-Dec-18 9:55

simpledeveloper

24-Dec-18 9:55

I have a put method in web api as below:

[HttpPut("{id}")]
public int Edit(int id, TblEmployee employee)
{
    return objemployee.UpdateEmployee(employee);
}

My Web Api methods are as follows, for some reason I am not able to call these Web Api methods, am I doing anything wrong these methods, please let me know:

[Produces("application/json")]
[Route("api/Employee")]
public class EmployeeController : Controller
{
    EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();

    [HttpGet("[action]")]
    //[Route("api/Employee/Index")]
    public IEnumerable<TblEmployee> Index()
    {
        return objemployee.GetAllEmployees();
    }

    [HttpPost]
    public int Create(TblEmployee employee)
    {
        return objemployee.AddEmployee(employee);
    }

    [HttpGet("{id}")]
    //[HttpGet("{id}", Name = "Details")]
    public TblEmployee Details(int id)
    {
        return objemployee.GetEmployeeData(id);
    }

    [HttpPut("{id}")]
    public int Edit(int id, TblEmployee employee)
    {
        return objemployee.UpdateEmployee(employee);
    }

    [HttpDelete("{id}")]
    public int Delete(int id)
    {
        return objemployee.DeleteEmployee(id);
    }

    [HttpGet("[action]")]
    public IEnumerable<TblCities> GetCityList()
    {
        return objemployee.GetCities();
    }
}

I am trying to call this method using reactjs component, I am not able to call this method, can you please help me where am I making mistake
Here is my Table rendering component:

private renderEmployeeTable(empList: EmployeeData[]) {
    return <table className='table'>
        <thead>
            <tr>
                <th></th>
                <th>EmployeeId</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Department</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            {empList.map(emp =>
                <tr key={emp.employeeId}>
                    <td></td>
                    <td>{emp.employeeId}</td>
                    <td>{emp.name}</td>
                    <td>{emp.gender}</td>
                    <td>{emp.department}</td>
                    <td>{emp.city}</td>
                    <td>
                        <a className="action" onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a>  |
                        <a className="action" onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
                    </td>
                </tr>
            )}
        </tbody>
    </table>;
}

Now I am calling it as below the Edit method as below

private handleEdit(id: number) {
    this.props.history.push("api/employee/edit/" + id);
}

And I have Delete Web Api method that's not being called too from the above ts script file

[HttpDelete("{id}")]
public int Delete(int id)
{
    return objemployee.DeleteEmployee(id);
}

And I have Create method which is supposed to be called by ts file at the time of save button click that's not being called as well:

[HttpPost]
       public int Create(TblEmployee employee)
       {
           return objemployee.AddEmployee(employee);
       }

The ts script for the create call is as below on the save button click:

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-router-dom';
import { EmployeeData } from './FetchEmployee';
interface AddEmployeeDataState {
    title: string;
    loading: boolean;
    cityList: Array<any>;
    empData: EmployeeData;
}
export class AddEmployee extends React.Component<RouteComponentProps<{}>, AddEmployeeDataState> {
    constructor(props) {
        super(props);
        this.state = { title: "", loading: true, cityList: [], empData: new EmployeeData };
        fetch('api/Employee/GetCityList')
            .then(response => response.json() as Promise<Array<any>>)
            .then(data => {
                this.setState({ cityList: data }                
                );

                console.log(data);
            });
        var empid = this.props.match.params["empid"];
        // This will set state for Edit employee  
        if (empid > 0) {
            fetch('api/Employee/Details/' + empid)
                .then(response => response.json() as Promise<EmployeeData>)
                .then(data => {
                    this.setState({ title: "Edit", loading: false, empData: data });
                });
        }
        // This will set state for Add employee  
        else {
            this.state = { title: "Create", loading: false, cityList: [], empData: new EmployeeData };
        }
        // This binding is necessary to make "this" work in the callback  
        this.handleSave = this.handleSave.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
    }
    public render() {
        let contents = this.state.loading
            ? <p>Loading...</p>
            : this.renderCreateForm(this.state.cityList);
        return <div>
            <h1>{this.state.title}</h1>
            <h3>Employee</h3>
            <hr />
            {contents}
        </div>;
    }
    // This will handle the submit form event.  
    private handleSave(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        // PUT request for Edit employee.  
        if (this.state.empData.employeeId) {
            fetch('api/Employee/Edit', {
                method: 'PUT',
                body: data,
            }).then((response) => response.json())
                .then((responseJson) => {
                    this.props.history.push("/fetchemployee");
                })
        }
        // POST request for Add employee.  
        else {
            fetch('api/Employee/Create', {
                method: 'POST',
                body: data,
            }).then((response) => response.json())
                .then((responseJson) => {
                    this.props.history.push("/fetchemployee");
                })
        }
    }
    // This will handle Cancel button click event.  
    private handleCancel(e) {
        e.preventDefault();
        this.props.history.push("/fetchemployee");
    }
    // Returns the HTML Form to the render() method.  
    private renderCreateForm(cityList: Array<any>) {
        return (
            <form onSubmit={this.handleSave} >
                <div className="form-group row" >
                    <input type="hidden" name="employeeId" value={this.state.empData.employeeId} />
                </div>
                < div className="form-group row" >
                    <label className=" control-label col-md-12" htmlFor="Name">Name</label>
                    <div className="col-md-4">
                        <input className="form-control" type="text" name="name" defaultValue={this.state.empData.name} required />
                    </div>
                </div >
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="Gender">Gender</label>
                    <div className="col-md-4">
                        <select className="form-control" data-val="true" name="gender" defaultValue={this.state.empData.gender} required>
                            <option value="">-- Select Gender --</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                </div >
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="Department" >Department</label>
                    <div className="col-md-4">
                        <input className="form-control" type="text" name="Department" defaultValue={this.state.empData.department} required />
                    </div>
                </div>
                <div className="form-group row">
                    <label className="control-label col-md-12" htmlFor="City">City</label>
                    <div className="col-md-4">
                        <select className="form-control" data-val="true" name="City" defaultValue={this.state.empData.city} required>
                            <option value="">-- Select City --</option>
                            {cityList.map(city =>
                                <option key={city.cityId} value={city.cityName}>{city.cityName}</option>
                            )}
                        </select>
                    </div>
                </div >
                <div className="form-group">
                    <button type="submit" className="btn btn-default">Save</button>
                    <button className="btn" onClick={this.handleCancel}>Cancel</button>
                </div >
            </form >
        )
    }
}

Basically all the Get Api methods are being called but not the put or post methods, any help would be very very helpful, thanks in advance

modified 25-Dec-18 19:04pm.

get a function to countdown (from any number) to zero

Member 1409810523-Dec-18 14:49

Member 14098105

23-Dec-18 14:49

What i did:

function countDown(start) {
if(start>0)
  var sum = start-1;

   
   consolelog(sum);

Re: get a function to countdown (from any number) to zero

Richard MacCutchan25-Dec-18 21:18

Re: get a function to countdown (from any number) to zero

25-Dec-18 21:18

Is there supposed to be a question there?

Bohdan Stupak9-Jan-19 19:40

Bohdan Stupak

9-Jan-19 19:40

My psychic abilities tell me that something like this was requested

JavaScript

const countDown = (start) => {
	for (let i = start; i >= 0; i--) {
		console.log(i)
	}
}

Although what I really would like to recommend is to explore this article and tutorials section in the left of the page. Because what you've requested is some really basic programming and if you can't handle it yourself there is not much to do for you.

how to get a js fuction to return html opening and closing tag

Member 1409810522-Dec-18 17:34

Member 14098105

22-Dec-18 17:34

// getHTMLTag takes in a tag name 
// and returns the opening and closing tag
// Example: getHTMLTag('div') would return '<div></div>'

function getHTMLTag(tagName) {
  var tag = '<tagName>'+ '</tagName>';
  return tag;

this is what i said, i'm stuck and dont know what else to try. I know its novice stuff but i just started a week ago.

Re: how to get a js fuction to return html opening and closing tag

Richard MacCutchan22-Dec-18 23:35

Re: how to get a js fuction to return html opening and closing tag

22-Dec-18 23:35

Input parameter tagName is a variable value so needs to be outside of any quote characters. Your method should be something like:

JavaScript

function getHTMLTag(tagName) {
  var tag = '<' + tagName + '></' + tagName + '>';
  return tag;

[edit]
See also JavaScript Tutorial[^]
[/edit]

modified 23-Dec-18 7:21am.

Member 1409810523-Dec-18 14:31

Member 14098105

23-Dec-18 14:31

Thanks!

Get an html table multiple rows as a string URL for Ajax

Member 1409585019-Dec-18 22:55

Member 14095850

19-Dec-18 22:55

How to Get an html table multiple rows as a string URL for Ajax to insert row values in database

Re: Get an html table multiple rows as a string URL for Ajax

Afzaal Ahmad Zeeshan23-Dec-18 0:29

Afzaal Ahmad Zeeshan

23-Dec-18 0:29

You want to get the table, or insert the rows? Ajax can easily do both, and since we are talking about JavaScript, chances are you will have more libraries for this than most men have hair on their head.

Try this, DataTables example - Ajax sourced data

Elaborate your question a bit more, in order to get a proper answer. Smile | :)

The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~

debug shopping cart project

ghazabaz13-Dec-18 15:56

e.target.value, switch-case operators

13-Dec-18 15:56

Hello guys,

My final project is almost complete. It is a sub website and the goal is to add items to the cart and calculate if the items has been added or not etc.

Here is what I have so far:

window.addEventListener("load", setupCart);

function setupCart() {
	var addButtons = document.getElementsByClassName("addButton");
	
	for (var i = 0; i < addButtons.length; i++) {
		addButtons[i].addEventListener(addItem);
	}
}

function addItem(e) {
	var foodItem = e.target.nextElementSibling;
	var foodID = foodItem.getAttribute("id").value;
	var foodDescription = foodItem.cloneNode(true);
	var cartBox = document.getElementById("cart");
	
	var duplicateOrder = false;
	
	for (var i = 0; i < cartBox.childNodes.length; i++) {
		if (cartBox.childNodes[i].id === foodID) {
			cartBox.firstElementChild.value + 1;
		}
	}
	
	if (duplicateOrder === false) {
		var orderCount = document.createElement("span");
		orderCount.textContent = 1;
		foodDescription.appendChild(orderCount);
		cartBox.appendChild(foodDescription);
	}
}

I am getting an error on the browsers debug window saying:

Quote:
SCRIPT65535: SCRIPT65535: Argument not optional

For the following code:

addButtons[i].addEventListener(addItem);

Thanks !

***EDIT***

Found a bug:

addButtons[i].addEventListener(addItem);

Updated to:

addButtons[i].addEventListener("click", addItem);

Now items are loading onto cart, but repeat items are NOT simply being added by number, rather a duplicate fills the cart if the original is already there.

Working on this now. Debugger shows no error however.

modified 13-Dec-18 22:27pm.

ghazabaz6-Dec-18 19:22

6-Dec-18 19:22

Hey guys,

I am finishing up a project. I am getting some errors that I need help with. I posted the questions as comments within the code. Thanks !

// Declares the buttonClick(e) function
function buttonClick(e) {
	
	
	// Declares variables calcValue, calcDecimal and buttonValues
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	var buttonValue = e.target.value; // This is giving me an error saying it is undefined
	
	// Begins a switch-case structure to assign events to each button pressed
	switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal) + "\n";
		break;
		case "prev":
		calcValue =  + lastEq(calcValue) ; // I was told I need "operators" here?
		calcValue = calcValue + buttonValue;
		break;
	}

document.getElementById("calcWindow").value = calcValue;
document.getElementById("calcWindow").focus();

}

EDIT

The directions for the buttonValue are:

Quote:
Each calculator button has a value attribute that defines what should be done with that button. Declare the buttonvalue attribute equal to the value attribute of the event object target.

Richard MacCutchan6-Dec-18 23:26

6-Dec-18 23:26

JavaScript

var buttonValue = e.target.value; // This is giving me an error saying it is undefined

What is e and what are its attributes?

JavaScript

calcValue =  + lastEq(calcValue) ; // I was told I need "operators" here?

What is that + sign supposed to do?

ghazabaz7-Dec-18 3:47

7-Dec-18 3:47

Richard, good question. I am following the example shown in the text. E is the buttonValue(e) function's parameter ?

I am guessing the operator required is a + operator to add the value? I also thought I did not need an operator there.

Here is the whole JS file code:

// Loads the init function when the broser window is opened
window.onload = init();

// Declares the init() function
function init() {
	
	// Declares the calcButtons variable and sets it equal to the element calcButton
	var calcButtons = document.getElementsByClassName("calcButton");
	
	// Loops through calcButtons and runs the buttonClick() function when a button is clicked
	for (var i = 0; i < calcButtons.length; i++) {
		calcButtons[i].onclick = buttonClick();
	}
	
	// Runs the calcKeys function when a key is pressed within the calcWindow element
	document.getElementById("calcWindow").addEventListener(onkeydown, calcKeys());
}

// Declares the buttonClick() function
function buttonClick(e) {
	
	
	// Declares variables calcValue, calcDecimal and buttonValues
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	var buttonValue = e.target.value;
	
	// Begins a switch-case structure to assign events to each button pressed
	switch(buttonValue) {
		case "del":
		calcValue = "";
		break;
		case "bksp":
		calcValue = eraseChar(calcValue);
		break;
		case "enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal) + "\n";
		break;
		case "prev":
		calcValue = lastEq(calcValue);
		calcValue = calcValue + buttonValue;
		break;
	}
}


document.getElementById("calcWindow").value = calcValue;
document.getElementById("calcWindow").focus();


// Declares the calcKeys() function
function calcKeys(e) {
	
	var calcValue = document.getElementById("calcWindow").value;
	var calcDecimal = document.getElementById("decimals").value;
	
	
	// Begins a switch-case structure, assigning values to each of the buttons below (delete, enter, arrow up) when pressed
	switch(e) {
		case "Delete": 
		calcValue = "";
		break;
		case: "Enter":
		calcValue = " = " + evalEq(calcValue, calcDecimal);
		break;
		case "ArrorUp":
		calcValue = lastEq(calcWindow.value);
		break;
		
		e.preventDefault();
	}
	

	document.getElementById("calcWindow").value = calcValue;
	
}







/* ===================================================================== */

function eraseChar(textStr) { 
   return textStr.substr(0, textStr.length - 1);
}

function evalEq(textStr, decimals) {
   var lines = textStr.split(/\r?\n/);
   var lastLine = lines[lines.length-1];
   var eqValue = eval(lastLine);
   return eqValue.toFixed(decimals);
}  

function lastEq(textStr) {
   var lines = textStr.split(/\r?\n/);
   var lastExp = lines[lines.length-2];
   return lastExp.substr(0, lastExp.indexOf("=")).trim();
}

modified 7-Dec-18 9:53am.

Richard MacCutchan7-Dec-18 4:29

7-Dec-18 4:29

The problem with homework questions is that we have no idea what your teacher has set as the problem, or what they expect in return.

ghazabaz wrote:
I am following the example shown in the text. E is the buttonValue(e) function's parameter ?

Well you need to go back to whatever text you are referring to and check that you are following it correctly. And perhaps talk to your teacher also.

Richard Deeming7-Dec-18 5:37

Richard Deeming

7-Dec-18 5:37

ghazabaz wrote:

window.onload = init();
...
calcButtons[i].onclick = buttonClick();
...
document.getElementById("calcWindow").addEventListener(onkeydown, calcKeys());

Those are likely candidates for your error. You're setting the event handler to the value returned from calling the function with no parameters, rather than the function itself.

When you call buttonClick with no parameters, e will be undefined, and you will get your error.

Remove the parentheses from the event handlers. You should probably use addEventListener consistently as well.

window.addEventListener("load", init);
...
calcButtons[i].addEventListener("click", buttonClick);
...
document.getElementById("calcWindow").addEventListener("keydown", calcKeys);

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

ghazabaz7-Dec-18 6:44