setting src of image tag dynamically using jquery

Question

I am using Struts in my project. I want that whenever my page loads one ajax call should be there which will populate ArrayList with objects in my Action class which contains image link.I am using this arraylist in my jsp page to populate image src.I am new to jquery so please see if you can help.Thanks in advance.

Home.java

package com.rst;

import java.util.ArrayList;
import java.util.List;

import org.hibernate.Session;

import com.opensymphony.xwork2.ActionSupport; 
import com.opensymphony.xwork2.ModelDriven;

public class Home extends ActionSupport{

    Product product = new Product();
    DAO d = new DAO();
    List<Product> products = new ArrayList<Product>();

    public String execute(){
        try{
            Session session = HibernateUtil.getSessionFactory().openSession();
            System.out.println("in action");
            products = d.getImages(session);

            for(Product p:products){
                System.out.println(p.getProduct_name());
            }
        }
        catch(Exception e){
            e.printStackTrace();
        }
        return SUCCESS;
}


public Product getProduct() {
    return product;
}

public void setProduct(Product product) {
    this.product = product;
}

public List<Product> getProducts() {
    return products;
}

public void setProducts(List<Product> products) {
    this.products = products;
}
}

DAO.java

package com.rst;

import java.util.ArrayList;
import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.Transaction;

public class DAO {


public List<Product> getImages(Session session){

    Transaction t = session.beginTransaction();

    List<Product> list = new ArrayList<Product>();
    try{
        System.out.println("in dao method");
    Query q = session.createQuery("from com.rst.Product as p where p.flag =  'new'");
        list = q.list();
    }
    catch(Exception e){
        e.printStackTrace();
    }
    t.commit();
    session.close();
    System.out.println("success");
    return list;
}
}

home.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery
/1.6/jquery.min.js"></script>   
<title>Products</title>

<script>
   $.ajax({url:"home",success:function(result){  
   var x = document.images; 
   $(x[0]).attr("src", <s:property value="products[0].image_link"/>);
   $(x[1]).attr("src", <s:property value="products[1].image_link"/>);
   $("#main").show(); 
}});
</script>

<style type="text/css"> 
#main{
visibility: hidden;
} 
</style>
</head>

<body>

<b>Example of Iterator Tag</b><br/>

<div id = main>
<h1>welcome</h1>
<img src= "" />
<img src=""/>   
<br/>
</div>

</body>
</html>

how does html look like? have you tried to at least retrieve the records on the JSP using ajax? — Nikhil Talreja, Jul 11 '14 at 06:59
When i am calling home.jsp from another page say index.jsp by calling my action class i.e Home.java it is working f9.I mean images are displaying perfectly. — user3824596, Jul 11 '14 at 07:08
In your JavaScript you'll need to properly quote the values in your `attr` calls (on the image tags). — Dave Newton, Jul 11 '14 at 12:12

score 0 · Answer 1 · answered Jul 11 '14 at 07:15

First thing you don't need to include two separate jquery libraries: ver 1.11 and ver 1.6, i suggest you to remove the 1.6 version:

and also one more suggestion to hide element with display property:

#main{
   display:none;
}

and in the markup part good to place id values in quotes:

<div id ="main">

then in jQuery you need to put your ajax call in the doc ready block:

$(function () {
    $.ajax({
        url: "home", // <--your controller method
        type: 'post', //<---type post | get your choice
        dataType: 'json', //<---should be json as response seems js object with key value pairs
        success: function (result) {
            $('#main img').each(function () { // loop in #main's images
                $(this).attr('src', result.image_link); // and place the src here
            });
            $("#main").show(); // <---then in the last you have to show it.
        }
    });
});

Thanks for the help.But how to send result from my action class. — user3824596, Jul 11 '14 at 07:22
@user3824596 The action is made in Java. How did you define your action? — Roman C, Jul 11 '14 at 07:44

setting src of image tag dynamically using jquery

1 Answers1