JS TUTORIAL - Coding Help - Codinghelp.in

While loop with jQuery async AJAX calls

Coding Help — Mon, 08 Jan 2024 14:39:09 +0000

Using a while loop with AJAX in a web application might not be the best approach due to potential issues with blocking the browser’s main thread and causing poor user experience. Instead, it’s recommended to use asynchronous methods like callbacks, promises, or the newer async/await syntax in JavaScript.
While loop with jQuery async AJAX calls
However, if you have a specific use case where you need to repeatedly make AJAX requests in a loop, you can use the setTimeout function to create a delay between requests. Here’s an example using jQuery for simplicity:
html
html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AJAX Loop Exampletitle>

    

    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>


head>

<body>

    <button id="startLoopBtn">Start Loopbutton>

    <script>

        $(document).ready(function () {
// Click event for the button

            $("#startLoopBtn").click(function () {
// Define a function to make the AJAX request
functionmakeAjaxRequest() {

                    $.ajax({
url: 'your-api-endpoint',
method: 'GET',
success: function (response) {
console.log(response);
                            // Repeat the AJAX request after a delay (e.g., 3 seconds)

                            setTimeout(makeAjaxRequest, 3000);

                        },

                        error: function () {

                            console.log('Error in AJAX request');
                            // Repeat the AJAX request after a delay (e.g., 3 seconds)

                            setTimeout(makeAjaxRequest, 3000);

                        }

                    });

                }
                // Start the loop by making the initial AJAX request

                makeAjaxRequest();

            });

        });

    script>

body>

html>
In this example, the makeAjaxRequest function is defined to handle the AJAX request. After the request is completed (either successfully or with an error), it uses setTimeout to wait for a specified delay (in this case, 3 seconds) before making the next AJAX request. This creates a loop that repeats the AJAX requests at regular intervals.
Remember to replace 'your-api-endpoint' with the actual URL of your API endpoint. Keep in mind that long-running loops may have performance implications, so use them judiciously based on your application’s requirements.

The post While loop with jQuery async AJAX calls first appeared on Coding Help - Codinghelp.in.

Create Responsive Timeline – Timeline using html/css

Coding Help — Sat, 26 Aug 2023 10:00:43 +0000

Before we start, let me share a screenshot of the timeline that we’re going to create in this guide. For this guide, we want to create a timeline in our about us page to showcase milestones of our company. You can use it to showcase just about anything – the process remains the same.

Create Responsive Timeline – Timeline using html/css

Vertical CSS Timeline is essentially a design pattern to showcase events, milestones and processes in a chronological fashion to infuse simplicity into storytelling. While it’s not new to the web design world, web designers have started using it more and more over the past few years to create better user experience.

Steps to Create CSS Timeline

Step #1 — Create a Custom Body Class

Step #2 — Use HTML Markup in Your Content

Step #3 — Add CSS Snippets for Timeline

Step #4 — Customize CSS for Media Queries

Create a Custom Body Class

We’re going to create a custom body class so we can use a different background color, page-width and other necessary HTML markups for the timeline page.

To do this, simply open the page where you want to create the timeline. Under the layout settings, you should see Custom Body Class. Simply enter a unique class name. For example, for this guide, our body class name is “timeline-body”. You can give any name as per your liking. Note: Make sure it doesn’t clash with any other classes you’re already using in your theme.

Timeline using html/css











  
    
      2017
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2016
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2015
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2012
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2011
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
    
  
  
    
      2007
      Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

The post Create Responsive Timeline – Timeline using html/css first appeared on Coding Help - Codinghelp.in.

How to display data in modal popup

Coding Help — Sat, 26 Aug 2023 09:54:35 +0000

Bootstrap is a CSS framework used for designing web pages. Bootstrap v4.5 is the latest release. Bootstrap along with HTML and JavaScript can be used to build responsive web pages.

A modal is a popup or dialog box that requires some action to be performed. A modal. Bootstrap has inbuilt modal component. The modal consists of two parts the modal header and the modal body. Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used.

jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement.jQuery reduces the lines of code. The article demonstrates two examples where data is passed into the modal body from the HTML document body.

Example 1: In this approach, the web page consists of two input fields Name and Marks which accepts input from the user. The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method. Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.

How to display data in modal popup

