I am having issues with reloading a php file into 3 separate divs independently via ajax.
There is a ton of old code out there so I'm trying to find the most recent elegant solution.
I based this version on this code from https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax which loads a text file.
The main index.php file has 3 containers with div1, div2, and div3 areas in each.
There is a button for each which should reload a php page called colors.php into each separate div. The colors.php page shows a different color every time it loads. It's this. Reload the page to see color change.
http://spillway.com/example/colors.php
Here is the attempt
http://spillway.com/example
Thanks for any info.
The code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax php reload div example</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- set up div links with ajax -->
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "colors.php", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "colors.php", success: function(result){
$("#div2").html(result);
}});
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "colors.php", success: function(result){
$("#div3").html(result);
}});
});
});
</script>
<!-- CSS for divs and containers -->
<style>
.container1 {
position: absolute;
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
.container2 {
position: absolute;
margin: auto;
border: 3px solid green;
text-align: center;
left: 500px;
top: 25%;
padding: 10px;
}
.container3 {
position: absolute;
margin: auto;
border: 3px solid green;
text-align: center;
left: 900px;
top: 25%;
padding: 10px;
}
.div1 {
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
.div2 {
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
.div3 {
margin: auto;
border: 3px solid green;
text-align: center;
left: 100px;
top: 25%;
padding: 10px;
}
</style>
<body>
<!-- container divs and div1 div2 div3 with buttons -->
<!-- first div --------------------------------------------------->
<div class="container1">
<button>reload color php</button><br>
<div class="div1">
<h2>div1</h2>
</div>
</div>
<!-- second div --------------------------------------------------->
<div class="container2">
<button>reload color php</button><br>
<div class="div2">
<h2>div2</h2>
</div>
</div>
<!-- third div --------------------------------------------------->
<div class="container3">
<button>reload color php</button><br>
<div class="div3">
<h2>div3</h2>
</div>
</div>
</body>
</html>
The problem that you are having is you are adding more than one click handler to button, not a specific button but ALL of them.
You can use a single event handler that simply gets the parent div of the button that was clicked, then finds the div as a child that will hold the content and use that as the target.
Another problem that you are having is the files that you are loading via ajax actually include FULL html/body tags but they shouldn't they should just the HTML elements only (or JSON but for my example I'm using HTML).
$(document).ready(function(){
$("button").click(function(){
target = $(this).parent("div").find("div");
$.ajax({url: "colors.php", success: function(result){
target.html(result);
}});
});
});
css
.color-div{
width:50px;
height:50px;
}
for your color files just include the div with the background color and a class that gives the div size.
<div class='color-div' style='background-color:#FF0000'></div>
Related
I am trying to hide #showMyList, #showMyName these divs. On click button need to show divs.
Both div has separate buttons. I want to see one div at a time. I can give different css (style)to them so that they will look different.
Which one will be more useful jQuery hide() and show()
Or display none and block?
#showMyList, #showMyName{
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left:200px;
}
</style>
<script>
$('document').ready(function(){
$('showMyList').css("display", "none");
$('showMyAcc').css("display","none");
$("myList").click(function(){
$("showMyList").css("display", "block");
$("myAcc").click(function(){
$("showMyAcc").css("display", "block");
});
});
});
Consider the following example.
$(function() {
$('#showMyList, #showMyAcc').hide();
$("#myList").click(function() {
$("#showMyAcc").hide();
$("#showMyList").show();
});
$("#myAcc").click(function() {
$("#showMyList").hide();
$("#showMyAcc").show();
});
});
#showMyList,
#showMyAcc {
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>
You can Hide both elements and then reveal or show 1 at a time.
I am working currently on a project and i haven't found a solution how to realize it yet. I am not asking for the solution. I would be very thankful if someone could give me some hints or tell me in which direction i could go to reach my goal.
Currently i am thinking about trying to solve it by programming an web-application. But i am not sure if a windows forms application would even be better. I am also open for other solutions.
My goal is following:
I have some (real world) documents which are being scanned and afterwards scanned with an OCR-Scanner, which generates some PDF-Documents.
Next i want to open one of these generated PDF-Files in a User Interface which shows me the PDF. The user should be able to select some (one after another) text-blocks, which are downloaded from a database, and drag them over the pdf and drop it at some position.
Now i want to save or print the pdf with the text-blocks, just as the user sees it. Kind of making a screenshot of the pdf but resulting in a pdf file with the same dimensions as before.
Currently i have no idea how to "merge" these two.
Which technologies should i use. What would you recommend me. Would a web-application or something native be better suitable for that purpose.
I have written some kind of mockup to show what i mean. Please put some pdf named "testpdf.pdf" to the same folder if you want to test it.
It works on Chrome ... not sure about the others.
Thanks a lot
Kerem
var movabelelements=document.getElementsByClassName("moveableElement");
Array.from(movabelelements).forEach(element => {
dragElement(element);
});
function dragElement(elem){
var pos1=0,pos2=0,pos3=0,pos4=0;
elem.onmousedown=dragMouseDown;
function dragMouseDown(e){
e=e||window.event;
e.preventDefault();
pos3=e.clientX;
pos4=e.clientY;
document.onmouseup=closeDragElement;
document.onmousemove=elementDrag;
}
function elementDrag(e){
e=e||window.event;
e.preventDefault();
pos1=pos3-e.clientX;
pos2=pos4-e.clientY;
pos3=e.clientX;
pos4=e.clientY;
elem.style.top=(elem.offsetTop -pos2)+"px";
elem.style.left=(elem.offsetLeft-pos1)+"px";
}
function closeDragElement(){
document.omouseup=null;
document.onmousemove=null;
}
}
function printPDF(){
alert('Der Bericht sollte jetzt gedruckt werden');
}
function highLightAllValues(){
Array.from(movabelelements).forEach(element => {
element.classList.add("highlighted");
});
setTimeout(function(){
Array.from(movabelelements).forEach(element => {
element.classList.remove("highlighted");
});
}, 1500);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,h2{
text-align:center
}
.pdffile{
height: 100%;
width: 100%;
}
body,html{
height: 100%;
width: 100%;
}
#values_list_values{
padding: 15px;
}
#values_list{
text-align: center;
}
#values_list_values div{
margin: 15px;
border-bottom: solid;
border-width: 1px;
}
#values_list_values div:hover{
color: red;
}
#values_list_values div span{
margin: 10px;
}
.moveableElement{
border-style: solid;
border-color: transparent;
position: absolute;
z-index: 20;
padding: 20px;
}
.moveableElement:hover{
border-style: solid;
border-color: red;
cursor: move;
}
#values_list{
position: relative;
width: 20%;
display: inline-block;
padding: 10px;
padding-bottom: 50px;
}
#pdfFileWrapper{
width: 80%;
float: left;
height: 100%;
}
#highLightAllValuesButton{
width: 90%;
display: inline-block;
padding: 20px;
margin: 10px;
}
.highlighted{
border-style: solid;
border-color: red;
border-width: 2px;
}
#printButtonArea{
position: fixed;
bottom: 10px;
right: 10px;
width: 20%;
height: 50px;
line-height: 50px;
}
#printButtonArea button{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vorschau</title>
<link rel="stylesheet" href="vorschau.css">
</head>
<body>
<h1>Druckvorschau PDF</h1>
<div id="pdfFileWrapper">
<object class="pdffile" data="testpdf.pdf" type="application/pdf">
alt : PDF-Vorschau Fehlgeschlagen - Bitte anderen Browser Probieren
</object>
</div>
<div id="values_list">
<div id="printButtonArea">
<button onclick="printPDF()">Print</button>
</div>
<h2>Werte aus der Datenbank</h2>
<button id="highLightAllValuesButton" onclick="highLightAllValues()">Show all text blocks</button>
<div id="values_list_values">
<div>
<h3>One</h3>
<span>xy</span>
</div>
<div>
<h3>Material ID</h3>
<span>12</span>
</div>
<div>
<h3>Some Other ID</h3>
<span>some other id</span>
</div>
<div>
<h3>Identifikation</h3>
<span>lastvalue</span>
</div>
</div>
</div>
<div id="1" style="top:200px;left:100px" class="moveableElement">
Example value
</div>
<div id="2" style="top:250px;left:150px"class="moveableElement">
Car One
</div>
<div id="3" style="top:300px;left:200px" class="moveableElement">
<span>whatever</span>
</div>
<div id="4" style="top:350px;left:250px" class="moveableElement">number 12
</div>
</body>
<script src="vorschau.js"></script>
</html>
I have this menu in HTML / CSS:
HTML:
<div id="outer">
<div id="inner">King Kong</div>
<div id="inner">Table</div>
CSS:
#inner {
background-color: #547980;
width: 130px;
margin-left: 8px;
}
#inner:first-child {
background-color: #547980;
width: 130px;
margin-left: 8px;
margin-top: 8px;
}
div {
border-radius: 5px;
border: 2px solid black;
}
and I want load page in jQuery.
It can be like printer, after click on link from menu it should start from margin-left position 140 and printing to margin-right position 20 or
Loading like book when you go to another page.
But I don't know how to do it. Any advice please?
With jQuery you can use this script:
$('body').on('click', 'a', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('.result').load(href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Menu Link
<div class="result"></div>
I am preparing a simple javascript exercise to teach college-level students in graphic design how to make things interactive on the web.
I am new to javascript as well, and I have written a simple script that shows a modal box when you click a button. The problem is, I would have to make a new function for every single button on my page. Is there a way to have one function? Below is the code I have so far.
I have also made a jsfiddle but the modal isn't popping up. It works on my computer. I've also uploaded my code to my website.
<!doctype>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: rgba(220, 220, 220, 1);
}
#mainContent {
width: 960px;
height: 680px;
margin: 80px auto 0 auto;
background-image: url(home.png);
border: 1px solid gray;
border-radius: 8px;
background-color: white;
}
#button1 {
position: relative;
top: 250px;
left: 500px;
width: 40px;
}
#closeButton {
position: absolute;
top: -20px;
right: -20px;
width: 40px;
}
#infoBox.one {
position: relative;
top: 250px;
left: 530px;
visibility: hidden;
width: 300px;
margin: 0;
background-color: white;
border: 1px solid black;
padding: 15px;
text-align: center;
border-radius: 8px;
}
</style>
<script>
function infoBox() {
button = document.getElementById("infoBox");
button.style.visibility = (button.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="mainContent">
<a href='#' onclick='infoBox()'>
<img id="button1" src="button.png" />
</a>
<div id="infoBox" class="one">
<p>Your information goes here.</p>
<a href='#' onclick='infoBox()'>
<img id="closeButton" src="close.png" />
</a>
</div>
</div>
</body>
</html>
The simple approach you can try is to make use of the fact that click events bubble up the DOM tree (event delegation). So using this idea you can bind one event handler to parent container (for example body) and handle all clicks from there:
document.body.addEventListener('click', function(e) {
if (e.target.parentNode.className === 'btn-modal') {
infoBox();
}
}, false);
Note: I'm checking parentNode's class because click happens on the image element, which is child of the link with .btn-modal. Here is the version of the generic way to handle delegated events without relying on parent nodes being what we know: http://jsfiddle.net/4w37mkse/2/ if you are interested.
In above case I denote the buttons that we want our listener to handle with specific class:
<a href='#' class="btn-modal">
<img id="button1" src="http://www.jordankennedy.com/example/button.png"/>
</a>
This is very naive and basic example but it demonstrates the idea.
Demo: http://jsfiddle.net/4w37mkse/1/
I am trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling
CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>