Динамическое обновление изображения с помощью ajax в Grails - PullRequest
Новая
       17

Динамическое обновление изображения с помощью ajax в Grails

1 голос
/ 27 сентября 2011

У меня есть веб-страница, на которой мне нужно периодически обновлять изображения на основе на нескольких условиях. Сейчас я использую это: 

 <html>
   <head>
   <meta http-equiv="refresh" content="3">
   </head>
    <body>
        <img src="${createLink(controller:'advertisment',action:'viewImage',id:advertismentInstance.id)}"/>
    </body>
</html>

Но это вызывает полную перезагрузку веб-страницы, поэтому я хочу, чтобы это было сделано с Ajax (я также использую Prototype Framework, который по умолчанию в Grails).

Укажите метод рекламного контроллера: 

 def viewImage = {
        log.info("before view Image")
        def adv = Advertisment.get(params.id)
        byte[] image = adv.fileContent
        response.outputStream << image
        log.info("after view Image")
    }

метод контроллера устройства: 

def showAdv =
    {
        log.info("showAdv start")

        def deviceInstance = Device.get(params.id)
        int totalNumberOfAdv = deviceInstance.advertisment.size();
        Random rand = new Random()
        int advToShow = rand.nextInt(totalNumberOfAdv+1) - 1;

        def advertismentInstance = deviceInstance.advertisment.toArray()[advToShow]
        if(advertismentInstance)
        {
            render(view: "image", model: [deviceInstance :deviceInstance,advertismentInstance: advertismentInstance])
        }
        else
        {
            flash.message = "${message(code: 'default.not.found.message', args: [message(code: 'advertisment.label', default: 'Advertisment'), params.id])}"
        }

        log.info("showAdv end")

    }

1 Ответ

2 голосов
/ 27 сентября 2011

  1. Дайте вашему <img/> идентификатор: 

    <img id="foo" src="..."/><!-- keep the existing src -->

  2. Удалите <meta/>, обновляющее страницу.

  3. Перед закрывающим тегом </body> добавьте следующее: 

    <script>
var img = document.getElementById('foo'); // id of image
setInterval(function() {
    var stamp = new Date().getTime();
    img.setAttribute('src', img.getAttribute('src') + '?_=' + stamp);
}, 3000);
</script>

  4. Обновите действие viewImage, чтобы оно фактически выполняло рандомизацию перед рендерингом изображения.Вероятно, это означает объединение частей showAdv в viewImage.

...