Example 1:- Custom Alert Popup






	
	

	
	
	
	



	

		
		Name: 



		Marks: 



		
		

		
		
			
			
				
					
						
							Confirmation

Example 2:- Custom Alert Popup

Example 2: In this approach, a textarea is used to take input from the user. When the submit button is clicked, it invokes the jQuery function. The data entered the text area is extracted using the val() method into the text variable. This text string is passed to the modal body using the html() method of jQuery.






	
	

	
	
	
	



	

		
				

		
		
		

		
		
			
				
					
						
							Entered Data

The post How to display data in modal popup first appeared on Coding Help - Codinghelp.in.

Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after

Coding Help — Mon, 08 May 2023 12:38:15 +0000

Async and Defer difference || How to use Async and Defer || How to load JS and CSS before and after

Async and Defer difference ?

If you’re working with JavaScript, it’s important to understand the difference between Async and defer attributes. Async allows your script to run as soon as it’s loaded, without blocking other elements on the page. Defer means your script will only execute after the page has finished loading.

What is async and defer in HTML?

If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) If defer is present (and not async ): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

How to load JS and CSS before and after

For this, you should use Async and Defer in your script, both of these help you to load the script before and after

Async is more useful when you really don’t care when the script loads and nothing else that is user dependent depends upon that script loading. The most often cited example for using async is an analytics script like Google Analytics that you don’t want anything to wait for and it’s not urgent to run soon and it stands alone so nothing else depends upon it.

In general the jquery library is not a good candidate for async as other scripts depend on it and you want to install event handlers so that your page can start responding to user events and you need to do something to establish the initial state May need to run jQuery-based initialization code of the page. It can be used as async, but other scripts will have to be coded so that they don’t execute until jQuery is loaded.

How to use Async and Defer ?

Use async for the external scripts that don’t perform DOM manipulations. The async doesn’t guarantee the page rendering interruption when the script executes. Use defer for all the scripts that perform DOM manipulations. The scripts with the defer attribute execute in sequence at the end of the page load.

With respects to site load speed

Is there any advantage in adding async to the two scripts I have at the bottom of the page?
Would there be any advantage in adding the async option to the two scripts and putting them at the top of the page in the ?
Would this mean they download as the page loads?
I assume this would cause delays for HTML4 browsers, but would it speed up page load for HTML5 browsers?

Using

Step 4:- Now the Table Tag on which you want to run this Bootstrap Code has to be replaced with the following code


                    
                        
                            
                                Sr. No.
                            
                            
                                VLE DETAILS
                            
                            
                                Type/Date
                            
                            
                                Created
                            
                            
                                Balance
                            
                            
                                
                            
                            
                                
                            

                        
                       
                    
                    
                        
                        
                            1.
                            ST9999999999
Agent Name
999999999
                            RETAILER
19/12/2022
02:23:32pm
APPROVED
                            ST9999999999
DISTRIBUTOR
                            Rs.0
                            
                             Delete
                            
                            
                             Update
                            
                       
                    
                





                    
                        
                            
                                Sr. No.
                            
                            
                                VLE DETAILS
                            
                            
                                Type/Date
                            
                            
                                Created
                            
                            
                                Balance
                            
                            
                                
                            
                            
                                
                            

                        
                       
                    
                    
                        
                        
                            1.
                            ST9999999999
Agent Name
999999999
                            RETAILER
19/12/2022
02:23:32pm
APPROVED
                            ST9999999999
DISTRIBUTOR
                            Rs.0
                            
                             Delete
                            
                            
                             Update

Sr. No.	VLE DETAILS	Type/Date	Created	Balance
1.	ST9999999999 Agent Name 999999999	RETAILER 19/12/2022 02:23:32pm APPROVED	ST9999999999 DISTRIBUTOR	Rs.0	Delete	Update

Sr. No.	VLE DETAILS	Type/Date	Created	Balance
1.	ST9999999999 Agent Name 999999999	RETAILER 19/12/2022 02:23:32pm APPROVED	ST9999999999 DISTRIBUTOR	Rs.0	Delete	Update

Step 5:-
to
you have to change then save and check
Step 6:- Then a table like this will come in front of you

hope that helped you thanks
The post Data Table List With Search, Previous and Next, Show number Entries || User List or Data Table List Css js html first appeared on Coding Help - Codinghelp.in.

