update a "div" container with a "xhtml" page, from the page where the "div" container resides
update a "div" container with a "xhtml" page, from the page where the "div" container resides
i need to update a "div" container with a "xhtml" page, from the page where the "div" container resides...
Below are my codes...
updateDiv.xhtml
<html xmlns="http-://www.w3.org/1999/xhtml"
xmlns:h="http-://java.sun-com/jsf/html">
<h:head>
<h:outputScript library="js" name="/myFolder/myjs.js"></h:outputScript>
<h:outputScript library="js" name="/jquery/jquery.js"></h:outputScript>
</h:head>
<h:body>
<h:form>
<div>
<h:commandButton type="button" value="Update" onclick="updateDivContent()">
</h:commandButton>
<br />
<div id="updateDiv"></div>
</div>
</h:form>
</h:body>
</html>
<html xmlns="http-://www.w3.org/1999/xhtml"
xmlns:h="http-://java.sun-com/jsf/html">
<h:head>
<h:outputScript library="js" name="/myFolder/myjs.js"></h:outputScript>
<h:outputScript library="js" name="/jquery/jquery.js"></h:outputScript>
</h:head>
<h:body>
<h:form>
<div>
<h:commandButton type="button" value="Update" onclick="updateDivContent()">
</h:commandButton>
<br />
<div id="updateDiv"></div>
</div>
</h:form>
</h:body>
</html>
myjs.js
function updateDivContent () {
$.ajax({url:"/TryUpdateDiv/UpdateDiv/divContent.xhtml"
,dataType: "html",success:function(result){
document.getElementById("updateDiv").innerHTML = result;
}});
}
function updateDivContent () {
$.ajax({url:"/TryUpdateDiv/UpdateDiv/divContent.xhtml"
,dataType: "html",success:function(result){
document.getElementById("updateDiv").innerHTML = result;
}});
}
divContent.xhtml
<html xmlns="http-://www.w3.org/1999/xhtml"
xmlns:h="http-://java.sun-com/jsf/html">
<div>
Name :
<h:inputText value="Sam" />
Address :
<h:inputText value="4th cross st" />
</div>
</html>
<html xmlns="http-://www.w3.org/1999/xhtml"
xmlns:h="http-://java.sun-com/jsf/html">
<div>
Name :
<h:inputText value="Sam" />
Address :
<h:inputText value="4th cross st" />
</div>
</html>
the button click on "updateDiv.xhtml" calls the javascript function "updateDivContent()" and it inturn it calls the "divContent.xhtml" ..No probs with the ajax call..
the problem is with the rendering of "divContent.xhtml" 's "h:inputText" inside "updateDiv" div from "updateDiv.xhtml" , which does not render, it just gives out the "h:inputText" component and not the basic html component like "<input type="text" ..>"
can any one please help me in rendering the XHTML component ....
the problem here is with the javascript url
myjs.js
function updateDivContent () {
$.ajax({url:"/TryUpdateDiv/UpdateDiv/divContent.jsf"
....
....
}
function updateDivContent () {
$.ajax({url:"/TryUpdateDiv/UpdateDiv/divContent.jsf"
....
....
}
i changed divContent.xhtml into divContent.jsf
divContent.xhtml" is a resource name. Resources are not directly visible to clients.
"divContent.jsf" is a URL name. When a client submits a URL request to the server, the server dissects the URL string and routes the request to the appropriate URL handler. Which, in this particular case is the FacesServlet, which in turn examines the URL and hands it off to the Facelets resource resolver, which decodes the URL path into its corresponding resource path(s). So the divContent.xhtml resource is used by JSF to construct the response for a request for the divContent.jsf URL.