I am trying to display several images in img-wrapper divs. In the example below, there are 2 divs. But when I append an image to the second img-wrapper, it becomes shown not only in the second div as needed, but it appears over my first image. How to make several distinct images inside respective img-wrappers? My code uses a get http request to get second and later (a loop) image links. Thanks.
Here's my code:
view_topic.php
<div id="myDiv" class="img-wrapper"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('.img-wrapper').append($('<img id="theImg">').attr({
'src': "https://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg" ,
'alt': 'test image 1'
})
).scrollTop(9999)
</script>
<div id="myDiv1" class="img-wrapper"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var xhttp = new XMLHttpRequest();
var get_a_image = "";
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText != "no image") {
get_a_image = this.responseText;
}
console.log(this.responseText);
}
};
xhttp.open("GET", "get_a_img.php?answer_id="+<?php echo $rows2_a_id; ?>+"&id="+<?php echo $id; ?>, false);
xhttp.send();
$('.img-wrapper').append($('<img id="theImg2">').attr({
'src': get_a_image ,
'alt': 'test image 2'
})
).scrollTop(9999)
</script>
Related
I have this variable in js :
var video_embed = '<script src="https://stream.laminor.academy/1qwyvs9ystd9/embed"><\/script>';
$('.my_video').after("<div class='col-xs-12' id='video_content'>"
+ video_embed +
"</div>");
but my rendered HTML code is :
<div class="col-xs-12" id="video_content">
<script src="https://stream.laminor.academy/1qwyvs9ystd9/embed"></script>
</div>
embed code not working!
Thanks for help
when you generate script tags after the document is loaded, it won't run.
You need to download the script and execute it :
//Code that will download the script
function loadScript() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
// Making sure there's no error
if (this.readyState == 4 && this.status == 200) {
// Executing the script
eval(this.responseText)
} else if (this.readyState == 4) {
// If the server responded with something else than a 200 OK
console.warn(this.status)
}
};
xhttp.open("GET", "https://stream.laminor.academy/1qwyvs9ystd9/embed", true);
xhttp.send();
}
// Executing the function
loadScript()
Let me know if it isn't working.
My question is: Could insert a jsp response (html) in html?
I think using XmlHttpRequest.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.jsp", true);
xhttp.send();
My question is: But if I have javascript in my jsp that it executes after page loading, is it executed like when I call jsp directly by browser url?
Thanks in advance
For example:
This is index.html
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="loadInfo();">
<div id="container"></div>
</body>
This is app.js:
function loadInfo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML =this.responseText;
}
};
xhttp.open("GET", "info.html", true);
xhttp.send();
}
This is info.html (i have jsp but i think it is the same..):
<html>
<head>
<script type="text/javascript" src="info.js"></script>
</head>
<body>
<div id="body_info">This is info..</div>
<script type="text/javascript" >
console.log("wait for info..");
info();
</script>
</body>
This is info.js:
function info(){
document.getElementById("body_info").innerHTML ="info.js is executed";
}
If i call info.html, typing url in browser(example http://localhost:8000/info.html), the script is executed and i get
"info.js is executed",instead if i call index.html, maybe the xhr request not return the same but I see "This is info".
how can i resolve and accomplish this problem using xhr?
Thanks
Roberto
When you make ajax called to some page so what ever will there under <body></body> will return as response so in your code this.responseText will be having <script></script> code in it also. You can check if you are using chrome then click on element tab you will see <script></script> also which is return as response .Now,to execute this you can do like below :
function loadInfo() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML = this.responseText;
//getting the script which is return as response back
var datas = document.getElementById("container").getElementsByTagName("script");
//looping unders <script></script>
for (var i = 0; i < datas.length; i++) {
console.log("inside script executing")
eval(datas[i].innerText); //executing script
}
}
};
xhttp.open("GET", "n.html", true);
xhttp.send();
}
And your script for info.html look like below :
<script>
console.log("wait for info..");
info();
function info() {
document.getElementById("body_info").innerHTML = "info.js is executed";
}
</script>
I have an index.php page which loads info.php through AJAX. The info.php content is loaded like this:
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML = this.responseText;
}
};
xhttp.open("GET", "info.php", true);
xhttp.send();
}
(function() {
loadDoc()
})();
setInterval ( "loadDoc()", 5000 );
</script>
The info.php file has the following code to do a count up/down from/to a specific number.
<div class="timer count-title count-number" data-from="2000" data-to="300" data-speed="1500"></div>
<script src='includes/jquery-3.2.1.min.js'></script>
<script src="includes/counter.js"></script>
When I visit info.php directly the counter works perfectly fine. However, if I visit index.php, the counter is not even showing. I had the same issue with other jQuery scripts. Even if index.php includes jQuery and the other scripts it still doesn't work. I do want the number to go through the AJAX call since it keeps updating.
Is there a simple solution?
you can do it by JQuery like as follow...
function loadDoc(){
console.log( "call done" );
$( "#data" ).load( "info.php", function() {
console.log( "Load done." );
});
};
$(function(){loadDoc();});
setInterval (loadDoc, 5000 );
I think their problem with your function statement checks this for the following script...
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML = this.responseText;
}
};
xhttp.open("GET", "info.php", true);
xhttp.send();
}
$(function(){loadDoc();});
setInterval (loadDoc, 5000 );
I have a PHP script picQuery.php which returns the path to a picture. I have another script which calls the picQuery.php and should then display the picture, but I cannot figure out how to do it.
The code I have displays the file path in picFrame. What I want is something like the following line which I have commented out as it doesn't work. How should it be written?
HTML:
<!DOCTYPE html>
<html>
<body>
<form action="">
<button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame"</p>
<!--<img src=<p id="picFrame"</p> alt="text" style="width:304px;height:228px;">-->
<script>
function getPic() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("picFrame").innerHTML = this.responseText;
alert('response = '.this.responseText);
}
};
xhttp.open("GET", "picQuery.php?q=4", true);
xhttp.send();
}
</script>
</body>
</html>
picQuery.php
<!DOCTYPE html> <html> <body> <?php echo "PIC1.jpg" ?> </body> </html>
There are multiple ways this could be achieved.
The simplest might be to create an instance of Image, assign the responseText to the src property of the image, set the style property accordingly, and then set the innerHTML of the element with id value picFrame to the outerHTML of the image.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var image = new Image();
image.src= this.responseText;
image.style = "width:304px;height:228px;";
document.getElementById("picFrame").innerHTML = image.outerHTML;
}
}
See it demonstrated in this phpfiddle.
Otherwise the <img> tag that is currently commented out could be used if the id attribute was changed or if it was accessed via the DOM as a child of the paragraph element. Though if the initial value of the src property is empty or an invalid URL for an image, then the browser might display a broken image icon.
So the image could be updated like this:
<p id="picFrame">
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" />
</p>
And then accessed via Javascript:
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('picFrameImg').src = this.responseText;
}
See a demonstration of this below. Hopefully the AJAX still works in the long term, though it might not, given the phpfiddle code files. If it stops working, this plunker might be a good demonstration but bear in mind that picQuery.php is NOT being executed as a regular PHP file.
function getPic() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("picFrameImg").src = this.responseText;
}
};
xhttp.open("GET", "http://main.xfiddle.com/code_65644594.php?q=4", true);
xhttp.send();
}
<form action="">
<button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame">
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="" />
</p>
UPDATE 4/21/2017
The PHP code provided will not work with the AJAX approach. It should return the path of the image without the html tags around it.
So update the PHP from:
<!DOCTYPE html> <html> <body> <?php echo "PIC1.jpg" ?> </body> </html>
To this:
<?php echo "PIC1.jpg"; ?>
That way, the AJAX code will essentially be updating the image tag from
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" />
to this:
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="PIC1.jpg" />
I have webpage on which i run a php file by javascript as given below
<script type="text/javascript">
var bhs = document.createElement('script');
var bhs_id = "yvw3lwc1tnvqfh4k4k4hisossew";
bhs.src = "//example.com/insert.php?site=" + bhs_id + "";
document.head.appendChild(bhs);
document.write("<span id='calc'></span>");
</script>
This JavaScript successfully insert data into insert.php file and then send to database. Besides i want to show one variable value generated in insert.php file in span id calc on a webpage where from above JavaScript is executed. How to do this? Thanks in advance.
It´s better use AJAX:
function loadDoc() {
var xhttp = new XMLHttpRequest();
var bhs_id = "yvw3lwc1tnvqfh4k4k4hisossew";
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert('OK!');
}
};
xhttp.open("GET", "//example.com/insert.php?site=" + bhs_id, true);
xhttp.send();
}
Reference:
http://www.w3schools.com/xml/ajax_intro.asp