Mathjax not rendering TEX formulas dynamically from PHP/Ajax - php

var questions = {"ques_id":"1","question":"<p><span class=\\\"math-tex\\\">\\\\(x = {-b \\\\pm \\\\sqrt{b^2-4ac} \\\\over 2a}\\\\)<\/span> Test Question new with mathjax<\/p>","ques_type":"text_based_questions","correctAnswer":3,"choices":[{"option_id":"1","value":"Option A"},{"option_id":"2","value":"Option B"},{"option_id":"3","value":"Option C"},{"option_id":"4","value":"OPtion D"}]};
$('#test-question').html(questions.question);
MathJax.Hub.Queue(["Typeset",MathJax.Hub, 'test-question']);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false,
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>
</head>
<body>
<h5 class="border-bottom">Instructions: Read the question, work out your answer and select the best option.</h5>
<p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p>
<div class="question" id="test-question"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</body>
</html>
I'm getting the following question from Ajax request
MathJax is configured properly but the question coming from the JSON is not rendered by MathJax. The question are saved in MySQL database and are fetched by ajax request.
I tried everything but it still not working. Please help

From Json it added double slash. Plz remove that it will solve your problem.

Related

PHP AJAX issue with divs

having a few issues at the moment regarding updating the content of a div using ajax and php. I am trying to echo the price in the php script into to the div and it is not happening....maybe I'm missing something. This is a modified and simplified example of my problem.
HTML CODE:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval('autoRefresh_div()', 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
PHP CODE:
<?php
echo "2.22";
?>
Put the function in without the ', or change it to:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval(function(){
autoRefresh_div()
}, 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>

Add Wordpress Iframe of 3rd party company which provide me search, and search results page

Yes, I know something like this has been asked over here before and I have searched but the one that is closest to what I'm trying to achieve doesn't have an answer anywhere.
So what I need is really simple.
I have a WordPress site and I want to integrate Iframe of 3rd party company which provide me search, and search results page.
I need some help with put the search on section and the search results on hidden field or somthing until we have some results to show.
I have got 2 pages from 3rd party company as follow:
Search.html
<pre>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<iframe src="http://www.3rd_party_url/Default.aspx?urlresult=http://www.3rd_party_url/result.html" scrolling="no" width="350px" height="280px"></iframe>
</body>
</html>
</pre>
Result.html
<pre>
<html >
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function GetQuery() {
var url = window.location.href;
url = url.substring(url.indexOf("?"))
iframe = document.getElementById('myIframe');
iframe.src = "http://www.3rd_party_url/pleasewait.aspx" + url;
}
window.onload = function ()
{
GetQuery();
}
</script>
</head>
<body>
<iframe id="myIframe" width="100%" height="800px" src=""></iframe>
</body>
</html>
</pre>
Not sure how to move on from there. I'd really appreciate some help.
Thanks in advance!

Fine-uploader out of the box questions / errors

Attempting to run fineuploader right out of the box using the same code that's on the site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader Demo</title>
<link href="custom.fineuploader-4.0.3.css" rel="stylesheet">
</head>
<body>
<div id="fine-uploader"></div>
<script src="custom.fineuploader-4.0.3.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'server/handleUploads'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
Even before beginning to mess around with the endpoint.php I took a look at in a browser and I'm getting the following errors in Firebug:
ReferenceError: jQuery is not defined
}(jQuery));
custom....0.3.js (line 8012)
Error: Cannot find template script at ID 'qq-template'!
...ew Error(qq.format("Cannot find template script at ID '{}'!", options.templateId...
What am I missing?
jQuery library is missing in your code
add this in your head tag
<head>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
.
.
</script>
</head>

load whole html script in php file

Advance apologies for this noob question but i have to do it perfectly. I have made a website which are all html files and all are working fine. Now for the session handing i have to convert all the html files into php like
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap-min.css"/>
</head>
<body>
Body elements
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
to something like
<?php
"SESSION HANDLING PHP CODING"
echo '<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap-min.css"/>
</head>
<body>
Body elements
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>'
?>
Hoping for best possible solution.
Thanks
You don't need to do an echo, just close the php tag with "?>":
<?php
//CODE
?>
Your Html Stuff
You really don't have to do that - you can mix HTML and PHP easily. Just surround the code with <?php and ?> tags:
<?php /* handle session here */ ?>
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap-min.css"/>
</head>
<body>
Body elements
<?php echo $something_you_handled_earlier; ?>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You actually need to refer session handling in PHP.
And then separate the logical php part from the HTML part as mentioned in other answers.

how do i implement a jquery background messages?

for example when you get a new badge on stack overflow, you get the notifaction message on the top, telling you have a new badge, it deos that on the backgroung!! is thier a toturial or article that can help me with this kind eventing updates!!
You should look into notifications such as jGrowl. The site has some samples to help you get going :)
EDIT
How will you be storing notifications? Within a DB? I will get back to you later - My lunch break is over for now :(
EDIT 2
Here is a basic example of how to get it working with php by declaring an array of messages which you could easily populate from a database. You could make this more advanced by using the other options offered by jGrowl such as stickies etc by using a multidimentional array to store such options and outputting the correct javascript.
<?php
$messages = array("This is a message", "And this is another", "etc...");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jGrowl and PHP Test</title>
<link type="text/css" rel="stylesheet" href="jquery.jgrowl.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
<?php foreach ($messages as $message) { ?>
$.jGrowl("<?php echo $message; ?>", { life: 3000 });
<?php } ?>
});
</script>
</head>
<body>
</body>

Categories