My PHP script, that I call via XMLHttpRequest, executes a query and checks a condition, then outputs a HTML snippet with some Smarty code. When I try to insert that code in a <div> tag, either by calling the jQuery.html() function or by setting the innerHTML property, the Smarty code is printed as it is, thus not interpreted as Smarty code. How could I solve this problem?
Relevant code:
PHP Script:
<?php
$mysqli = new mysqli("localhost", "<<<SQL USERNAME>>>", "<<<SQL PASSWORD>>>", "<<<SQL DATABASE>>>");
$id = $_GET["idmf"];
$cat = $mysqli->query("<<<SQL QUERY>>>")->fetch_assoc()["category"];
if ($cat == $_GET["cat"])
echo 'blahblah';
?>
TPL file:
{foreach from=$manufacturers item=manufacturer name=manufacturers}
<div id="mffilter_{$manufacturer.id_manufacturer}"></div>
<script>
var xhttpf;
if (window.XMLHttpRequest)
{
xhttpf = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xhttpf = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttpf.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("mffilter_{$manufacturer.id_manufacturer}").innerHTML = this.responseText;
}
};
xhttpf.open("GET", "<<<ENDPOINT>>>.php?cat=food&idmf={$manufacturer.id_manufacturer}", true);
xhttpf.send();
</script>
Try replacing your TPL file code with the following code:
{foreach from=$manufacturers item=manufacturer name=manufacturers}
<div id="mffilter_"{$manufacturer.id_manufacturer}></div>
<script>
var xhttpf;
if (window.XMLHttpRequest)
{
xhttpf = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xhttpf = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttpf.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("mffilter_"{$manufacturer.id_manufacturer}).innerHTML = this.responseText;
}
};
xhttpf.open("GET", "<<<ENDPOINT>>>.php?cat=food&idmf="{$manufacturer.id_manufacturer}, true);
xhttpf.send();
</script>
Related
There is a main-feed showing a list of blog post titles. When a title is clicked, I need to display the details of the blog post in a new html file. Below is my current code:
window.location.href = "/viewpost.html";
postID = this.id;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("view-post-container").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "viewpost.php?q=" + postID, true);
xmlhttp.send();
The problem is, the element view-post-container, is in the file viewpost.html, and so I don't think the PHP file can access it. I would just display the data on the current page (index.php), but I wanted to have individual pages for each post so I can eventually learn how to have dynamic URL's for SEO and sharing purposes. The end goal is having dynamic urls, so maybe there is a better approach? Any help would is much appreciated. Thanks.
just try this, You have to put your code in on window.onload function
window.onload = function() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("view-post-container").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "viewpost.php?q=" + postID, true);
xmlhttp.send();
}
I want a search box which shows the result just below it when I click the search button without reloading the page.
for this I've js function called ShowUsers(str)
like this
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
And a html form like this :
<form>
<input type="text" name="q"/>
<script type="text/javascript">var x = document.getElementById("q").value; </script>
<input type="button" value="search" onclick="showUser(x)">
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
I've one php file to show the result called as GetUser.php
I think the var x deos'nt pass to the ShowUser(str) function in the input tag I think this is not a right way to pass a js var into html event
so what can i do to show the data
Access document.getElementById("q").value directly in showUser function rather than passing x to showUser function.
function showUser() {
var str = document.getElementById("txtHint").value;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
Can anyone tell me why I can't get the elements from an XML document? It doesn't print anything when I press the et Title button that i have implemented in the body section. Here's my code:
function MyF () {
var xmlhttp;
var txt,x,i=0;
var xx;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
xx = x[i].getElementsByTagName("TITLE");
document.getElementById("test").innerHTML=xx;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
}
xmlhttp.responseXML.documentElement is the problem of your troubles. Just use xmlhttp.responseXML.getElementsByTagName and you should be fine.
I want to add html variables : "<script>var var1 = new CalendarPopup();</script>" according to a number that the user chooses. At the moment I have an ajax setup that is suppose to change my tag to add the variables by changing the inner html like so :
<div id="calVar">
<script>
var cal1 = new CalendarPopup();
var cal2 = new CalendarPopup();
</script>
</div>
function addRespDropDownAjax(currentNumberOfDropDown)
{
//Prepare a new ajaxRequest.
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Ajax receiving the response in this function
xmlhttp.onreadystatechange = function()
{
//state 4 is response ready.
//Status 200 is page found.
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('calVar').innerHTML = '<script>var cal3 = new CalendarPopup();</script>';
alert(document.getElementById('calVar').innerHTML);
}
};
//Send the Ajax request.
xmlhttp.open('GET','mainServlet?command=ajax.AddRespDropDown&NUMBER_OF_DROP_DOWN=' + currentNumberOfDropDown, true);
xmlhttp.send();
}
The last alert :document.getElementById('calVar').innerHTML return nothing and my varaibles are not created. any ideas?
Thanks alot!!
HTML doesn't have variables, and any that are defined in a <script> without deeper nested scope can be simple defined off the window object.
Instead of trying to insert HTML, just use:
window.cal3 = new CalendarPopup();
then any other script can access this variable now or later.
My Ajax javascript code isn't working...
Here is the code:
function getMessages() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("box").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "process.php");
xmlhttp.send();
}
I have my php script just doing a test saying: this is a test.
I can't figure out what I did wrong. Chrome javascript debugger says that I have an unxpected token "."
PHP Code:
<?php if (!$_COOKIE["name"]) {
echo "<form method='get' action = 'process.php'><input type = 'text' name = 'name'><input type = 'submit' value = 'Submit'></form>";
} else {
echo '
function getMessages(){var xmlhttp;
if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest (); }
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4&&xmlhttp.status==200) { document.getElementById("box").innerHTML=xmlhttp.responseText; } }
xmlhttp.open("GET","process.php") ;
xmlhttp.send(); }
var is={ie:navigator.appName=="Microsoft InternetExplorer",java:navigator.javaEnabled(),ns:navigator.appName=="Netscape",ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=="Win32"
}
is.mac=is.ua.indexOf("mac")>=0;
if(is.ua.indexOf("opera")>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf("agecko")>=0)
{is.ie=is.ns=false;is.gecko=true;
}';
echo "<textarea id=box rows=20 cols=20></textarea>
<form method='get' action = 'process.php'>
<input type = 'text' name = 'message'>
<input type = 'submit' value = 'Submit'>
</form>";
} ?>
xmlhttp.readyStat should be xmlhttp.readyState perhaps?
readyStat should be readyState for one. Rest seems okay.
xmlhttp.send() to xmlhttp.send(null) can prevent IE bugs too