August 2017

Search and get the postion of an element in jquery

index() is used for search for a given element from among the matched elements.

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

Eg:

<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>

var listItem = document.getElementById( "bar" );
console.log( "Index: " + $( "li" ).index( listItem ) );

We get back the zero-based position of the list item:

Index: 1

Sample code and demo is here

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><style>  div {     background: yellow;     margin: 5px;   }   span {     color: red;   }   </style><script>$(document).ready(function () {  }); </script></head><body><h4>Search and get the postion of an element in jquery:</h4><span>Click a div!</span><div>First div</div><div>Second div</div><div>Third div</div><script>$( "div" ).click(function() {   // `this` is the DOM element that was clicked   var index = $( "div" ).index( this );   $( "span" ).text( "That was div index #" + index ); }); </script></body></html>

Demo

Load a JavaScript file dynamically

Load a JavaScript file dynamically using jQuery

jQuery.getScript()

Load a JavaScript file from the server using a GET HTTP request, then execute it.

Eg:
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup():

$.ajaxSetup({
cache: true
});

Sample code and demo

<!doctype html><html lang="en">    <head>        <title>Online HTML Editor - webspeckle.com</title>        <style>            .block {                 background-color: blue;                 width: 150px;                 height: 70px;                 margin: 10px;             }         </style>        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    </head>    <body>        <h3>Load a JavaScript file dynamically using jQuery</h3><button id="go">» Run</button>        <div class="block"></div><script>            $("#go").click(function () {                 var url = "https://code.jquery.com/color/jquery.color.js";                 $.getScript(url, function () {                      $(".block")                             .animate({                                 backgroundColor: "rgb(255, 180, 180)"                             }, 1000)                             .delay(500)                             .animate({                                 backgroundColor: "olive"                             }, 1000)                             .delay(500)                             .animate({                                 backgroundColor: "#00f"                             }, 1000);                 });             });         </script>     </body></html>

Demo

How to send HTTP request in spring boot?

If you need to call remote REST services from your application, you can use Spring Framework’s RestTemplate class. Since RestTemplate instances often need to be customized before being used, Spring Boot does not provide any single auto-configured RestTemplate bean. It does, however, auto-configure a RestTemplateBuilder which can be used to create RestTemplate instances when needed. The auto-configured RestTemplateBuilder will ensure that sensible HttpMessageConverters are applied to RestTemplate instances.

RestTemplateBuilder includes a number of useful methods that can be used to quickly configure a RestTemplate. For example, to add BASIC auth support you can use builder.basicAuthorization("user", "password").build().

HTTP method	RestTemplate methods
DELETE	`delete(java.lang.String, java.lang.Object...)`
GET	`getForObject(java.lang.String, java.lang.Class<T>, java.lang.Object...)`
	`getForEntity(java.lang.String, java.lang.Class<T>, java.lang.Object...)`
HEAD	`headForHeaders(java.lang.String, java.lang.Object...)`
OPTIONS	`optionsForAllow(java.lang.String, java.lang.Object...)`
POST	`postForLocation(java.lang.String, java.lang.Object, java.lang.Object...)`
	`postForObject(java.lang.String, java.lang.Object, java.lang.Class<T>, java.lang.Object...)`
PUT	`put(java.lang.String, java.lang.Object, java.lang.Object...)`
any	`exchange(java.lang.String, org.springframework.http.HttpMethod, org.springframework.http.HttpEntity<?>, java.lang.Class<T>, java.lang.Object...)`
	`execute(java.lang.String, org.springframework.http.HttpMethod, org.springframework.web.client.RequestCallback, org.springframework.web.client.ResponseExtractor<T>, java.lang.Object...)`

Eg:

HttpResponse httpResponse;
HttpRequest httpRequest = new HttpRequest();
HttpRequest.setName("webspeckle.com");

HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_JSON);
HttpEntity<HttpRequest> entity = new HttpEntity<>(httpRequest,headers);

RestTemplate restTemplate = new RestTemplate();

try
{
ResponseEntity<HttpResponse> responseEntity = restTemplate.exchange("REST_URL", HttpMethod.POST, entity, HttpResponse.class);
httpResponse = responseEntity.getBody();
//Success
}
catch(HttpStatusCodeException ex)
{
//Error in REST request
}

Http status code quick reference

Status codes in the 100x range (from 100-199) are informational, and describe the processing for the request.

Status codes in the 200x range (from 200-299) indicate the action requested by the client was received, understood, accepted and processed successfully

Status codes in the 300x range (from 300-399) indicate that the client must take additional action to complete the request, such as following a redirect

Status codes in the 400x range (from 400-499) is intended for cases in which the client seems to have erred and must correct the request before continuing. The aforementioned 404 is an example of this.

Status codes in the 500x range (from 500-599) is intended for cases where the server failed to fulfill an apparently valid request.

Change message converter to Gson in RestTemplate

Message converters are used to convert the Http request to an object representation and back.

RestTemplate restTemplate = new RestTemplate();

List<HttpMessageConverter<?>> messageConverters = new ArrayList<>();
GsonHttpMessageConverter gsonHttpMessageConverter = new GsonHttpMessageConverter();
messageConverters.add(gsonHttpMessageConverter);
restTemplate.setMessageConverters(messageConverters);

Search a string in JavaScript

The indexOf() method returns the position of the first occurrence of a specified string value in a string.

stringObject.indexOf(searchvalue,fromindex)

searchvalue Required. Specifies a string value to search for
fromindex Optional. Specifies where to start the search

Tips and Notes
Note: The indexOf() method is case sensitive!

Note: This method returns -1 if the string value to search for never occurs.

Example
In this example we will do different searches within a "Hello world!" string:

<script type="text/javascript">
var str="Hello world!";
document.write(str.indexOf("Hello") + "<br />");
document.write(str.indexOf("World") + "<br />");
document.write(str.indexOf("world"));
</script>

The output of the code above will be:

0
-1
6

Final code and demo is here

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title></head><body><h3>Search a string in JavaScript:</h3><script type="text/javascript">var str="Hello world!"; document.write("Search 'Hello' in 'Hello world!'"+"<br/>"+str.indexOf("Hello") + " (Found !!!)<br /><br />"); document.write("Search 'World' in 'Hello world!'"+"<br/>"+str.indexOf("World") + " (NotFound !!!)<br /><br />"); document.write("Search 'world' in 'Hello world!'"+"<br/>"+str.indexOf("world") + " (Found !!!)<br />"); </script>  </body></html>

Demo

Get year in JavaScript

The getYear() method returns the year, as a two-digit OR a four-digit number.

dateObject.getYear()

Tips and Notes
Note: The value returned by getYear() is not always 4 numbers! For years between 1900 and 1999 the getYear() method returns only two digits. For years before 1900 and after 1999 it returns four digits!
This method is always used in conjunction with a Date object.

Important: The getYear() method should no longer be used. Use the getFullYear() method instead!!

Example
In this example we get the current year and print it:

<script type="text/javascript">
var d = new Date()
document.write(d.getYear())
</script>

The output of the code above will be:

105

Example 2
Here we will extract the year out of the specific date:

<script type="text/javascript">
var born = new Date("July 21, 1983 01:15:00");
document.write("I was born in " + born.getYear());
</script>

Convert JSON string to object in PHP

json_decode — Decodes a JSON string. Takes a JSON encoded string and converts it into a PHP variable.

Returns the value encoded in json in appropriate PHP type. Values true, false and null are returned as TRUE, FALSE and NULL respectively. NULL is returned if the json cannot be decoded or if the encoded data is deeper than the recursion limit.

Eg:

<?php
$json = '
{
"color":"red",
"font-size":"12px",
"background-color":"#F5F5F5",
"height":"40px",
"width":"100%"
}';
var_dump(json_decode($json));
var_dump(json_decode($json, true));
?>

Output:

object(stdClass)#196 (5) {
["color"]=>
string(3) "red"
["font-size"]=>
string(4) "12px"
["background-color"]=>
string(7) "#F5F5F5"
["height"]=>
string(4) "40px"
["width"]=>
string(4) "100%"
}
array(5) {
["color"]=>
string(3) "red"
["font-size"]=>
string(4) "12px"
["background-color"]=>
string(7) "#F5F5F5"
["height"]=>
string(4) "40px"
["width"]=>
string(4) "100%"
}