Search value from Input box in mysql php

Coding Help — Sat, 17 Sep 2022 11:39:15 +0000

You can create a simple live database search functionality utilizing the Ajax and PHP, where the search results will be displayed as you start typing some character in search input box.

In this tutorial we’re going to create a live search box that will search the countries table and show the results asynchronously. But, first of all we need to create this table.

Search value from Input box in mysql php

To find any kind of value from any database, you will need, first database from which you will search the value, second you want to implement this script in which index file, you want that page, as well as a hidden-search.php file has to be created from where the output of the value entered by the visitor will be forwarded to you on the index.php page

Stage 1: Making the DataBase Table In PHP My Admin

Execute the accompanying SQL question to make the nations table in your MySQL data set.

CREATE TABLE state_name ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL );

In the wake of making the table, you want to populate it for certain information utilizing the SQL Supplement articulation. On the other hand, you can download the prepopulated nations table by tapping the download button and import it in your MySQL data set.

Stage 2: Making the Pursuit Structure

Presently, we should make a basic web interface that permits client to live hunt the names of nations accessible in our nations table, very much like an autocomplete or typeahead.

Make a PHP record named “index.php” and put the accompanying code within it.

PHP Live MySQL Database Search

Each time the substance of search input is changed or keyup occasion happen on search input the jQuery code (line no-47 to 67) sent an Ajax solicitation to the “backend-search.php” document which recovers the records from nations table connected with the looked through term. Those records later will be embedded inside a
by the jQuery and showed on the program.

Stage 3: Handling Search Question in Backend

Also, here’s the source code of our “hidden-search.php” document which look through the data set in light of question string sent by the Ajax demand and send the outcomes back to program.

0){ // Fetch result rows as an associative array while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ echo "" . $row["name"] . ""; } } else{ echo "No matches found"; } } else{ echo "ERROR: Could not able to execute $sql. " . mysqli_error($coorection); } } // Close statement mysqli_stmt_close($stmt); } // close connection mysqli_close($coorection); ?>

The SQL SELECT proclamation is utilized in blend with the LIKE administrator (line no-16) to find the matching records in nations data set table. We’ve carried out the pre-arranged articulation for better hunt execution as well as to forestall the SQL infusion assault.
The post Search value from Input box in mysql php first appeared on Coding Help - Codinghelp.in.

How to detect Adblock on my website?

Coding Help — Tue, 19 Apr 2022 09:40:30 +0000

If you enter to that site and your browser has some kind of adblock software enabled, then the site instead of showing the actual ads shows a little banner telling the users that the ad revenue is used for hosting the project and they should consider turning Adblock off.

This one works good

if there’s an adBlocker it will alert you

The post How to detect Adblock on my website? first appeared on Coding Help - Codinghelp.in.

Select tag with input tag display none or block | How can I show a hidden div when a select option is selected?

Coding Help — Tue, 29 Mar 2022 09:28:54 +0000

Select tag with input tag display none or block

How can I show a hidden div when a select option is selected?

This is a hidden div

The post Select tag with input tag display none or block | How can I show a hidden div when a select option is selected? first appeared on Coding Help - Codinghelp.in.

Right Click Disable Code – Copy Past Disable Code

Coding Help — Thu, 27 Jan 2022 14:07:54 +0000

Right Click Disable Code Copy Past Disable Code
The post Right Click Disable Code – Copy Past Disable Code first appeared on Coding Help - Codinghelp.in.

Simple calculator program in Java source code

Coding Help — Sun, 23 Jan 2022 08:26:51 +0000

Simple calculator program in Java source code

>

<html>

    <head>

    <meta charset=“utf-8”>

    <title>

         Calculator using HTML Example

    title>

    <link href=“https://fonts.googleapis.com/css2?family=Cookie&display=swap” rel=“stylesheet”>



        calculator interface —>

    <style>

    html {

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #2d3436;

  background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);

  font-family: ‘Cookie’, cursive;

}

.title {

margin-bottom: 10px;

padding: 5px 0;

font-size: 40px;

font-weight: bold;

text-align: center;

color: red;

font-family: ‘Cookie’, cursive;

}

