Skip to content Skip to sidebar Skip to footer
Home / Javascript

Javascript + Querystring + Div

Post a Comment
How to load content in to a html page. please note IM not allowed to use php or C. Only javascript and html. for example load Page B in to Page A http:myweb.com/index.html?load=pag

Solution 1:

  1. Issue an AJAX request to Page B

  2. Get the contents using responseText

  3. Display the contents inside a div using innerHTML property.

If you can use a js framework then I would suggest jQuery and @marcgg's answer will do it.

Solution 2:

Just plain JavaScript:

<html><head><script>functiongetUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    map[key] = value;
});
return map;
}    
functioncreateRequestObject() {
            var ro;
            // Mozilla, Safari,...if (window.XMLHttpRequest) {
                ro = newXMLHttpRequest();
                if (ro.overrideMimeType) {
                    ro.overrideMimeType('text/xml');
                    // See note below about this line
                }
                // IE
            } elseif (window.ActiveXObject) {
                try {
                    ro = newActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        ro = newActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
            if (!ro) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                returnfalse;
            }
            return ro;
        }
        functionsndReq(param,server,handler) {
            //location.href = server+"?"+action; //uncomment if you need for debugging
            http = createRequestObject();
            http.open('GET', server, true);
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            http.onreadystatechange = handler;
            http.send(param);
        }
        handler_function = function()
        {
            if(http.readyState == 4)
            {
                if (http.status == 200)
                {
                    document.getElementById("your_div_element").innerHTML = http.responseText;
                }
                else
                {
                    alert('There was a problem with the request.');
                }
            }
        }

</script></head><body><divid="your_div_element"></div><script>var getvars= getUrlVars();
sndReq(null, getvars['action'], handler_function);</script></body></html>

Solution 3:

html:

//Page A
<html><head><title>Page A</title></head><body><divid="pageB"></div><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scripttype="text/javascript">
    $(document).ready(function () {
        $('#pageB').load('pageb.html')
    });
</script></body></html>

Solution 4:

Using jQuery:

 $.ajax({
   type: "POST",
   url: "http://some.com/page.html",
   success: function(msg){
     alert( "here's your data: " + msg );
     jQuery("#yourDivID").html(msg);
   }
 });

http://docs.jquery.com/Ajax/jQuery.ajax

edit: added how to put it into a div

Post a Comment for "Javascript + Querystring + Div"