How to set a selected option using ajax in Laravel 5.6?

Hey friends, I am trying to show database column data in my edit form of a Laravel project. yesterday I failed to show data from database in a select list using ajax. so let’s see the below blade file and ajax also to get your solution.

edit.blade.php
<div class="form-group">
  <label for="Blood_Group">Blood Group</label>
	<select class="form-control" id="bgroup" name="bgroup">
	  <option value="" disabled selected>Select BG</option>
	  <option value="O+">O+</option>
	  <option value="O-">O-</option>
	  <option value="A+">A+</option>
	  <option value="A-">A-</option>
	  <option value="B+">B+</option>
	  <option value="B-">B-</option>
	  <option value="AB+">AB+</option>
	  <option value="AB+">AB-</option>
	</select>
</div>
profile.js
$.ajax({
	type: "GET",
	url: 'addprofile',
	data: null,
	success: function(response) {
          let data = response.data;
          $("#bgroup").append('<option value=' + data[0].bgroup+ '>' + data[0].bgroup+ 
           '</option>');

        }
});

Error : updated data from database is not showing in selected list when i am trying to update it again.

Solution :
$("#bgroup").val(data[0].bgroup).attr('selected','selected');

You can also use below code:

$('#bgroup option[value="' + data[0].bgroup+ '"]').prop('selected', true);

Above solution is working for me. so if you have more solution on select option then please feel free to comment and share your knowledge.

Resources :

  1. Click here
  2. Click here

Tagged : / / / /

Debugging JavaScript with Chrome DevTools Breakpoints

To debug JavaScript in Google Chrome use Developer Tools
To set a breakpoint, simply click on the grey margin where you see line numbers in the Sources tab
Stepping through the code-

Step Over – F10
Step into – F11
Step out Shift+F11
Continue F8

You can also use the following buttons in the Developer tools to step through the code-

To set a conditional breakpoint, right click on the grey margin and select “add conditional breakpoint”

The Call Stack panel displays the complete excetion path and in this path where you want to breakpoint add select any line where auto color blue background that means javascript excution pouse at breakpoint.

If you want to find a individual id then press

Ctrl+shift+I

and go to console tab and select

Ctrl+shift+F

and paste any id and press enter

Tagged : / / / /

Intorduction to JavaScript-From Validation

What is form validation?

when we got to any of popular site to register, we notice that they provide feedback when we didn’t fill the data or filled in correct format. we will get message such as:-

“This field is requied(when we leave the field blank).”

“Please enter your phone number in the format XXXXX”(When the data entered is not in correct format).

“Please enter the valid email address.”( when the email entered is not in correct format).

” Password needs to be between 8 to 20 character long and must contain one upper case letter, one symbol and a number.”( A very specific data format is required for the data).

This is called form validation.

OR

Before submitting the data to the server, it is important to ensure that all the fieds are correctly filled. This is called client side validation. It help us to ensure that the data entered matches the requirement. If the data entered is incorrect or simply missing, the server send the data back to the client requesting to resubmit the form with correct data.

There are two types or validation:-

  1. Client side validation:- When the validation is done on the browser is called client side validation.
  2. Server side validation:- when then the validation is done on server is called server side validation.

Three main reasons of validation:

  1. We want to get the right data, in the right format.
  2. We want to protect our users data.
  3. We want to protect ourselves.

Different types of client side varification:-

There are two types of validation:-

  1. built-in form validation:– It uses the HTML5 validation features. This validation generally doesn’t require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not customizable as JavaScript validation.
  2. JavaScript:- JavaScript validation is coded using JavaScript. this is completely customizable, but we need to create it or use a library.

Form validation performs 2 functions:-

  1. Basic validation:- In this validation the is checked that all the mandatary fields must be filled.
  2. Data Format Validation:- In this validation it is checked that all the filled data must be of correct form and value.

Using built-in form validation

One of the most significant features of html5 is the ability to validate user data without relying on JavaScript. This is done by using the validation attributes on form elements. Some of the attributes are written below:

  1. required: It specifies that whether a form field needs to be filled in before submitting.
  2. minlength: Specifies minimum length of the data.
  3. maxlength: Specifies the max length of the data.
  4. pattern: Specifies a regular expression that defines the entered data need to be follow.

Tagged : /

What is javascript

Introduction:-javascript is an object oriented programming language used by several websites for scripting  webpages. It is an interpreated programming language which enables dynamic interactivity on websites.

