I want to call php in a java script
I have read that this is forbidden:
document.getElementById('id1').innerHTML="<?php include my.php?>";
if I can't do this How can I load a php page content to a div with id1 when clicking an li:
<ul>
<li onclick="javascriptFunction()">
<li>
<li>
</ul>
<div id="id1"></div>
There are two ways of achieving the goal.
It isn't so much that what you are trying to do is forbidden as much as it is simply impossible.
Option 1
Use an ajax call to your PHP code. In the callback of the ajax call, fill in the innerHTML.
Option 2
Use a template.
<script type="text/html" id="template-id1">
<?php include my.php?>
</script>
<li onclick="setDiv()">
<script>
function setDiv() {
document.getElementById('id1').innerHTML =
document.getElementById("template-id1").innerHTML;
}
</script>
You could use AJAX (http://en.wikipedia.org/wiki/Ajax).
With a usage of library like jQuery (http://api.jquery.com/jquery.ajax/) you will have code like this:
$.ajax('my.php')
.done(function(response) {
$('#id1').html(response);
})
Of course it's doable without any libraries like jQuery, but just requires a bit more code.
I don't know why that'd be forbidden. It's called bootstrapping.
But if you must:
my.php
echo 'whatever';
And then in a <script> tag, use $.ajax to call my.php and fill the appropriate element with the response.
ready function:
function javascriptFunction () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("id1").innerHTML = xhr.responseText;
}
}
xhr.open('GET', 'my.php', true);
xhr.send();
}
You need to use ajax, if you don't want to use library try this:
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("id1").innerHTML=request.responseText;
}
};
request.open("GET","my.php",true);
request.send();
Or you could hide the div, then when you click on the link then make it visible.
<div id='id1' style='display:none;'>
your content
</div>
function javascriptFunction() {
document.getElementById('id1').style.display = 'block';
}
Related
I am trying to post form data, an array to php file without page refresh. I am using ajax which doesn't seem to be working. Below is form syntax and ajax. Can somebody please help me? Thanks.
<form name="postcontent" id="postcontent">
function[]; //just for an example of data
<button type="button" id="submitform" onclick="posttophp" >Send</button>
<script>
function posttophp() {
var xhttp = new XMLHttpRequest();
xhttp1.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("submitform").innerHTML = this.responseText;
}
};
xhttp.open("POST", "options.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("
function_Options1[]=function[]")
}
</script>
In php, I store function_Options1[] in another variable and use further.
Two ideas to try:
Maybe the script should be placed before calling the function, but not sure about this.
Try onclick="posttophp();"
I want to have a hyperlink on a html page run a variable that is defined in my python file. The variable is going to clear my database. Here is the code I am trying to use.
Python
#app.route('/log')
def log():
cleardb = db.session.delete()
return render_template('log.html', cleardb=cleardb)
Html
<a onclick="myFunction()">Clear database</a>
Javascript
<script>
function myFunction()
</script>
I don't know what javascript I need to run the variable. I want to make the cleardb get triggered so that it will delete the database.
Thanks
You need to make an ajax request with javascript to /log, it would look something like this:
function myFunction() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if (xmlhttp.status == 200) {
//Do Success functionality here
}
else if (xmlhttp.status == 400) {
//Handle 400 errors here
}
else {
//All other errors go here
}
}
};
xmlhttp.open("GET", "/log", true);
xmlhttp.send();
}
I'm building a static website which will relay only on client-side (no PHP).
I have couple of js and py files, which I would like to display on the site as a code.
I really want to avoid using jQuery and implement everything in JavaScript (lightweight as possible).
var codeToDisplay = "<object type='text/html' data='problem001.js'></object>";
document.getElementById('code').innerHTML = codeToDisplay;
This doesn't work. What are my options?
Thanks.
Use AJAX to get the contents of the file and insert it into the element. Use .textContent to prevent interpreting it as HTML.
var url = 'problem001.js';
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readystate == 4 && xhr.status == 200) {
document.getElementById('code').textContent = xhr.responseText;
}
}
xhr.open("GET", url, true);
xhr.send();
<div id="code"></div>
There should be a simple solution this this issue but I am not being able to figure it out!!
So I am getting data/templates via ajax. And there are some function in the ajax data. When I try to call the function it throws and error. Example in jsfiddle with regular vs ajax function calls. http://jsfiddle.net/rexonms/b05uxko6/
<!-- HTML -->
<div id="regularData">
<h2>Regular Data</h2>
<p onclick="mouseEvent()">Click Me</p>
<script>
function mouseEvent(){
alert('Yep clicked');
}
</script>
</div>
<hr>
<div id="ajaxData"></div>
<!-- Javascript -->
var request = new XMLHttpRequest(); // do we need this?
request.open("POST", "https://kvdevl06.sohalo.com/apps/kobie/php/widget/dispatcher_tpl.php");
request.onreadystatechange = function(){
if(request.readyState === 4){
alert('Ajax data is: ' + request.response);
document.getElementById("ajaxData").innerHTML = request.response;
}
}
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send("action=getTest&partner_user_id=1&template_id:test");
You may check the following question:
Executing <script> elements inserted with .innerHTML
In short, you may iterate the script tags and eval them.
Okay, I've been struggling with this for a few hours now. I'm using ajax to update a div in my site with a php code however, i'm trying to send parameters in the function from the external javascript file to update the correct link(there are multiple drop down boxes)
for example: this is my select box
<script type='text/javascript' src='ajax.js'></script>//include ajax file
<select onchange='MakeRequest(raceupdate);
this.options[this.selectedIndex].value;'> //so no use of a button is needed to auto link to anchor tag
<option>Deathmateched</option>
<?php
dmList()
?>
</select>
Then next my external ajax function MakeRequest().
function MakeRequest(value)
{
var linkInfo = "teleport.php?call=" + value;//create appropriate link depending on function parameters
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", linkInfo, true); //update page using link info variable created above
xmlHttp.send(null);
}
So as you can see I'm trying to pass a sting of text into this function, but I seem to be failing somewhere.
You probably want to setup your tag to pass "this". I don't see where your raceupdate variable is declared, unless it's global... in which case you should show us what you're doing with that variable.
<select onchange='MakeRequest(this);'>
<option>Deathmateched</option>
<?php
dmList();
?>
If you did it that way, you'd have to change this function as such:
function MakeRequest(element)
{
var linkInfo = "teleport.php?call=" + element.value;//create appropriate link depending on function parameters
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", linkInfo, true); //update page using link info variable created above
xmlHttp.send(null);
}
And what are you trying to do here?
this.options[this.selectedIndex].value;
In your comments, it looks like you're saying you want to jump to an anchor tag? If so, then you would want to do something like
var anchorTag = document.getElementID("YOUR_ANCHOR_TAG_ID");
anchorTag.focus();