Change image source dynamically on hyperlink

 Changing image source dynamically using JQuery. Here in this example I have created there hyperlink and stored all images in the same folder/directory.

<script>  

  $('.img1').on('click',  function() {

    $('#image').prop('src', "2.jpeg");

});

 $('.img2').on('click',  function() {

    $('#image').prop('src', "1.jpg");

});

$('.img3').on('click',  function() {

    $('#image').prop('src', "3.jpg");

});

</script>

Complete Example -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

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

</head>

<body>

 <center>

  <img id="image" src="" style="margin-left:25%;margin-right:25%" height=80 width=80>

        <a  class="img1" href="#" title="image1">Image 1</a>

<a  class="img2" href="#" title="image2">Image 2</a>

<a  class="img3" href="#" title="image1">Image 1</a>

<script>  

  $('.img1').on('click',  function() {

    $('#image').prop('src', "2.jpeg");

});

 $('.img2').on('click',  function() {

    $('#image').prop('src', "1.jpg");

});

$('.img3').on('click',  function() {

    $('#image').prop('src', "3.jpg");

});

</script>

</center>

</body>

</html>

Dynamically create hypertext and hyperlink using JQuery.

 Creating hypertext and hyperlink is a very easy task in JQuery. Using .append() function, we can create hypertext and using .attr(), we can create hyperlink. See how.

 $("a").append(" <b>Link created, click here</b>."); //append/create link to hyper text

The above function will append/create a hypertext to anchor the link.

 $("a").attr("href", "https://arvindignou.blogspot.com"); //create hyperlink

The above .attr() funntion will create link/hyperlink of anchor tag.

Complete example:-

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

      $("a").append(" <b>Link created, click here</b>."); //append/create link to hyper text

   $("a").attr("href", "https://arvindignou.blogspot.com"); //create hyperlink

  });

});

</script>

</head>

<body>

<a href=""></a>   <!- dynamically hypertext and hyperlink will be created here-!>

</br>

<button id="btn1">Create Hyperlink and Hypertext</button>

</body>

</html>

File listing and download using hyperlink in JSP from any folder.

Why I am writing this blog? In network some times we don't have server/FTP server(I personally think that it is not more interactive, i.e it can't be in a form of web page) and we have to share any file/s to more than 50 people, then we stuck in messages like "No more connections can be made.. bla bla bla" or either network restriction policy don't allow to do so. Apart from this there may be other issues that can stop to access shared folders in network. I have seen all these kind of problem in accessing shared documents.

So I tried to make web page like application where user can view and download their files via web page. For that you require obviously Tomcat Server for running JSP pages.

So, you should have working knowledge of Tomcat Server.

Create a JSP page and save in your project directory and use this code.

   <p><% 
File folder = new File("G:\\tomcatserver\\webapps\\softshare\\share\\fonts");
File[] listOfFiles = folder.listFiles();
%><table><%
     for (int i = 0; i < listOfFiles.length; i++) {
      if (listOfFiles[i].isFile()) {
String pp="share/fonts/"+listOfFiles[i].getName();
%><tr><td width="500px"><a href="<%=pp%>"><%=listOfFiles[i].getName()%></a><%
   %></td><td><%
Path path=Paths.get(listOfFiles[i].getPath());
BasicFileAttributes attr = Files.readAttributes(path, BasicFileAttributes.class);
out.println(attr.creationTime().toString().substring(0,10));
out.println(" </td></tr>");
      }
    }
%></table><%
 %></p>

Now lets see the code in details-

File folder = new File("G:\\tomcatserver\\webapps\\softshare\\share\\fonts"); //path of folder
File[] listOfFiles = folder.listFiles(); // will store file in array.

This code will read the files of fonts/ folder. The font folder should be in your project directory, it should not be out your tomcat server.

 String pp="share/fonts/"+listOfFiles[i].getName();

pp will store the relative path of files.

Now you will be able to list and download your file via hyperlink.

Send data with hyperlink via URL in JSP/JAVA

We all know that we send data to another page using form or using session variables. But, some time we have to send data to another page using hyperlink. Suppose, we have fetched data from database and made id as hyperlink and clicking on it we do some operation like edit, delete or some thing else.

Let's see how we can do it in simple JSP page.

Here you can see update and delete is associated with each record in the form of hyperlink.

Code is-

<td><a href='updaterecord.jsp?srno=<%=rs.getInt(1)%>' target='blank'>Update</td>
<td><a href='deleterecord.jsp?srno=<%=rs.getInt(1)%>' target='blank'>Delete</td>

Using hyperlink we send the srno(primary key- fetched by rs.getInt(1)) of corresponding record to updaterecord.jsp and deleterecord.jsp pages with the help of srno variable.

When we click on update and delete hyperlink the rs.getInt(1) data sent to another page using srno variable via URL. See the URL after clicking on link

 Now on updaterecord.jsp page we can receive srno variable  value using

                  int search=Integer.parseInt(request.getParameter("srno"));

After getting srno of that particular record, we can do anything related to this record.