How to load HTML into DIV without JQuery

Question

0.00/5 (No votes)

See more:

..
I have MCU application with http server.
On my static page I need dynamicly updated DIV field.
The upadate should be done from different URL then page.
This URL has a simple TXT format, just a pure numbers,
but updated 4-5 per sec. There are several such sources.

Like on page below, just URL content instead "update #" value.

HTML

<html>   
<head>   
<script langauge="javascript">   
        var counter = 0;   
        window.setInterval("refreshDiv()", 250);   
        function refreshDiv(){   
                counter = counter + 1;   
                document.getElementById("refreshme").innerHTML = "update  " + counter;   
        }   
</script>   
</head>   
<body>   
<div id="refreshme">Update</div>
</body>   
</html>

Is it possible do without JQuery or any other plugins

Posted 31-Jul-13 19:50pm

Gobsek

Updated 2-Apr-22 23:03pm

v3

Add a Solution

Comments

Vyacheslav Voronenko 1-Aug-13 1:54am

What have you tried so far? There is a number of examples over the net.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script>
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
var j = jQuery.noConflict();
j(document).ready(function () {
j(".refreshMe").everyTime(5000, function (i) {
j.ajax({
url: "refresh.html",
cache: false,
success: function (html) {
j(".refreshMe").html(html);
}
})
})
});
j('.refreshMe').css({ color: "red" });
});
</script>

mysticaldragon 7-Nov-17 14:00pm

xzxc

mysticaldragon 7-Nov-17 14:00pm

zxczxcc

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Answer 1 · 2013-07-31T20:51:00

Whenever I want to do something like that, I just use one of the following 3 functions, along with the AjaxRequest library, found here

JavaScript

function myGetAjaxResponse(target, url)
{
  AjaxRequest.get(
    {
      'url':url,
      'onSuccess':function(req){ target.innerHTML=req.responseText; }
    }
  );
}


function myGetAjaxResponseWithCallback(target, url, callbackFunc)
{
  AjaxRequest.get(
    {
      'url':url,
      'onSuccess':function(req){ target.innerHTML=req.responseText; callbackFunc();}
    }
  );
}


function myGetAjaxResponseWithCallback2(target, url, callbackFunc)
{
  AjaxRequest.get(
    {
      'url':url,
      'onSuccess':function(req){ callbackFunc(req.responseText, target);}
    }
  );
}

Here's a quick example of use. You'll just need to get the AjaxRequest library.

1. The php file that returns data we'd like to make use of

jsonDir.php

PHP

<?php
class mFile
{
    public $name, $time, $size;
}

foreach (glob("*.*") as $curFilename)
{
    $curFileObj = new mFile;
    $curFileObj->name = $curFilename;
    $curFileObj->time = date("d/m/Y - H:i", filectime($curFilename));
    $curFileObj->size = filesize($curFilename);
    $fileArray[] = $curFileObj;
}
printf("%s", json_encode($fileArray));
?>

2. The file that makes the request for the data and then does something with it. (I just add the names of all the files in the current directory to a drop-down list - a select element)
index.html

HTML

<!DOCTYPE html>
<html>
<head>
<script src='script/ajaxRequest.js'></script>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

window.addEventListener('load', mInit, false);

function mInit()
{
}

function myGetAjaxResponseWithCallback2(target, url, callbackFunc)
{
  AjaxRequest.get(
    {
      'url':url,
      'onSuccess':function(req){ callbackFunc(req.responseText, target);}
    }
  );
}

function onLoadBtnClick()
{
    var tgt = byId('resultsContainer');
    myGetAjaxResponseWithCallback2(tgt, 'jsonDir.php', jsonDataAvailableCallback);
}

function jsonDataAvailableCallback(responseText, targetContainer)
{
    var resultArray = JSON.parse(responseText);
    var select, option, i, n, curFilename;

    select = newEl('select');

    n = resultArray.length;
    for (i=0; i<n; i++)
    {
        option = newEl('option');
        option.setAttribute('value', i);        // set the value to be the files index in the array
        curFilename = resultArray[i].name;
        option.appendChild( newTxt(curFilename) );
        select.appendChild(option);
    }
    targetContainer.innerHTML = '';
    targetContainer.appendChild(select);
}

</script>
<style>
</style>
</head>
<body>
    <input type='button' value='load file list' onclick='onLoadBtnClick()'/>
    <div id='resultsContainer'></div>
</body>
</html>

Jameel VM · Answer 2 · 2013-07-31T19:59:00

Solution 1

using jQuery you can easily put html in to div.

for example

JavaScript

<div id="myDiv"></div>


$(document).ready(function()
{
var htmlstr="<table><tr><td></td></tr><table>";
$('#myDiv').html(htmlstr);
});</table></table>

Please make sure that you should download the latest jQuery plugin from here http://jquery.com/download/[^]and put it in to the page

Posted 31-Jul-13 19:59pm

Jameel VM

Comments

Gobsek 1-Aug-13 4:22am

Thanks, But is it possible don't use JQuery totally or any other plugins ?

Jameel VM 1-Aug-13 5:29am

use javascript

Gobsek 1-Aug-13 9:53am

HTML source (into div tag) must be taken from external URL,

for ex. http://site.com/data.txt, but not internal value

TheKing2 · Answer 3 · 2022-04-02T23:03:00

Solution 3

See Using the Fetch API - Web APIs | MDN[^]

Posted 2-Apr-22 23:03pm

TheKing2