Features of javascript:-

1.all the websites support javascript, they provide built in execution environment.

2. it is a structured programming, it follows c programming language syntax and structure.

3. it is a case sensitive programming language.

4. it is a light weight interpreated language.

5. it is supportable in several operating system including macOS, windows etc.

Places to put JavaScript code:-

  1. Between head tag.
  2. Between body tag.
  3.  In external file(.js file)

javascriptComment:- it is a meaningful way to deliver messange,warning,suggestion or information about the code .

there are 2 types of javascript comment:

  1. Single-line comment
  2. Multi-line comment
  3. Single line comment:-  single line comment is used by adding forward slashes(//) before the line.
  4. Multi line comment:- it is represented by forward slash with asterisk then asterisk with forward slash.

Example:-/* code is here*/

JavaScript variable:- variable in javascript is a name of storage location.

There are 2 types of variables:-

  1. Local variable
  2. Global variable

Local variable:- Javascript local variable is declared inside the lock or function. It is accessible within the function or block.

Global variable:- It is declared outside the function and accessible from any function.

Javascript datatypes:-Datatypes hold different types of values.

There are two types of data types:-

  1. Primitive data type(string,number,Boolean undefined,null)
  2. Non-primitive data type(object,Array,RegExp)

Javascript operators:-

. javascript operators are the symbol which are used to perform operations on operands

1.Arithmetic Operators

2. Comparison (relational) operators

3. Bitwise Operators

4. logical Operatiors

5. Assignment Operators

6. Special Operators

Javascript if-else:

If else statement is used to execute wheather condition is true or false.

There are three forms of if ststements in javascript:-

  1. If statement
  2. If else statement
  3. If else if statement
Tagged :

WHAT IS AJAX?

                                 

Introduction:- AJAX stands for Asynchronous Javascript And XML. AJAX is used for fast creating dynamic web pages. It allow web pages to be updated asynchronously by exchanging some amount of data with the server behind the scenes. It is possible to update some parts of a web page without reloading the whole page. There are many web applications that run on ajax example:- gmail,facebook,twitter,google map, youtube etc.

Understanding synchronous and asynchronous:-

Synchronous:- The synchronous request blocks the client until the operation completes.

Asynchronous:-  Asynchronous request doesn’t block the client. At the time when the request is processing, user can perform another operation.

Some AJAX technologies:-

As we know ajax is not a technology but group of inter related technologies.some of the technologies is given below:

1.HTML/XHTML and CSS

2.XML and JSON

3.DOM

4.XMLHttpRequest

5.javascript

  1. HTML/XHTML and CSS:- These are the technologies which are used for developing front end of a websites and styling.
  2. XML and JSON:- It is used for carrying data to and from the server
  3. DOM:- It is used for dynamic display and interaction with the data.
  4. XMLHttpRequest:- It is used for asynchronous communication between client and server .
  5. Javascript:-It is a text based programming language used client side and server side both. Javascript allows to make the web pages imteractive.

HOW AJAX WORKS:-

AJAX communicates with the server using XMLHttpRequest. The user sends the request from the UI and the javascript call goes to XMLHttpRequest object. Then the Http request is send to the server. Then the server interact with the database and data is retrived. The server sends te data to the XMLHttpRequest callback function. And HTML and CSS data is displayed on the browser.

Tagged : / / /

A brief description of JAVASCRIPT

Definition from Wikipedia:-

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

Let’s understand what javascript actually is: JAVASCRIPT is a scripting language that helps us in creating dynamic content, It also helps animating images, controlling multimedia, and many more things. It acts functionality to the webpages making it more interactive to the users.

What generally makes confusion (JAVA AND JAVASCRIPT)

people generally get confused with the terms java and javascript that java is the same as javascript. but that’s not the case. Java is a programming language, and Javascript is a scripting language that is used to script web pages. Initially, JavaScript had a name: “LiveScript”. But Java was very popular at that time, so it was decided that positioning a new language as a “younger brother” of Java would help.

Why javascript was created:- JavaScript was initially created to “make web pages alive”.

Where are Javascript used:

  • Creating mobile applications—JavaScript isn’t just for website scripting. Its also used for the creation of mobile apps on phones and tablets as well.
  • Developing web browser-based games—Some day or the other we would have played a game directly from your web browser. JavaScript helps to make that happen.
  • Interactivity in websites—We’ll need to do some JavaScripting, If we want a website to be more than a static page of text,
  • Back-end web development— JavaScript is Mostly used on the front end of things, but it’s a versatile enough scripting language to be used on back-end infrastructure, too.

Let’s have a look at the javascript release date and different versions

JavaScript was invented by Brendan Eich in 1995 and became an ECMA standard in 1997. ECMAScript is the official name of the language. ECMAScript versions are abbreviated as ES1, ES2… E6. Since 2016 new versions are named by year (ECMAScript 2018 / 2019 / 2020 / 2021).

Get to know about JavaScript variables and their uses then Click here

Get to know about JavaScript registration form validation then Click here.

Tagged : / / / / / / / / /

Javascript and its Reserve Keywords

JavaScript is a lightweight, interpreted programming language in the world and that makes it a programmer’s great choice. Javascript helps us developing great front-end as well as back-end softwares using different Javascript based frameworks like jQuery, Node.JS etc.\

Here, I would like to talk about the reserved keywords in the Javascript. Keywords are reserved words in JavaScript that we should not use to indicate names for variables, methods, classes, or as any other identifier.

KeywordDescription
abstractA non-access modifier. Used for classes and methods: An abstract class cannot be used to create objects (to access it, it must be inherited from another class). An abstract method can only be used in an abstract class, and it does not have a body. The body is provided by the subclass (inherited from)
assertFor debugging
booleanA data type that can only store true and false values
breakBreaks out of a loop or a switch block
byteA data type that can store whole numbers from -128 and 127
caseMarks a block of code in switch statements
catchCatches exceptions generated by try statements
charA data type that is used to store a single character
classDefines a class
continueContinues to the next iteration of a loop
constDefines a constant. Not in use – use final instead
defaultSpecifies the default block of code in a switch statement
doUsed together with while to create a do-while loop
doubleA data type that can store whole numbers from 1.7e−308 to 1.7e+308
elseUsed in conditional statements
enumDeclares an enumerated (unchangeable) type
exportsExports a package with a module. New in Java 9
extendsExtends a class (indicates that a class is inherited from another class)
finalA non-access modifier used for classes, attributes and methods, which makes them non-changeable (impossible to inherit or override)
finallyUsed with exceptions, a block of code that will be executed no matter if there is an exception or not
floatA data type that can store whole numbers from 3.4e−038 to 3.4e+038
forCreate a for loop
gotoNot in use, and has no function
ifMakes a conditional statement
implementsImplements an interface
importUsed to import a package, class or interface
instanceofChecks whether an object is an instance of a specific class or an interface
intA data type that can store whole numbers from -2147483648 to 2147483647
interfaceUsed to declare a special type of class that only contains abstract methods
longA data type that can store whole numbers from -9223372036854775808 to 9223372036854775808
moduleDeclares a module. New in Java 9
nativeSpecifies that a method is not implemented in the same Java source file (but in another language)
newCreates new objects
packageDeclares a package
privateAn access modifier used for attributes, methods and constructors, making them only accessible within the declared class
protectedAn access modifier used for attributes, methods and constructors, making them accessible in the same package and subclasses
publicAn access modifier used for classes, attributes, methods and constructors, making them accessible by any other class
requiresSpecifies required libraries inside a module. New in Java 9
returnFinished the execution of a method, and can be used to return a value from a method
shortA data type that can store whole numbers from -32768 to 32767
staticA non-access modifier used for methods and attributes. Static methods/attributes can be accessed without creating an object of a class
strictfpRestrict the precision and rounding of floating point calculations
superRefers to superclass (parent) objects
switchSelects one of many code blocks to be executed
synchronizedA non-access modifier, which specifies that methods can only be accessed by one thread at a time
thisRefers to the current object in a method or constructor
throwCreates a custom error
throwsIndicates what exceptions may be thrown by a method
transientA non-accesss modifier, which specifies that an attribute is not part of an object’s persistent state
tryCreates a try…catch statement
varDeclares a variable. New in Java 10
voidSpecifies that a method should not have a return value
volatileIndicates that an attribute is not cached thread-locally, and is always read from the “main memory”
whileCreates a while loop

Also, in addition to that we should keep in mind that true, false, and null are not keywords, but they are literals and reserved words that also cannot be used as variables, methods, classes, or as any other identifier.

You can refer the link below to see a video for Reserve keywords in javascript:

Tagged : /