Add www to your domain using htaccess

To automatically add a www to your domain name when there isn't a subdomain, add this to the htaccess file in your document root:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^[^.]+\.[^.]+$
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [L,R=301]

Onclick event in JavaScript

The onclick event occurs when an object gets clicked.

Syntax

onclick="SomeJavaScriptCode"

Parameter: SomeJavaScriptCode
Description: Required. Specifies a JavaScript to be executed when the event occurs.

Example
In this example the text in the first input field will be copied to the second input field when a button is clicked:

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title></head><body><h3>Onclick event in JavaScript:</h3>Field1: <input type="text" id="field1" value="Hello World!"><br />Field2: <input type="text" id="field2"><br /><br />Click the button below to copy the content of Field1 to Field2. <br /><button onclick="document.getElementById('field2').value= document.getElementById('field1').value">Copy Text</button></body></html>

Demo

Encode a set of form elements as a string for submission

The .serialize() method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements.

.serialize( )

Eg:

<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>

The .serialize() method can act on a jQuery object that has selected individual form elements, such as <input>, <textarea>, and <select>. However, it is typically easier to select the <form> tag itself for serialization:

$('form').submit(function()
{
alert($(this).serialize());
return false;
});

This produces a standard-looking query string:

a=1&b=2&c=3&d=4&e=5

