The function sends ajax request with

vanilla JavaScript

and calls the

callback function

if the third parameter's type is

function

function ajax(url, methodType, callback){
    var xhr = new XMLHttpRequest();
    xhr.open(methodType, url, true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200){
            if (typeof callback === "function") {
                callback(xhr.responseText);
            }
        }
    }
}

Example of calling the above method

ajax(url, 'GET', function(resp) {
    console.log(resp);
})

Load CSS resource only for mobile devices

<link href="css/d1.m.min.css?t=2.9" rel="stylesheet" media="screen and (max-width: 500px)" type="text/css" />

Another way is to use

handheld

on

media

attribute

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>

PHP's way to load CSS file for

mobile

devices

if(stristr($_SERVER['HTTP_USER_AGENT'], "Mobile")){
    echo '<link rel="stylesheet" href="style-400.css" type="text/css" />';
}

Load CSS resource only for desktop

<link href="css/d1.min.css?t=2.9" rel="stylesheet" media="screen and (min-width: 501px)" type="text/css" />

Another way is to use

screen

on

media

attribute

<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>

Using PHP

if(!stristr($_SERVER['HTTP_USER_AGENT'], "Mobile")){
    echo '<link rel="stylesheet" href="style.css" type="text/css" />';
}

Note: Remember this always loads the

d1.m.min.css

but activates it only on screens having max width as

500px

Tests that response time is below 100ms

pm.environment.set("allowedMilliseconds", 100);

pm.test("Response time is less than "+pm.environment.get("allowedMilliseconds")+"ms", function () {
    pm.expect(pm.response.responseTime).to.be.below(pm.environment.get("allowedMilliseconds"));
});

$errors->has('accountable_id')

did not work

@if($errors->has('accountable_id'))
    <div class="invalid-feedback">
        <strong>{{ $errors->first('accountable_id') }}</strong>
    </div>
@endif

Until

is-invalid

class was specified

class="form-control {{ $errors->has('accountable_id') ? 'is-invalid' : '' }}"

The complete example

<div class="form-group">
    <label for="exampleSelect2">Accountable <span class="text-danger">*</span></label>
    <select class="form-control {{ $errors->has('accountable_id') ? 'is-invalid' : '' }}" id="accountable_id" name="accountable_id">
        <option value="">Select Accountable</option>
        @foreach($users as $accountable)
            <option value="{{ $accountable->id }}" {{ $accountable_id == $accountable->id ? 'selected' : '' }}>{{ $accountable->name }}</option>
        @endforeach
    </select>
    @if($errors->has('accountable_id'))
        <div class="invalid-feedback">
            <strong>{{ $errors->first('accountable_id') }}</strong>
        </div>
    @endif
</div>

Debug errors in Laravel

blade

file on each row

@if ($errors->any())
     @foreach ($errors->all() as $error)
         <div>{{$error}}</div>
     @endforeach
 @endif

Comment is not supported in JSON but we can do the trick - to add the

comment

inside the object as a

property

{  
    "employee": {  
        "name": "George",   
        "a0ge": "30",   
        "city": "Tbilisi",   
        "comments": "The best student ever"  
    }  
}

JSON object can have another JSON object as a child

var myObj = {
    "name":"John",
    "age":30,
    "cars": {
        "car1":"Ford",
        "car2":"BMW",
        "car3":"Fiat"
    }
}

// Accessing nested object properties
document.write(myObj.cars.car2);
document.write("<br />");
document.write(myObj.cars["car2"]);
document.write("<br />");
document.write(myObj["cars"]["car2"]);

The

getElementsByClassName()

method returns a collection of all elements (as an array) in the document with the specified class name. JS

var arr =  document.getElementsByClassName("demo");
//accessing the second element
arr[1].innerHTML = "Hi";

HTML

<div class="demo">1</div>
<div class="demo">2</div>

getElementById

method is used to select the element with

id="demo"

and change its content

let elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

The

document

object has methods that allow us to select the desired HTML element. These three methods are the most commonly used for selecting HTML elements

//finds element by id
document.getElementById(id) 

//finds elements by class name
document.getElementsByClassName(name) 

//finds elements by tag name
document.getElementsByTagName(name)

In the example below, the getElementById method is used to select the element with id="demo" and change its content

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

Note: The example above assumes that the HTML contains an element with

id="demo"

, for example

<div id="demo"></div>