Cannot insert new HTML to BODY of the page

Question

I'm trying to implement simple "single page application" under Multi device hubrid apps. After pressing a button (and doing some ajax POST query), i'm trying to insert new HTML into 'body':

var finalHtml = '<header class="bar bar-nav">' +
    '<h1 class="title">Some text</h1>' +
'</header>' +
'<div class="content">' +
'</div>';
console.log('Rendering: ' + finalHtml);
$('body').html(finalHtml);

Nothing happens. I see (while debugging) that inner HTML of the body changes, but after all, page becomes as previous. I tried

document.body.insertAdjacentHTML('afterbegin', finalHtml);

or

document.getElementById('appbody').innerHTML = finalHtml;

but it doesn't work.

What i'm missing?

UPDATE: At the end of updating page, Javascript console output is:

HTML1300: Navigation occurred File: index.html

Looks like page is refreshed, by some reason. Why could it be? HTML part:

    <form>

        <input type="text" id="login" placeholder="Login" autofocus>
        <input type="text" id="pass" placeholder="Password">
        <button class="btn btn-primary btn-block" onclick="try_login(document.getElementById('login').value, document.getElementById('pass').value, device.platform + ' ' + device.version);">
            Login
        </button>

    </form>

Javascript part:

function try_login(username, password, dev) {

var parameters = '';

jQuery.ajax({
    type: "POST",
    url: "http://some_url/Services/Authorize",
    data: JSON.stringify(parameters),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    crossDomain: true,
    cache: false,
    processdata: true,
    success: function (msg) {
        renderView(DataView(msg));
    },
    error: function (obj, errorMessage) {
        renderView(LoginView() + ErrorView(errorMessage));
    },

});
};

what do you mean by- **inner HTML of the body changes, but after all, page becomes as previous** — Naeem Shaikh, Nov 05 '14 at 08:22
While debugging (in VS 2013), i see, that `document.body.innerHTML` = my `finalHtml` (breakpoint after `$('body').html(finalHtml);`). I'm continuing execution, and see old page on screen (i'm using Ripple emulator). — Vasilij, Nov 05 '14 at 08:36
Can you try console.log($('body').html()); after the insert? — xumet, Nov 05 '14 at 08:46
console.log() shows my new html. But after that, Javascript console outputs that: `HTML1300: Navigation occurred File: index.html` Why? May be, this is the reason? — Vasilij, Nov 05 '14 at 09:01
No. That is the Developer Tool output... http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx Can you put more information/code? — xumet, Nov 05 '14 at 09:13
Solved! Added `type="button"` to button on form. Solution found here: http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked — Vasilij, Nov 05 '14 at 09:16

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Problem solved! Button in form refreshes the page, so I added type="button" to button on form. Solution found here: prevent refresh of page when button inside form clicked

edited May 23 '17 at 12:05

Community

1
1

answered Nov 05 '14 at 09:17

Vasilij

468
6
20

Cannot insert new HTML to BODY of the page

1 Answers1