Warning: selecting both the form and its children will cause duplicates in the serialized string.

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

Final code and demo is here

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><style>     </style><script>$(document).ready(function () { $('form').submit(function() {   alert($(this).serialize());   return false; }); }); </script></head><body><h3>Encode a set of form elements as a string for submission:</h3><form>  <div><input type="text" name="a" value="1" id="a" /></div><div><input type="text" name="b" value="2" id="b" /></div><div><input type="hidden" name="c" value="3" id="c" /></div><div><select name="e">    <option selected="selected" value="5">5</option>    <option value="6">6</option>    <option value="7">7</option>  </select></div><div><input id="f" name="f" type="checkbox" value="8" />  </div><div><input id="g" name="g" type="submit" value="Submit" />  </div>

Demo

What is gulp.js?

gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. It is a task runner built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization etc.

Getting Started

1) Install 'nodejs'
2) Create 'package.json'
3) Create 'gulpfile.js'
4) run 'gulp' command

Install 'nodejs'

After installing go to the project directory through 'Node.js command prompt' and check the version first

node --version
npm --version

Install the gulp command

npm install --global gulp-cli

Create a package.json

npm init

If you don't have a package.json, create one. If you need help, run an 'npm init' which will walk you through giving it a name, version, description, etc.
A sample file look like this

{
"name": "PROJECT_NAME",
"version": "PROJECT_VERSION",
"description": "PROJECT_DESCRIPTION",
"main": "",
"dependencies": {
"gulp": "^3.9.1"
},
"devDependencies": {
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-uglify": "^3.0.0",
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "AUTHOR",
"license": "ISC"
}

Install gulp in your devDependencies

npm install --save-dev gulp

Create a gulpfile

In your project directory, create a file named gulpfile.js in your project root.
A sample file look like this

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var paths = {
scripts: ['client/js/**/*.js']
};

gulp.task('clean', function() {
return del(['build']);
});
gulp.task('scripts', ['clean'], function() {
// Minify and copy all JavaScript (except vendor scripts)
return gulp.src(paths.scripts)
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('build/js'));
});

gulp.task('default', ['scripts']);

Run gulp

gulp

run 'gulp' command in 'Node.js command prompt'

After run gulp command all your 'js' files minimized and compressed to a single file 'all.min.js.' A folder 'build' will create in your project directory. It has another folder 'js'. This 'js' folder contains a single js file 'all.min.js'.

Free file and folder comparison tool for developers

Meld is a visual diff and merge tool targeted at developers. Meld helps you compare files, directories, and version controlled projects. It provides two- and three-way comparison of both files and directories.

Meld is packaged for most Linux/Unix distributions, including Fedora, Ubuntu, and Suse. Unless you want the absolutely latest version, you should install Meld through your package manager.

Features
Two- and three-way comparison of files and directories
File comparisons update as you type
Auto-merge mode and actions on change blocks help make merges easier
Visualisations make it easier to compare your files
Supports Git, Bazaar, Mercurial, Subversion, etc.

