How to create custom pagination without datatable in laravel microservice

Step 1:create button input in blade file

Step 2: declare variable like curtpage, pagelimit and total record

when you click the button then apply business logic inside jquery/javascript function

Step 3: when we get data after ajax success function then apply logic

Step 4: set routing in client side

Route::prefix(‘/touroperator’)->group(function () use ($namespace) {

Route::get('iternarydetail/{email}',"$tourcontroller@getiternary");

});

Step 5: get token and client id in client side controller using function

Step 6: set env and config flie

GET_MYHOLIDAYITERNARY_URL=/api/v1/j/iternarydetail

Step 6:set Routing in server side

 Route::get(‘iternarydetail/{email}’, ‘Admin\AdminTPController@iternarydetail’);

Step 7: apply pagination query inside sever side controller function

finally output view looks like

Tagged : /

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 : / / / /

AJAX Setup/ Installation

Ajax is a web development technique designed to create highly responsive/ interactive websites. To have a better understanding of AJAX we need to have knowledge of javascript and somewhat XML.

The easiest way of implementing AJAX, is by using jQuery.

To add jQuery

We can use the downloaded version from (jquery.com/download/) and we need to include the file location of the file in the script under the header tag, or we can use the CDN in the head of HTML as

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

After we are good to go with the operations we need to perform. If we wanna test that the CDN works fine we can use the function below in the body of the HTML script

<script>
$(document).ready(function(){
    alert("jQuery Works")
});
</script>

If we see the jQuery works alert, That mean we can congratulate ourselves on our success.

For knowing what is AJAX and its procedure https://www.scmgalaxy.com/tutorials/a-brief-description-of-ajax/

Tagged : / / /

A Brief Description of AJAX

AJAX stands for Asynchronous JavaScript And XML.

It is a web development technique that helps to create a highly responsive website. by the use of AJAX, we get desktop-like software experience on the web browser. It is used in the web pages to be updated asynchronously by changing data with a web server behind the scene (in the background). This makes it possible to update parts of a web page, without reloading the whole page. It is the use of the XMLHttpRequest object to communicate with server-side scripts.

The easiest way of implementing AJAX, especially if we’re planning on communicating with servers is by using jQuery.

Most people get confused with the concept that ajax is a programming language. So, let’s be very clear that

Ajax is not a programming language, it is a web development technique designed to create highly responsive/ interactive websites. To have a better understanding of AJAX we need to have knowledge of javascript and somewhat XML.

Javascript is a scripting language that helps to make web pages interactive, CSS (Cascading style sheet) style sheet to the makeup of the webpage and XML (extensible markup language ) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. here javascript and CSS are essentials and XML is less essential for the beginners

Why use AJAX

  1. A whole page reload is not required on each request made.
  2. Sends and receives data in the background.
  3. Improves speed and performance.
  4. Provides a better user experience.

How AJAX works

Ajax uses XMLHttpRequest object (also called XHR objects) to achieve this

  1. When the user sends a request from the interface then the javascript directs to the XMLHttpRequest object.
  2. Then the HTTP Request is made to the server by XMLHttpRequest object.
  3. Then the server interacts with the database using the JSP, PHP, Servlet, ASP.net, etc.
  4. When there is a match for the request then the Data is retrieved from the database.
  5. Then the Server sends XML data or JSON data to the XMLHttpRequest callback function.
  6. Finally, when all the things are good to go then the web-page made (with HTML and CSS) is displayed on the browser.
How AJAX works

For knowing the installation/setup procedure link is given below https://www.scmgalaxy.com/tutorials/ajax-setup-installation/

Tagged : / /