input[type=button] {

  width: 60px;

  height: 60px;

  float: left;

  padding: 0;

  margin: 5px;

  box-sizing: border-box;

  background: #ecedef;

  border: none;

  font-size: 30px;

  line-height: 30px;

  border-radius: 50%;

  font-weight: 700;

  color: #5E5858;

  cursor: pointer;

}

input[type=text] {

  width: 270px;

  height: 60px;

  float: left;

  padding: 0;

  box-sizing: border-box;

  border: none;

  background: none;

  color: red;

  text-align: right;

  font-weight: 700;

  font-size: 60px;

  line-height: 60px;

  margin: 0 25px;

  }

.calculator {

  background-color: #c0c0c0;

  box-shadow: 0px 0px 0px 10px #666;

  border: 5px solid black;

  border-radius: 10px;

}

#display {

  height: 40px;

  text-align: right;

  background-color: black;

  border: 3px solid white;

  font-size: 18px;

  left: 2px;

  top: 2px;

  color: red;

}

.btnTop {

  color: white;

  background-color: #6f6f6f;

  font-size: 14px;

  margin: auto;

  width: 50px;

  height: 25px;

}

    style>

head>

<body>

    <div class = “title”  align=“center”>

        Example of Calculator using HTML

    div>

    <form name=“Calculator” class = “calculator” >

<table border=“2” align=“center” cellpadding=“15” cellspacing=“12” bgcolor=“#c0c0c0”>

<tr>

<td>

<input type=“text” name=“Input” Size=“35” id=“display”>

<br>

td>

tr>

<tr>

<td>

<input type=“button” name = “one” style=“font-size:30px” value=” 1 “ OnClick=“Calculator.Input.value += ‘1’”>

<input type=“button” name = “two” style = “font-size:30px” value=” 2 “ OnCLick=“Calculator.Input.value += ‘2’”>

<input type=“button” name = “three” style=“font-size:30px” value=” 3 “ OnClick=“Calculator.Input.value += ‘3’”>

<input type=“button” name=“add” class =“btnTop” style=“font-size:30px” value=” + “ OnClick=“Calculator.Input.value += ‘ + ‘”>

<br>

<input type=“button” name = “four” style=“font-size:30px” value=” 4 “ OnClick=“Calculator.Input.value += ‘4’”>

<input type=“button” name = “five” style=“font-size:30px” value=” 5 “ OnCLick=“Calculator.Input.value += ‘5’”>

<input type=“button” name = “six” style=“font-size:30px” value=” 6 “ OnClick=“Calculator.Input.value += ‘6’”>

<input type=“button” name = “minus” style=“font-size:30px” value=” – “ OnClick=“Calculator.Input.value += ‘ – ‘”>

<br>

<input type=“button” name = “seven” style=“font-size:30px” value=” 7 “ OnClick=“Calculator.Input.value += ‘7’”>

<input type=“button” name = “eight” style=“font-size:30px” value=” 8 “ OnCLick=“Calculator.Input.value += ‘8’”>

<input type=“button” name = “nine” style=“font-size:30px” value=” 9 “ OnClick=“Calculator.Input.value += ‘9’”>

<input type=“button” name = “mul” style=“font-size:30px” value=” * “

OnClick=“Calculator.Input.value += ‘ * ‘”>

<br>

<input type=“button” name = “clear” style=“font-size:30px” value=” c “ OnClick=“Calculator.Input.value = ””>

<input type=“button” name=“zero” style=“font-size:30px” value=” 0 “ OnClick=“Calculator.Input.value += ‘0’”>

<input type=“button” name=“DoIt” style=“font-size:30px” value=” = “ OnClick=“Calculator.Input.value = eval(Calculator.Input.value)”>

<input type=“button” name=“div” style=“font-size:30px” value=” / “ OnClick=“Calculator.Input.value += ‘ / ‘”>

<br>

td>



tr>

table>

form>

body>

html>

Example 2:

>

<html>

    <head>

    <meta charset=“utf-8”>

    <title>

         Calculator using HTML Example

    title>

    <link href=“https://fonts.googleapis.com/css2?family=Cookie&display=swap” rel=“stylesheet”>



        calculator interface —>

    <style>

body

{

background-color: tan;

}

.box

{

background-color: #3d4543;

height: 300px;

width: 270px;

border-radius: 10px;

position: relative;

top: 80px;

left: 40%;

}