Visit: http://meldmerge.org/

Meld is licensed under the GPL v2, except as noted.

Is Qt supports JSON?

YES. Qt provides support for dealing with JSON data. JSON is a format to encode object data derived from Javascript, but now widely used as a data exchange format on the internet. The JSON support in Qt provides an easy to use C++ API to parse, modify and save JSON data. It also contains support for saving this data in a binary format that is directly "mmap"-able and very fast to access.

JSON is a format to store structured data. It has 6 basic data types:

bool, double, string, array, object, null

The text representation of JSON encloses arrays in square brackets ([ ... ]) and objects in curly brackets ({ ... }). Entries in arrays and objects are separated by commas. The separator between keys and values in an object is a colon (:).

A simple JSON document encoding a person, his/her age, address and phone numbers could look like:

{
"FirstName": "John",
"LastName": "Doe",
"Age": 43,
"Address": {
"Street": "Downing Street 10",
"City": "London",
"Country": "Great Britain"
},
"Phone numbers": [
"+44 1234567",
"+44 2345678"
]
}

JSON support in Qt consists of these classes:

QJsonArray	Encapsulates a JSON array
QJsonDocument	Way to read and write JSON documents
QJsonParseError	Used to report errors during JSON parsing
QJsonObject	Encapsulates a JSON object
QJsonObject::const_iterator	QJsonObject::const_iterator class provides an STL-style const iterator for QJsonObject
QJsonObject::iterator	QJsonObject::iterator class provides an STL-style non-const iterator for QJsonObject
QJsonValue	Encapsulates a value in JSON

Which are the supported databases in qt?

Qt5 supports SQLite, MySQL, DB2, Borland InterBase, Oracle, ODBC, and PostgreSQL.

The table below lists the drivers included with Qt. Due to license incompatibilities with the GPL, not all of the plugins are provided with Open Source Versions of Qt.

Driver name	DBMS
QDB2	IBM DB2 (version 7.1 and above)
QIBASE	Borland InterBase
QMYSQL	MySQL
QOCI	Oracle Call Interface Driver
QODBC	Open Database Connectivity (ODBC) - Microsoft SQL Server and other ODBC-compliant databases
QPSQL	PostgreSQL (versions 7.3 and above)
QSQLITE2	SQLite version 2
QSQLITE	SQLite version 3
QTDS	Sybase Adaptive Server Note: obsolete from Qt 4.7

How to check if a value is not a number in JavaScript?

The isNaN() function is used to check if a value is not a number.

Syntax

isNaN(number)

Parameter: number Required.
Description: The value to be tested

Example
In this example we use isNaN() to check some values:

<script type="text/javascript">
document.write(isNaN(123)+ "<br />");
document.write(isNaN(-1.23)+ "<br />");
document.write(isNaN(5-2)+ "<br />");
document.write(isNaN(0)+ "<br />");
document.write(isNaN("Hello")+ "<br />");
document.write(isNaN("2005/12/12")+ "<br />");
</script>

The output of the code above will be:
false
false
false
false
true
true

Final code and demo is here

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title></head><body><h3>How to check if a value is not a number in JavaScript?</h3><script type="text/javascript">document.write(isNaN(123)+ "<br />"); document.write(isNaN(-1.23)+ "<br />"); document.write(isNaN(5-2)+ "<br />"); document.write(isNaN(0)+ "<br />"); document.write(isNaN("Hello")+ "<br />"); document.write(isNaN("2005/12/12")+ "<br />"); </script></body></html>

Demo

Search and get the postion of an element in jquery

Load a JavaScript file dynamically

How to send HTTP request in spring boot?

Http status code quick reference

Change message converter to Gson in RestTemplate

Search a string in JavaScript

Get year in JavaScript

Convert JSON string to object in PHP

Add www to your domain using htaccess

Onclick event in JavaScript

Encode a set of form elements as a string for submission

What is gulp.js?

Getting Started

Install 'nodejs'

Create a package.json

Create a gulpfile

Run gulp

Free file and folder comparison tool for developers

Is Qt supports JSON?

Which are the supported databases in qt?

How to check if a value is not a number in JavaScript?

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form