Javascript function inside innerHTML does not work

Asked

Viewed 475 times

0

Good morning.

My Ajax function returns a string and prints it via innerHTML within a div. This string is:

<div>
    <p>Login bem sucedido.</p>
    <p>Redirecionamento em ação.</p>
</div>
<script> location.reload(); </script>

I have done this in other projects, but the function does not perform page re-load. I also tried an Alert, but it did not work at all.

What am I doing wrong?

Follows ajax Success function:

function success(value) {
    if (value.length > 0) {
        // msg = elmento div#msg
        msg.innerHTML = value;
    } else {
        msg.innerHTML = ('<div id="error"><div class="inform"><p>Nenhum valor retornado.</p></div></div>');
    }
}
javascript

  • Dude, if you do a Load the user won’t even see the message right (or they won’t even see, since the page would be reloaded immediately). That’s what you want?

  • Have you tried the classic setTimeout(function() {&#xA; document.location.reload(true);&#xA;}, 5000);

  • Good afternoon, @Sam. The intention is to put a setTimeout, but no function works: be it Reload alone, setTimeout, or Alert.

  • Good afternoon, @Fabianomonteiro. I tried everything. No function works.

  • have tried to load into the div? or call jquery html(str)

  • http://api.jquery.com/load/

  • @E.Coelho Do you only want a Reload? And what is the purpose of Reload? Your code with the setTimeout, here on my PC works. It keeps giving Re-load. I think it’s best to explain what your goal is with this, and what is currently on your system. You have to call appendChild to attach the DOM element to an existing element.

  • I think the most important thing is to check if there are any error messages in the browser console. From this it is easier to discover the problem, because with the current information any help is kick.

  • Good afternoon, @Jasarorion. I am not using libraries in this project. About using the . load() function, I have never used it in my projects. I’ve always used . html() in jQuery.

  • Good afternoon, @Fabianomonteiro. I want the functions to work. I’m using pure javascript in this project. I’ll try the appendchild and I’ll give you feedback.

  • Good afternoon, @fernandosavio. No error message on the console. I will try the appendchild, as Fabiano said and I already give a feedback.

  • With jQuery the code works, but with pure JS not because the return comes as string. Now why in jQuery works is that I do not know.

  • Put the Ajax code too, the problem may be there.

  • @E.Rabbit I will pass a code, until I understand what you want: <div id="meuidentificador"></div><script>document.getElementById("meuidentificador").innerHTML += "<p>Login bem sucedido.</p><p>Redirecionamento em ação.</p>" + setTimeout(function() { document.location.reload(true); }, 5000);</script> I just didn’t understand the following is re-load or redirect?

  • @fernandosavio, I edited the question, putting the function Success(). I tried appendchild, but it didn’t work: it treats HTML code as text and printa <div>Message... (etc).

  • @Fabianomonteiro, the page is dynamic at the base: if the session is started, it will include another page, otherwise it will continue in the login form. There is "printing" redirect to the user. When performing Reload(), PHP checks that the session was started in includes the options panel for the user.

  • Still hard to know where the error comes from with little information. I did that snippet who makes an ajax request and uses innerHTML and everything works very well.

Show 12 more comments

2 answers

1

Answer found: Developer.mozilla.org/en/Docs/Web/API/Element/innerHTML

Excerpt from the article:

name = "<script>alert('I am John in an annoying alert!')</script>"; 
el.innerHTML = name; // inofensivo, nesse caso

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a tag, inserted via innerHTML, should not be executed.

I don’t know what to do... (laughs)

0

Ah! I found!

I found an easy way to deal with the problem. The Success() function looks like this:

function success(value) {
    if (value.length > 0) {
        // msg = elmento div#msg
        msg.innerHTML = value;
        var scripts = msg.getElementsByTagName("script");
        for (var i = 0; i < scripts.length; i++) {
            eval(scripts[i].innerText);
        }
    } else {
        msg.innerHTML = ('<div id="error"><div class="inform"><p>Nenhum valor retornado.</p></div></div>');
    }
}

Post: https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml

I hope you help someone.

Big hug and thank you all!

Browser other questions tagged javascript

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