Let me start by saying I'm a total beginner at JavaScript/jQuery. I've just started learning it because I want to use some JavaScript features for my website.
What I want to achieve is the following when you click on the edit button:
Before:
<div class="container container-table">
<div class="row content">
<div class="col-md-4 text-center">
<div class="container">
<div class="well well-sm">
<div>
<strong>Alle producten</strong>
</div>
</div>
<div id="products" class="row list-group">
<?php
$items = $dbh->SelectAllproduct();
foreach ($items as $item) {
$id = $item['idproduct'];
if ($item['bijnaop']==0){
$status = "Het product is niet op";
}
if ($item['bijnaop']==1) {
$status = "Het product is bijna op";
}
if ($item['op']==1) {
$status = "Het product is helaas op";
}
echo '<div class="item col-xs-12 col-lg-4 col-md-6">
<div class="thumbnail">
<img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
' . $item['productnaam'] . '</h4>
<p class="group inner beschrijving list-group-item-text">
' . $item['productbeschrijving'] . ' <br> Allergieen: '. $item ['allergieen'].'</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
€ ' . $item['productprijs'] . ' </p>
</div>
<div class="col-xs-6 col-md-6" >
'.$status.'
</div>
<div class="col-xs-6 col-md-6">
<input type="button" href="#" name="'.$item['productnaam'].'" value = "Voeg toe"></a>
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
</div>
</div>
</div>
</div>
After:
<body>
<div class="container container-table">
<div class="row content">
<div class="col-md-4 text-center">
<div class="container">
<div class="well well-sm">
<div>
<strong>Alle producten</strong>
</div>
</div>
<div id="products" class="row list-group">
<?php
$items = $dbh->SelectAllproduct();
foreach ($items as $item) {
$id = $item['idproduct'];
if ($item['bijnaop']==0){
$status = "Het product is niet op";
}
if ($item['bijnaop']==1) {
$status = "Het product is bijna op";
}
if ($item['op']==1) {
$status = "Het product is helaas op";
}
echo '
<div class="item col-xs-12 col-lg-4 col-md-6">
<div class="thumbnail">
<img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
<input type ="text" value="' . $item['productplaatje'] . '">
<div class="caption">
<h4 class="group inner list-group-item-heading">
<input type ="text" value = "' . $item['productnaam'] . '">
</h4>
<p class="group inner beschrijving list-group-item-text">
<input type ="text" value="'. $item['productbeschrijving'] . '">
</p>
<p>
<input type ="text" value = "Allergieen: '. $item ['allergieen'].'">
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
<input type = "text" value="€' . $item['productprijs'] . ' "
</p>
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
</body>
I've looked at different scripts on how to replace divs with input, but every time it just doesn't work when I test it myself or it isn't exactly what I wanted.
Edit: will add code in a few min
You can just change the divs contentEditable="true" , then style them they they look like inputs. Then remove contentEditable altogether to accept changes.
Related
I have this div in seosystem/index.php
<div class="class" id="ScoreResult" style="display:none;">
<div class="row border border-5 " style="background:whitesmoke;">
<div class=" col toast w-20 z-depth-5 shadow-lg p-3 mb-5 bg-white rounded show w-100">
<div class="toast-header">
<strong class="me-auto">Description</strong>
<!-- <button type="button" class="btn-close" data-bs-dismiss="toast"></button> !-->
</div>
<div class="toast-body ">
<div class="progress" style="height:20px; width:200px;">
<div class="progress-bar bg-success" style="width:33.33%"></div>
<div class="progress-bar bg-warning" style="width:33.33%"> </div>
<div class="progress-bar bg-danger" style="width:33.33%"> </div>
</div>
<p>10/10</p>
</div>
</div>
<div class="col-sm border border-5 col-xxl mx-auto">
<h4><?php echo "Title: " . $title; ?></h4>
<?php echo "<iframe style=\"background-color:whitesmoke;\" position=\"center\"allow=\"accelerometer\"; gyroscope; width=\"100%\" height=\"315\" src=\"http://www.youtube.com/embed/$ytcode\" frameborder=\"0\" allowfullscreen></iframe></div>";
?>
</div>
</div>
and i have this function in seosystem/controller/youtubedata.php i tried using Js it didn't work
so i want when the user submit the button it shows the div to display the data
if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['url']) && isset($_GET['submit'])){
/* echo "</br >" ;
echo $input_Url_data . "Button clicked" ; */
$id_position = strstr($input_Url_data,"=");
$id_position = trim($id_position, "=" );
echo '<script type="text/javascript">',
'showtable(){
document.getElementById(<?php echo "ScoreResult" ;?>).style.display = "block";
}',
'</script>' ;
}
This the form of the input and the button i'm not sure should i make the action index.php or seosystem/controller/youtubedata.php
<form class="d-flex justify-content-center " method="GET" action="index.php">
<div class="input-group ">
<input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" aria-label="Example text with button addon" aria-describedby="button-addon1">
<input class="btn" value="Analyze" name="submit" type="submit" id="button-addon1"></input>
</div>
</form>
two invalid variables there.. TITLE & YTCODE. Well I don't know how you got those.
But to display the DIV Only when response is valid here's the code;
youtube.php
<?php
if($_SERVER['REQUEST_METHOD'] == "GET" && isset($_GET['url']) && isset($_GET['submit'])){
/* echo "</br >" ;
echo $input_Url_data . "Button clicked" ; */
$id_position = strstr($input_Url_data,"=");
$id_position = trim($id_position, "=" );
$verified_success = "yes"; // This is the conditional variable.
/* echo '<script type="text/javascript">',
'showtable(){
document.getElementById(<?php echo "ScoreResult" ;?>).style.display = "block";
}',
'</script>' ; */
}
index.php
<?php
// Stop Irrelevant Warning Signs From Showing such as invalid variables
error_reporting(E_ERROR | E_PARSE);
include("youtube.php");
?>
<?php
if ($verified_success == NULL) {
?>
<form class="d-flex justify-content-center " method="GET" action="">
<div class="input-group ">
<input type="text" class="form-control" name="url" placeholder="Enter Youtube Video URL" aria-label="Example text with button addon" aria-describedby="button-addon1">
<input class="btn" value="Analyze" name="submit" type="submit" id="button-addon1"></input>
</div>
</form>
<?php } ?>
<?php
if ($verified_success != NULL) {
?>
<div class="class" id="ScoreResult">
<div class="row border border-5 " style="background:whitesmoke;">
<div class=" col toast w-20 z-depth-5 shadow-lg p-3 mb-5 bg-white rounded show w-100">
<div class="toast-header">
<strong class="me-auto">Description</strong>
<!-- <button type="button" class="btn-close" data-bs-dismiss="toast"></button> !-->
</div>
<div class="toast-body ">
<div class="progress" style="height:20px; width:200px;">
<div class="progress-bar bg-success" style="width:33.33%"></div>
<div class="progress-bar bg-warning" style="width:33.33%"> </div>
<div class="progress-bar bg-danger" style="width:33.33%"> </div>
</div>
<p>10/10</p>
</div>
</div>
<div class="col-sm border border-5 col-xxl mx-auto">
<h4><?php echo "Title: " . $title; ?></h4>
<?php echo "<iframe style=\"background-color:whitesmoke;\" position=\"center\"allow=\"accelerometer\"; gyroscope; width=\"100%\" height=\"315\" src=\"http://www.youtube.com/embed/$ytcode\" frameborder=\"0\" allowfullscreen></iframe></div>";
?>
</div>
</div>
<?php } ?>
code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping
You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?
I use multiple contact forms in modal windows. I am using Bootstrap, PHP and some JS. I cant find out why it`s not working. Please help.
My html for ONE form (I have 15 same forms):
<div class="modal-container">
<div class="modal" id="modal-24">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="text-center">LEDENICA<sup>TM</sup><br>ШАМПИНЬОНЫ</h2>
<img src="images/line.png" alt="line" class="img-responsive heading-line">
</div>
<div class="modal-body">
<img alt="left" class="left-modal-control" src="images/chevron-left.png">
<img alt="right" class="right-modal-control" src="images/chevron-right.png">
<div class="row modal-row">
<div class="image-col col-lg-5 col-md-5 col-sm-12 col-xs-12">
<img class="img-responsive" alt="product" src="images/tm-4.png">
</div>
<div class="info-col col-lg-7 col-md-7 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-bottom">
<p>Наши грибы собираются на пике созревания и моментально замораживаются, сохраняя истинный вкус, задуманный природой. Таким образом, Вы можете круглый год наслаждаться вкусными и полезными грибами Ledenica™.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Вес продукта:</p>
<p class="desc">0,400 кг</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Срок годности:</p>
<p class="desc">24 мес</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<p class="red">Условия хранения:</p>
<p class="desc">До -18<sup>o</sup> С</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-top">
<p class="red">Пищевая ценность в 100г</p>
</div>
<div class="info-table">
<div class="table-content-1 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Энергетическая ценность</p>
</div>
<div class="table-content-2 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>113 кДж/27 ккал</p>
</div>
<div class="table-content-3 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Белки</p>
</div>
<div class="table-content-4 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>4,5г</p>
</div>
<div class="table-content-5 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>Углеводы</p>
</div>
<div class="table-content-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p>0,1г</p>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p><span class="red">Состав:</span> шампиньоны</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr-top">
<p>Запросить прайс-лист</p>
</div>
<form id="contact-form-modal" method="post" action="contact-modal.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="modal-col-first col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group form-group-modal">
<input id="form_email" type="text" name="email" class="form-control form-control-modal" required="required" data-error="Пожалуйста, введите email." placeholder="Email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="modal-col col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="submit" class="btn btn-danger btn-send" value="ПОЛУЧИТЬ ПРАЙС">
</div>
</div>
</form>**
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/contact-modal.js"></script>
My PHP:
<?php
// configure
$from = 'myemail#gmail.com>';
$sendTo = '<myemail#gmail.com>';
$subject = 'New message from online form';
$fields = array('email' => 'email'); // array variable name => Text to appear in email
$okMessage = 'Спасибо.';
$errorMessage = 'Извините, ошибка.';
// let's do the sending
try
{
$emailText = "You have new message from online form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
mail($sendTo, $subject, $emailText, "From: " . $from);
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}
My JS:
$(function () {
$('#contact-form-modal').validator();
$('#contact-form-modal').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact-modal.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form-modal').find('.messages').html(alertBox);
$('#contact-form-modal')[0].reset();
}
}
});
return false;
}
})
});
After form submit the 1 Form everything work correct. But if I submit other forms it reloads the window with result "Thank you". So, I can see only "thank you" on white. But I know that my result message must appear without reloading. How can I overwrite the JS to make all my forms correct?
Your Email is empty because your post data has email with a small "e" and in your php you search for Email with an Uppercase "E".
Second in your javascript you check in the "if", if default is prevented... but I don't get where you prevent the default. Change your javascript to
$('#contact-form-modal').on('submit', function (e) {
e.preventDefault();
and than leave out the if-statement.
Otherwise try to make some debug outputs on interessting spots in your code with var_dump in php or console.log in javascript to see what's going on in your code ;)
I'm trying to get some elements on my webpage to stay where they are when scrolling (fixed), but I can't seem to get it working using position:fixed;.
When I try the design gets pretty broken. Everything moves to the right side, and is getting 100% in width automatically. All elements I want to set fixed also stays on top of each other...
This is how it is supposed to look...
The header (blue bar) and the row below is going to stay fixed where it is. How would I do that using Twitters Bootstrap?
Here is some HTML:
<div class="container">
<div class="row">
<div id="search_wrapper" class="col-md-8 col-md-offset-2 grey">
<div id="search" class="col-md-12">
<div class="threed left"></div>
<div class="threed right"></div>
<div class="logo_small"></div>
<form method="post" class="search">
<div class="form-group">
<button class="form-control-feedback pull-right" type="submit" name="submit_search"><i class="fa fa-search"></i></button>
<input type="text" name="q" placeholder="Søk etter firma, bransje og sted">
</div>
</form>
</div>
</div>
<div class="wrapper col-md-8 col-md-offset-2">
<div id="locals_wrapper" class="col-md-3 grey">
<h3><i class="fa fa-map-marker"></i>Steder</h3>
<hr>
<?php
if (isset($data['location']) && $data['location']) {
foreach ($data['location'] as $c => $ms) {
echo '<div class="county checkbox"><label> <input class="c" type="checkbox" name="business_county" value="'. $c .'">'. $c .' </label><div class="municipalities" data-county="'. $c .'">';
foreach ($ms as $m) {
echo '<div class="checkbox"><label><input type="checkbox" name="business_municipality" data-county="'. $c .'" value="'. $m .'">'. $m .'</label></div>';
} echo '</div></div>';
}
}
?>
</div>
<div id="results_wrapper" class="col-md-9 grey">
<h3><i class="fa fa-bullseye"></i>Resultater</i></h3>
<hr>
<div id="results">
</div>
</div>
</div>
</div>
</div>
I have tried adding position:fixed; to #search, #wrapper.