How to use AJAX in an iframe?

Asked

Viewed 624 times

1

To put it in context:

I am trying to get only one part of my HTML page updated every 5 seconds. For this, I am using AJAX. In the middle of the development, I found myself with a problem of not being able to return the object and my view at the same time, since, both were accessed by the same URL ("/log").

So I created a frame

<iframe id="logIframe" src='about:blank' width="900" height="500"></iframe>

so that I keep my view on the page (around the frame) and the object being displayed inside the frame. My problem is that, my object is returning empty and I don’t know why. If I return the object, to instead of the view, the object returns correctly:

inserir a descrição da imagem aqui

Otherwise:

inserir a descrição da imagem aqui

(I took the print returning a Log, so it returns [obj]. Returning a string, simply goes blank).

My post that is called by AJAX function:

                          // "log"
@RequestMapping(value = "/logTest", method = RequestMethod.POST)
@ResponseBody
public String iframeLogPost(@Valid Log log, BindingResult bindingResult, Map<String, Object> model) {
    if (log.getInitLine() == 0 && log.getFinalLine() == 0) {
        try {
            fileNumberLines(log);
            log.setContent(getLogContentByRange(0, log.getInitLine(), log.getFinalLine(), logsDir + "/" + log.getFilename()));
        } catch (IOException e) {
            logger.error(e.getMessage());
        }
    } else {
        log.setContent(getLogContentByRange(0, log.getInitLine(), log.getFinalLine(), logsDir + "/" + log.getFilename()));
    }

    // View:
    //model.put("path", logsDir);
    //model.put("log", log);
    //model.put("currentPage", "logs");
    //model.put("root", root);

    return log.getContent();
}

My AJAX function:

function reload() {

    var ifrm = document.getElementById('logIframe');
    ifrm = ifrm.contentWindow || ifrm.contentDocument.document
            || ifrm.contentDocument;

    $.ajax({
        type : 'post',
        url : '/logTest',
        success : function(data) {

            console.log(data);
            ifrm.document.open();
            ifrm.document.write(data); // Escreve no iframe
            ifrm.document.close();
        }
    });
}

Doubt: What am I doing wrong?

javascript java ajax iframe

  • I think using iframe is kind of wrong these days. Why don’t you do the same thing in one div on the page? Anyway, you need to turn the object into a string before writing it: JSON.Stringify(data)

  • So I was doing it with a div before. My problem started because I couldn’t access the object through AJAX. So I was told that I should use the @responsebody notation in my controller. The problem is that, doing so, I lost my view, and only the object appeared on the page. And if I didn’t use the notation, I couldn’t access the object. So I stayed in this "cross," so I was trying in other ways.. But I think I’ll go back to div anyway

2 answers

0

Hello @David Caina, let’s consider that you have 2 files:

In a vc put a div to receive the iframe, and put the ajax with the following code in the Success:

html:
div class=".recept_iframe" /div

no ajax:

setInterval(function(){
    $(".recept_iframe").load("pasta/iframe.php");
}, 5000);//com o setInterval, vai carregar a cada 5segundos
  • In the other file you put the iframe.

0

I think you should annotate the Log parameter with @Requestbody:

@ResponseBody
 public String iframeLogPost(@Valid @RequestBody Log log, BindingResult bindingResult,

And the fields of this class should have the names and types equal to those represented in the JSON passed in the post or map which field of the class represents which field of the JSON.

Browser other questions tagged javascript java ajax iframe

You are not signed in. Login or sign up in order to post.