I have a div with the name "frined-replace" and an autosuggestion field. When the page loads the contents inside the frined-replace div shown. when we write something to the input field to search then the frined-replace is replaced with the data of the autosuggestion. Now the question is that when i write something the frined-replace div is replaced by the data and when i erase the input field characters which i have entered then i can't reshow the frined-replace div elements.
frined-replace:
<li style="float:left; width:240; margin:2px 0 4px 2px; border-bottom:1px solid #CCC; background-color:#f90; height:30px;">
<a href="<?php echo $config->baseUrlTs;?>messages?user_id=<?php echo $myusrid;?>" >
<img src="<?php echo $config->baseUrl;?><?php echo $imgs;?>" alt="" width="26" height="26" />
<font style="font-weight:bold; color:white"><?php //global $config;
echo $myusrname;
?></font></a>
</li>
and this is the autosuggestion part:
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="")
{
$("#erase").empty();
return;
}
$.ajax({
url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+$(this).val()+"&user_id="+<?php echo $userid;?>,
context: document.body,
success: function(data){
$("#frined-replace").replaceWith(data);
//$("#search").val('');
//$('#search').val('').empty();
}
});
});
I just made a snippet code which show a possible answer
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="") {
$("#frined-replace").html($("#frined-replace-bck").html());
$("#frined-replace-bck").remove();
$("#erase").empty();
return;
}
if (!$('#frined-replace-bck').length) {
var backup = $("#frined-replace").clone();
backup.prop('id', 'frined-replace-bck');
backup.css('display', 'none')
$("#frined-replace").before(backup);
}
//Replace with your ajax call
$("#frined-replace").html('<li>' + qr + '</li>');
//$("#search").val('');
//$('#search').val('').empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input id="search" type="text"/>
<div id="frined-replace">My initial content</div>
</div>
I fixed it. I made another div with display to none after i show the data in that div instead of replacing it with frined-replace div.
<style type="text/css">
#loadsearch
{
display:none;
width: 250px;
position: absolute;
margin-top: -8px;
height: 100px;
z-index: 1;
margin-left: 2px;
height:auto;
}
</style>
<div id="loadsearch">
</div>
In the jquery
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="")
{
$("#erase").empty();
$("#loadsearch").hide();
return;
}
$("#loadsearch").empty();
$.ajax({
url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+qr+"&user_id="+<?php echo $userid;?>,
context: document.body,
success: function(data){
$("#loadsearch").show();
$("#loadsearch").append(data);
//Here i am showing the data inthe div instead of replacing
},
});
});
Related
I have ajax and javascript, now i am fetching this modal to another page or to another separate browser.
For now I can fetch the modal but I needed it to refresh the page before the modal will show. how can I do it without clicking refresh. I've done some research and I've seen setInterval function but how should i implement it through my code thanks! all I want is to not refresh the page before the modal will show.
Onto my modal form here it is, this is the code whereas after I submit the submit button
if ($count != 0) {
while($row = mysqli_fetch_array($data)) {
echo '<div id="myModal" class="modal" style="position:fixed; display: none; padding-top: 100px;
left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); ">
<div class="container" style="width: 100%">
<div class="card col-12" style="background-color: red; color: white;">
<div class="card-header">
<p><h3 class="text-center">Announcement</h3></p>
</div>
<div class="card-body text-center">
<h5>'.$row['additional_info'].'</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class="modal-content" id="img01">
</div>';
$dataid = $row['id'];
}
}
here it is the script where I want to put the setInterval function for the page to automatically not refresh
document.getElementById('myModal').style.display='block';
for now it has no any special code that is just how I show the modal but it needed to be refresh
I expect the output of the modal should be display once i already click the submit button. and for my code the button was already click and i just want to insert the setInterval function for the modal to show without refreshing the page
refresh
<html>
<head>
<script src="addon/jquery/jquery.js"></script>
</head>
<body>
<div id="modalid">
</div>
<button onclick="ra()">REFRESH</button>
<script>
function ra() {
$.ajax({
type: "GET",
url: "testajax.php",
data: { val : "ann" },
dataType: "json",
success: function(data) {
if(data.status == "OK") {
document.getElementById("modalid").innerHTML = data.value
setTimeout( function() { document.getElementById('myModal').style.display = 'none'; }, 3000);
}
else {
alert(data.value)
}
}
});
}
</script>
</body>
</html>
ajax
<?php
$jStatus = "ERROR";
$jValue = "";
$val = filter_input(INPUT_GET, "val");
if($val == 'ann') {
$jStatus = "OK";
$jValue = "<div id='myModal' class='modal' style='position:fixed; display: block; padding-top: 100px;
left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); '>
<div class='container' style='width: 100%'>
<div class='card col-12' style='background-color: red; color: white;'>
<div class='card-header'>
<p><h3 class='text-center'>Announcement</h3></p>
</div>
<div class='card-body text-center'>
<h5>HELLLOOO</h5>
<p>Please click refresh button to resume after the announcement</p>
</div>
</div>
</div>
<img class='modal-content' id='img01'>
</div>";
}
$jsonReply = array( "status" => $jStatus, "value" => $jValue);
echo json_encode($jsonReply);
?>
is this what you want?
I'm learning JS (without JQuery for now!) and got a problem with my code and need your help!
I'm working on a code which fetch the image title out of a database and put it in a kinda list.
If the user clicks on the title, a other div box pops up and shows the image describtion.
My Problem is that my code only display the first "img_descr" in each popup box.
And because the "img_title" list is dynamically (it depends on what the user types in the search bar) it makes it even more a bit difficult.
Below I will paste a simple version of my code with php code and below that i will past a snippet. (by clicking on the "play" button you can see a simulation of my code).
Click on each title and you will see, only 1 describtion will show up for each title.
▽ Here you can see a simple version of my code with PHP code ▽
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result))
{
echo "<div class='click_box'>";
echo "<a class='img_id'>ID: ".$row['img_id']."</a><br>";
echo "<div class='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
echo "</div>";
echo "<div id='popup'>";
echo "<div class='img_descr'><a>Descr: <b>".$row['img_descr']."</b></a></div>";
echo "</div>";
}
?>
</div>
<style>
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
#popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
opacity: 0;
}
.img_descr{
color: white;
}
</style>
<script>
let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
// retrieve the actual value of opacity for bg
bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
// if the opacity is "0" make it "1" otherwhise make it "0"
let opacity = bgStyle == "0" ? "1" : 0;
// use the opacity variable
bg.setAttribute("style", `opacity:${opacity};`);
})
})
</script>
</body>
</html>
▽ Here you can see a snippet i created, but without PHP code ▽
there you can see, only the first "img_descr" do work!
let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
// retrieve the actual value of opacity for bg
bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
// if the opacity is "0" make it "1" otherwhise make it "0"
let opacity = bgStyle == "0" ? "1" : 0;
// use the opacity variable
bg.setAttribute("style", `opacity:${opacity};`);
})
})
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
#popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
opacity: 0;
}
.img_descr{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<div class='click_box'>
<a class='img_id'>ID: 1</a><br>
<div class='img_title'><a>Title: <b>Golden Retriever</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>UK:DFYDFBAERSDFBYDFBYDFydfbydfBaeydfb1311y</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 2</a><br>
<div class='img_title'><a>Title: <b>Appenzeller Sennenhund</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>Swiss:erydfydfbrehaydydfbydfydbaerydf2ydfb</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 3</a><br>
<div class='img_title'><a>Title: <b>German Shepard</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>Germany:ydf3d1fby3df1by3dfb6ydfb31ydf31ydf</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 4</a><br>
<div class='img_title'><a>Title: <b>Alaskan Klee Kai</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>USA:f3ngxfgxfgnxfxfgnxfg3xf31gnxfgner6ae13</b></a></div>
</div>
</div>
</body>
</html>
It seems it have to do something with the "id="popup"... and if i change the popup div from "id" to "class", change "document.getElementById" to "document.getElementsByClassName" and change the css "#popup" to ".popup", nothing work then.
If you would make it totally different, please let me know. (i'm a js beginner)
first of all, you have to replace the multiple popup ids with classes (in css and html)
Here is the js code with the corrections.
let myarray = Array.from(document.querySelectorAll('.click_box'));
myarray.map((e) => {
e.addEventListener("click", event => {
let popups = Array.from(document.querySelectorAll('.popup'));
popups.map((popup) => {
popup.setAttribute("style", 'opacity:0');
})
let bg = e.nextElementSibling;
bg.setAttribute("style", 'opacity:1');
})
})
here is the process :
get the click boxes (notice that I use .click_box as my click target)
get all popups and hide them using opacity: 0
get the element after the clicked one using nextElementSibling. as the click event is on clickBox, the next element will be the popup
show the popup using opacity: 1
jsfiddle here : https://jsfiddle.net/1L0ehpuy/18/
warning : this code depends on the html markup to work properly : you have to keep the popup right after the click_box element otherwise the nextElementSibling won't be the popup
here is the php code with classes instead of ids. with this php code and the js above, everything should be fine
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result)) {
echo "<div class='click_box'>";
echo "<a class='img_id'>ID: ".$row['img_id']."</a><br>";
echo "<div class='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
echo "</div>";
echo "<div class='popup'>";
echo "<div class='img_descr'><a>Descr: <b>".$row['img_descr']."</b></a></div>";
echo "</div>";
}
?>
new version to hide the popup on 2nd click
let myarray = Array.from(document.querySelectorAll('.click_box'));
myarray.map((e) => {
e.addEventListener("click", event => {
let bg = e.nextElementSibling;
if (bg.style.opacity == 1) {
bg.setAttribute("style", 'opacity:0');
} else {
let popups = Array.from(document.querySelectorAll('.popup'));
popups.map((popup) => {
popup.setAttribute("style", 'opacity:0');
})
bg.setAttribute("style", 'opacity:1');
}
})
})
there are not many changes : at the begining of the function, I just added a if to check if the related popup is already shown. if so, I hide it.
fiddle here : https://jsfiddle.net/1L0ehpuy/21/
This is new, edited version of my code. I've transfered every jQuery code into pure JavaScript. I've also tried to comment my JS code so it will be easier for you to understand it.
//Pass the clicked element in function 'openPopup' and name it as 'el'
//We are passing the clicked element from the HTML, you can see it at "onclick='openPopup(this)'"
//The word 'this' is a variable for current element
function openPopup(el){
var parent = el.parentElement;
var child = null;
//Loop through children of parent element
for (var i = 0; i <= parent.childNodes.length; i++) {
//Only if children has class, check if children's class contains 'popup'
if(parent.childNodes[i].classList){
if (parent.childNodes[i].classList.contains("popup")) {
//If we have the popup element, add it to a variable 'child'
child = parent.childNodes[i];
break;
}
}
}
//If assigned popup is opened
if(child.classList.contains("visible")){
//Remove class 'visible' from the popup element (popup is stored in 'child' variable)
child.classList.remove("visible");
} else {
//Close all popups by removing class 'visible' from all popups
var popups = document.getElementsByClassName("popup");
for (var i = 0; i < popups.length; i++) {
popups[i].classList.remove("visible");
}
//Add class 'visible' to popup assigned to our button (still stored in 'child' variable)
child.classList.add("visible");
}
}
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
.popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
display: none;
}
.popup.visible{
display: block;
}
.img_descr{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 1</a><br>
<div class='img_title'><a>Title: <b>Title 1</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 1</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 2</a><br>
<div class='img_title'><a>Title: <b>Title 2</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 2</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 3</a><br>
<div class='img_title'><a>Title: <b>Title 3</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 3</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 4</a><br>
<div class='img_title'><a>Title: <b>Title 4</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 4</b></a></div>
</div>
</div>
</div>
</body>
</html>
I am working on a page for pre-registration to events on my website. On this page, people need the ability to add names into as many slots as the event creator would like (so it needs to handle 3 person basketball teams and 50 person banquets). I have had a high quality facebook-like search bar made so that I can neatly search through the database and select the desired people. Sadly I have this search bar being created by a for loop that creates many different ID filled search bars but every one of them is left empty and the first search bar is the only one that is filled.
I found that it deals with the jQuery code at the top of my page. My question/issue is that I need this jQuery to work on multiple search bars on a single page. If anyone can help me accomplish this I'd be greatly appreciative.
The "top code" or JQuery code that pulls from the db successfully is:
$(function(){
$(".search").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
$.ajax({
type: "POST",
url: "../searchMyChap.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult").html(html).show();
}
});
}return false;
});
jQuery("#divResult").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#divResult").fadeOut();
}
});
$('#inputSearch').click(function(){
jQuery("#divResult").fadeIn();
});
});
</script>
<style type="text/css">
body{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.contentArea{
width:600px;
margin:0 auto;
}
/*
#inputSearch
{
width:350px;
border:solid 1px #000;
padding:3px;
}
*/
#divResult
{
position:absolute;
width:545px;
display:none;
margin-top:-1px;
border:solid 1px #dedede;
border-top:0px;
overflow:hidden;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
box-shadow: 0px 0px 5px #999;
border-width: 3px 1px 1px;
border-style: solid;
border-color: #333 #DEDEDE #DEDEDE;
background-color: white;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede;
font-size:12px; height:50px;
}
.display_box:hover
{
background:#0088cc;
//background:#3bb998;
color:#FFFFFF;
cursor:pointer;
}
The for-loop code that prints the search bars is as follows:
for($i = 0; $i < $looper; $i++)
{
echo'
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Member Name:</label>
<input type="text" class="form-control search" name="member'.$i.'" autocomplete="off" id="inputSearch" placeholder="Search...">
<div id="divResult" style="z-index:999; margin-top: 35px;" ></div>
</div>
</div>
</div>';
}
EDIT: Working JSFiddle
The first issue is that with each iteration of the for loop an element is created with id="divResult". An ID should be used once in the whole document. I have changed the for loop to produce an element with class="divResult" instead. If you use this change, remember that your CSS will need to be changed accordingly.
for ($i = 0; $i < $looper; $i++) {
echo '
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Member Name:</label>
<input type="text" class="form-control search" name="member'.$i.'" autocomplete="off" id="inputSearch" placeholder="Search...">
<div class="divResult" style="z-index:999; margin-top: 35px;"></div>
</div>
</div>
</div>';
}
Next we iterate over each .search element. Within each iteration we can find the corresponding 'result' element by using jQuery's next() function, which retrieves the immediately following sibling of an element. If the code is ever changed such that the 'results' element does not appear straight after the `.search' element, this will need changing.
$(function () {
$('.search').each(function(index) {
var $searchElement = $(this);
var $resultElement = $searchElement.next();
console.log(index, $searchElement, $resultElement);
$searchElement.on('keyup', function() {
var inputSearch = $searchElement.val();
var dataString = 'searchword=' + inputSearch;
if (inputSearch != '') {
$.ajax({
type: "POST",
url: "../searchMyChap.php",
data: dataString,
cache: false,
success: function (html) {
$resultElement.html(html).show();
}
});
}
return false;
});
$resultElement.on("click", function (e) {
var $clicked = $(this);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$searchElement.val(decoded);
});
$(document).on("click", function (e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
$resultElement.fadeOut();
}
});
$searchElement.on('click', function () {
console.log(index + ' clicked');
$resultElement.fadeIn();
});
});
});
I have this code:
var limit = 15;
$(document).ready(function() {
var data = 'clients=&categories=&keywords=&limit='+limit;
$.ajax({
type: 'POST',
url: 'index.php?ind=work&op=get_list',
data: data,
success: function (data) {
$('.list').html(data);
$('.thumb').click(function() {
alert($('.thumb').attr('id'));
});
}
});
});
This code returns stuff like this:
<div class="thumb" id="1" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/1.png">
</div>
<div class="thumb" id="2" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/2.png">
</div>
<div class="thumb" id="3" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/3.png">
</div>
But every time I click any of the divs, an alert shows "1" (no matter if I click div with id=1, div with id=2 or div with id=3). Could someone please tell me how to make an alert with the right div id every time I click that div? Thanx in advance.
You probably want this:
var limit = 15;
$(document).ready(function() {
var data = 'clients=&categories=&keywords=&limit='+limit;
$.ajax({
type: 'POST',
url: 'index.php?ind=work&op=get_list',
data: data,
success: function (data) {
$('.list').html(data);
$('.thumb').click(function() {
alert($(this).attr('id'));
});
}
});
});
$('.thumb').attr('id') returns the id of the first element with class thumb, no matter where it's called from.
$('.thumb').attr('id') returns the id of the first .thumb element, which is what you are seeing.
Change your event to use the element that was clicked:
$('.thumb').click(function(e) {
alert($(e.target).attr('id'));
});
I am using JS-Graph.IT to create a flowchart diagram and want to upon selection of a dropdown option, load a div with an altered version of the flowchart. Prior to loading AJAX content, the flow diagram works and shows boxes with arrows pointing from one box to another. After loading AJAX content, the connectors can't seem to be generated.
I found here that it is because of the need to clear the canvas before using the same canvas ids. SourceForge I tried following the instructions and copied the delCanvas function to the JS file, and calling the delCanvas function and reinitializing page objects in the header of the HTML page as such:
<script type="text/javascript">
jQuery(document).ready(function() {
JSGraphIt.initPageObjects();
$("body").delegate("#button1", "click", function() {
delCanvas('#mainCanvas');
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside17.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.initPageObjects();
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
}
});
});
});
</script>
Thanks in advance for your help!
HTML page:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- Jquery for Slide Toggle -->
<script type="text/javascript" src="../js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="../sf-homepage.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
}
</style>
<script type="text/javascript">
function onLoad()
{
JSGraphIt.initPageObjects();
}
jQuery(document).ready(function() {
$(".block").bind('click', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({ // ajax call starts
url: 'srvrside.php', // JQuery loads serverside.php
data: 'button=' + button, // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#content').html(''); // Clear #content div
$('#content').append(data);
}
});
return false; // keeps the page from not refreshing
}, this));
$("#button1").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
$.ajax({ // ajax call starts
url: 'serverside15.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
});
</script>
</head>
<body onload="onLoad();">
<select id="combo">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="button1" type="button" value="Click!" />
<div id="mainCanvas" class="canvas" style="float: left; background: #F8F8F8; width: 100%; height: 60%; border-top: #ccc 1px solid !important; border-bottom: #ccc 1px solid !important; margin: 0 !important; border-left: 0; border-right: 0; padding: 0 !important;">
<?php
***database connection details***
while($row = mysqli_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block" style="background: red;';
echo ' !important; left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
echo '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
echo $row['name'];
echo '</div>';
}
// Creating connectors
$result = mysqli_query($con,"SELECT * FROM dependencies");
while($row = mysqli_fetch_array($result))
{
echo '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
echo 'down_start">';
}
else {
echo 'right_start">';
}
echo '<img class="connector-end" src="arrow.gif">';
echo '<label class="middle-label">'.$row['desc'].'</label>';
echo '</div>';
}
// Closing database connection
mysqli_close($con);
?>
</div>
</body>
</html>
Server side PHP:
<?php
// Get value of clicked button
$button = $_GET['button2'];
$all = '';
***Database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div id="'.$row['id'].'_block" class="block" style="border: 3px solid #000; background: red;';
$all .= 'left:'.$row['lft'].'px; top:'.$row['top'].'px; width: 100px;">';
$all .= '<span style="font-weight: bold; font-size: 8px;">'.$row['level'].'</span> ';
$all .= $row['name'];
$all .= '</div>';
}
***database connection***
while($row = mysqli_fetch_array($result))
{
$all .= '<div class="connector '.$row['app1id'].'_block '.$row['app2id'].'_block ';
if ($row['down_arrow'] == 1) {
$all .= 'down_start">';
}
else {
$all .= 'right_start">';
}
$all .= '<img class="connector-end" src="arrow.gif">';
$all .= '<label class="middle-label">'.$row['desc'].'</label>';
$all .= '</div>';
}
// Closing database connection
mysqli_close($con);
print json_encode($all);
?>
JS-Graph.IT JS