Member Avatar for ak47carbon

my coding is working but it is showing html tags from text.html,i want that onmouseover it get data from text.html by tag or div id naem and also by changing in text.html its suddenly chane not on refresh

<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
        }
    }
    ajaxRequest.open("GET", "text.html", true);
    ajaxRequest.send(null); 
}

//-->
</script>



<form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>
Edited by happygeek because: fixed formatting
  • 2 Contributors
  • 1 Reply
  • 109 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by FullDuplex

Dani AI

Generated

The posted XHR is returning the raw HTML file, so the form field shows literal tags. For the desired behavior — fetch a fragment from text.html on mouseover and keep it up-to-date without a full page reload — parse the fetched HTML into a document, select the element by id or tag, then inject either the element's textContent (no tags) or innerHTML (with markup) into the page. Modern code uses the Fetch API plus DOMParser for this; that avoids inserting raw response text into a text input and makes it easy to target #someId or a tag name.

Example (fetch + parse + onmouseover + simple polling):

async function fetchFragment(url, selector) {
  const res = await fetch(url + '?_=' + Date.now(), { cache: 'no-store' });
  const html = await res.text();
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const node = doc.querySelector(selector);
  return node ? { html: node.innerHTML, text: node.textContent } : { html: '', text: '' };
}

const target = document.querySelector('#targetDisplay');

target.addEventListener('mouseover', async () => {
  const frag = await fetchFragment('text.html', '#myDivId');
  target.innerHTML = frag.html;        // use .textContent if tags should be stripped
});

// Optional: poll every 3s and update only if changed
let last = '';
setInterval(async () => {
  const frag = await fetchFragment('text.html', '#myDivId');
  if (frag.html !== last) { last = frag.html; target.innerHTML = frag.html; }
}, 3000);

Notes and cautions: a same-origin fetch or proper CORS headers are required (see MDN on CORS). Inline scripts inside fetched HTML will not automatically execute when inserted as innerHTML. For near-instant updates, a server push solution (Server-Sent Events or WebSockets) is preferable to polling; see MDN on Fetch API, DOMParser and Server-sent events. As suggested, client-side scripting/AJAX is the right direction; ’s core idea just needs parsing and either polling or a push channel to get live changes without refresh. Sanitize any HTML from external files to avoid XSS, or prefer structured JSON from the server for safer updates.

Member Avatar for FullDuplex

I would use some java client side scriptiing to help with that so you dont have to reload the page.

Only other advice would be to use Ajax with .Net which will allow events to change the page data and not refresh the page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.