.display

{

background-color: #222;

width: 220px;

position: relative;

left: 15px;

top: 20px;

height: 40px;

}

.display input

{

position: relative;

left: 2px;

top: 2px;

height: 35px;

color: black;

background-color: #bccd95;

font-size: 21px;

text-align: right;

}

.keys

{

position: relative;

top: 15px;

}

.button

{

width: 40px;

height: 30px;

border: none;

border-radius: 8px;

margin-left: 17px;

cursor: pointer;

border-top: 2px solid transparent;

}

.button.gray

{

color: black;

font-color: black;

background-color: #6f6f6f;

border-bottom: black 2px solid;

border-top: 2px #6f6f6f solid;

}

.title:hover {

   color: #fff;

}

.title {

margin-bottom: 10px;

margin-top: 30px;

padding: 5px 0;

font-size: 40px;

font-weight: bold;

text-align: center;

color: black;

font-family: ‘Cookie’, cursive;

}



.button.pink

{

color: black;

background-color: #ff4561;

border-bottom: black 2px solid;

}

.button.black

{

color: black;

background-color: 303030;

border-bottom: black 2px solid;

border-top: 2px 303030 solid;

font-weight: bold;

}

.button.orange

{

color: black;

background-color: FF9933;

border-bottom: black 2px solid;

border-top: 2px FF9933 solid;

}

.gray:active

{

border-top: black 2px solid;

border-bottom: 2px #6f6f6f solid;

}

.pink:active

{

border-top:black 2px solid;

border-bottom:#ff4561 2px solid;

}

.black:active

{

border-top: black 2px solid;

border-bottom: #303030 2px solid;

}

.orange:active

{

border-top: black 2px solid;

border-bottom: FF9933 2px solid;

}

p

{

line-height: 10px;

}

style>

head>

<body>

    <div class = “title? align=”centre“>

        Example of Calculator using HTML

    div>

    <div class=“box”>

        <div class=“display”>

        <input type=“text” readonly size=“18” id=“d”>

        div>

        <div class=“keys”>

               <p> <input type=“button” class=“button gray” value=“mrc” onclick=‘c(“Created………………..”)’>

               <input type=“button” class=“button gray” value=“m-“ onclick=‘c(“……………by…………”)’>

               <input type=“button” class=“button gray”

value=“m+” onclick=‘c(“…………………Anoop”)’>

<input type=“button” class=“button pink” value=“/” onclick=‘v(“/”)’> p>

               <p> <input type=“button” class=“button black” value=“7” onclick=‘v(“7”)’>

               <input type=“button” class=“button black” value=“8” onclick=‘v(“8”)’>

               <input type=“button” class=“button black” value=“9” onclick=‘v(“9”)’>

               <input type=“button” class=“button pink” value=“*” onclick=‘v(“*”)’> p>

               <p> <input type=“button” class=“button black” value=“4” onclick=‘v(“4”)’>

               <input type=“button” class=“button black” value=“5” onclick=‘v(“5”)’>

               <input type=“button” class=“button black” value=“6” onclick=‘v(“6”)’>

<input type=“button” class=“button pink” value=“-“ onclick=‘v(“-“)’> p>

               <p> <input type=“button” class=“button black” value=“1” onclick=‘v(“1”)’>

               <input type=“button” class=“button black” value=“2” onclick=‘v(“2”)’>

               <input type=“button” class=“button black” value=“3” onclick=‘v(“3”)’>

               <input type=“button” class=“button pink” value=“+” onclick=‘v(“+”)’> p>

               <p> <input type=“button” class=“button black” value=“0” onclick=‘v(“0”)’>

               <input type=“button” class=“button black” value=“.” onclick=‘v(“.”)’>

               <input type=“button” class=“button black” value=“C” onclick=‘c(“”)’>

               <input type=“button” class=“button orange” value=“=” onclick=‘e()’> p>

        div>

div>

body>

<script>

function c(val)

{

document.getElementById(“d”).value=val;

}

function v(val)

{document.getElementById(“d”).value+=val;

}

function e()

{

try

    {

     c(eval(document.getElementById(“d”).value))

    }

    catch(e)

    {

     c(‘Error’) }

}

script>

html>

The post Simple calculator program in Java source code first appeared on Coding Help - Codinghelp.in.