I'm writing a code for my website. in this I use drag-drop to give point.
This is my jQuery code:
$('#click').click(function() {
$('#id0').ready(function() {
if ($(this).find('img#e1').length) {
a = 3;
} else if ($(this).find('img#e2').length) {
a = -3;
} else {
a = 0
};
$.post('php/noname1.php', {
point: a
})
});
});
and this is my php code
<?php
$con=mysqli_connect("localhost","name","pass","data") ;
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$point=$_POST['point'];
mysqli_query($con,"INSERT INTO test (point, part, comment) values ($point,'first','good')");
?>
When I click on #click, the php runs but in the database it only gets 3, even though I've changed the img from #e1 to #e2. I think the problem is in the jQuery code, but I don't see anything wrong in the code. Anybody know ?
Here's the html:
<body>
<header>
<div id='header'><img id='logo' src='photo/prlogo.jpg' width='420' height='120'></div>
</header>
<div id='body'>
<div id='product'><img id="product" src="photo/pr.jpg" ></div>
<div id='face'>
<img id="e1" class='e' src="photo/hap.png" width="50" height="50">
<img id="e2" class='e' src="photo/sad.png" width="50" height="50">
</div>
<button type="button" id='click' >Send</button>
<button type="button" id='undo'>Change your mind ?</button>
</div>
and this is how I create #id0, it's a div, droppable, I divided the picture into 5 div, #id0 is one of them:
for ( var i = 0; i < d; i++ ) {
divi.push('<div id="id' + i + '" class="tile" />');
}
I will assume that #id0 is your drop zone
HTML
<div id='product'><img id="product" src="photo/pr.jpg" ></div>
<div id='face'>
<img id="e1" class='e' src="photo/hap.png" width="50" height="50">
<img id="e2" class='e' src="photo/sad.png" width="50" height="50">
</div>
<div id="id0"></div>
<button type="button" id='click'>Send</button>
<button type="button" id='undo'>Change your mind ?</button>
jQuery
$('#click').click(function() {
if ($('#id0 img#e1').length) {
a = 3;
} else if ($('#id0 img#e2').length) {
a = -3;
} else {
a = 0
};
console.log(a)
});
Here's a fiddle http://jsfiddle.net/6JQxW/
Related
When I'm searching the specific name of the image. The rest of the name of the row still showing, but I just want to view only the data from the search. See image below
Display: Select all the data from the database.
<?php$checkQuery = "SELECT `h_business_logo`,`h_business_name`,`h_business_desc` FROM user_bsns WHERE h_isActive = 1 ORDER BY h_business_name DESC";
$checkResult = mysqli_query($db->conn, "$checkQuery")
?>
Card: This card has an animation
<div class="card-body col-lg-12" >
<div class="card-body col-lg-12">
<input class="form-control" id="myInput" type="text" placeholder="Search.." style="float:left; width:25%;">
<button class="btn" style="margin-left: 5px;background-color: #e72329;color: white;"> Search </button>
</div>
<?php
if(mysqli_num_rows($checkResult) > 0):{
}
while($row = mysqli_fetch_array($checkResult)){
?>
<div class="panel" id="myDIV">
<div class="holder flipH" >
<div class="card shadow-none">
<div class="col-sm-0 column <?=$row['h_business_name'];?>" >
<div class="front"style="float:left; >
<img src="<?=$row['h_business_logo']; ?> "
style="height:150px; width:155px; border-radius: 50%; ">
</div>
</div>
<span style= "text-align:center;">
<h5><?=$row['h_business_name'];?></h5>
</span>
<span style="text-align:center;">
<p><?=$row['h_business_desc'];?></p>
</span>
</div>
</div>
</div>
<?php
}
endif;
?>
</div>
<!-- /.card-body -->
</div>
And this one is the function of the search filter.
<script>
$(document).ready(function(){
$(".btn").on("click", function() {
var value = $("#myInput").val();
lastval = "col-sm-5 column "+value;
x = document.getElementsByClassName("column");
$("#myDIV div").filter(function() {
for (i = 0; i < x.length; i++) {
element = x[i];
if (element.className.indexOf(value) == -1){
element.classList.add("nonshow");
element.classList.remove("show");
}
else {
element.classList.add("show");
element.classList.remove("nonshow");
}
}
});
});
});
</script>
Please help me to improve the codes.
Update: I solved my problem using this script(jquery)
update: I used this script in order to search automatically.
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDiv ").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
i am new to ajax i am trying to build a website for movies so i need ajax to change the servers for the video but i can not do it how much i tried the div that i want to show is not being shown at all here is my codes
HTML
<?php
$get = $data->show(" SELECT * FROM servers ");
foreach ($get as $row) {
$id=$row['server_id'];
$name=$row['server_name'];
$link=$row['link'];
$movie=$row['film_name'];
?>
<button type="button" id="btn" class="btn btn-warning"><?php echo "$name"; ?></button>
<input type="hidden" id="serverid" value="<?php echo $id ?>">
<?php } ?>
<div id="show">
</div>
AJAX
<script type="text/javascript">
$(document).ready(function (){
$('#btn').click(function (){
var serverid = $('#serverid').val()
$.ajax({
url:"../../control/operation/index/view_movie.php",
method:"POST",
data:{serverid:serverid},
success:function(data)
{
$("#show").html(data);
}
});
});
});
</script>
view_movie.php
if (isset($_POST['serverid'])) {
$id=$_POST['serverid'];
$getuser = $data->getdata(" SELECT * FROM servers WHERE server_id='$id' ");
$link=$getuser['link'];
} ?>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="<?php echo $link ?>" allowfullscreen></iframe>
</div>
</div>
nothing is shown on the div that called show
In my php page i have these following code:-
<?php
include ('dbConnect/dbConnect.php');
$query = "Select * from RitualType";
$queryResult = mysqli_query($dbcon, $query);
?>
<!-- <div class="panel-grid-cell" id="pgc-110-6-1" >--><br/>
<div class="row-fluid" style="">
<div class="col-md-4" id="" style="position: fixed; left: 50pt; width:254px;height:50px; top: 87px; z-index: 99999999;" >
<div class="textwidget" ><?php $i = 0;
while ($row = mysqli_fetch_array($queryResult)) {
?><div id="SpanHoma">
<span class="" style="color: red;font-size: 14px;"><strong><?php echo $row['Name'] ?></strong></span>
<div class="textwidget" id="RitualsGroup" style="display:none;">
<?php
$query1 = "Select * from Rituals where RitualTypeId=" . $row['Id'];
$queryResult1 = mysqli_query($dbcon, $query1);
?>
<?php while ($row1 = mysqli_fetch_array($queryResult1)) { ?>
<div class="Homas" > <?php echo "<a style='color: #000000;' href='#" . $row1['Id'] . "'>" ?>
<i class="fa fa-hand-o-right"></i> <span class="what-we-offer" style="color: #000000;">
<?php echo $row1['Name'] ?> </span><?php echo '</a>'; ?><br />
</div><?php $i++;
} ?>
</div></div><?php } ?>
</div>
</div>
</div>
Where RitualType is Heading and Rituals are the contents.
I need to make the div expand and collapsible. Right Now the page is like this
A
B
C
D
E
When i click A then the contents of A is getting displayed like
A
a
b
c
B
C
D
E
But when i click B the div is not getting expanded. It only Works for A. I want the particular div to open when i click the Main Heading.
Javascript Code to toggleis shown below
$(function () {
$("#SpanHoma").on("click", function () {
$("#RitualsGroup").toggle();
});
$('.RitualsGroup').hide();
});
You need to try like this (convert id to class in html and change javascript code like below):-
$(function () {
$(".SpanHoma").on("click", function () {
$(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
});
});
$(function () {
$(".SpanHoma").on("click", function () {
$(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "SpanHoma">
<span>A</span>
<div class= "RitualsGroup" style = "display:none;">
<li>c</li>
<li>d</li>
<li>e</li>
</div>
</div>
<div class= "SpanHoma">
<span>B</span>
<div class= "RitualsGroup" style = "display:none;">
<li>f</li>
<li>g</li>
<li>h</li>
</div>
</div>
Its because of you are giving same id for multiple div. try this:
change this:
<div id="SpanHoma">
to
<div class="SpanHoma">
and
<div class="textwidget" id="RitualsGroup" style="display:none;">
to
<div class="textwidget RitualsGroup" style="display:none;">
in jquery:
$(function () {
$(".SpanHoma").on("click", function () {
$(this).find(".RitualsGroup").toggle();
});
});
Hello I'm new and I want a little help if is possible I want this:
I have 2 check box the first one is "correct" and the second one is "incorrect" but I have 7 screens "I don't use ajax" I want when you finish all the screens when you click "continue button" that it shows the % that is correct and incorrect, also I want to disable continue button but if you click listen button to enable continue button
Here is my code:
<body>
<div id="general">
<div hidden>
<audio id="audio" src=""></audio>
<div id="divAudio_Player">
<audio id="audio_player">
<source id="audio_player_ogv" src="" type="audio/ogg" />
<source id="audio_player_mp3" src="" type="audio/mpeg" />
</audio>
</div>
</div>
<ul class="plantilla">
<?php
$count = 1;
while ($count <= 7) {
?>
<li id="p<?=$count ?>" <?php if ($count==1){echo "class='ver'";} ?> >
<img src="img/foto<?=$count ?>.jpg" >
<ul class="sonido" >
<li class="record"><i class="fa fa-microphone"></i> Record (Grabar)</li>
<li class="stop"><i class="fa fa-stop"></i> Stop (Detener)</li>
<li class="play"><i class="fa fa-volume-up"></i> Listen
(Escuchar) </li>
</ul>
<div class="pregunta">I want some roast____.</div>
<input type="button" onclick="checkAnswers()" value="Check answers" class="boton">
<div class="respuesta">
<input type="button" onclick="play('audio<?=$count ?>')" value="I want some roast beef" class="playsound" >
<div class="opciones">
<p>Evaluate Yourself</p>
<input class="opc1" type="checkbox" value="1" onClick="Califica(1)" />
<input class="opc2" type="checkbox" value="2" onClick="Califica(2)" />
</div>
</div>
</li>
<?php
$count++;
}
$count--;
?>
<div class='continuar' ><input type="button" onclick="siguiente()" value="Continuar" class="button"> </div>
</ul>
</div>
</body>
<script>
state = 0 ;
var pMin = 1 ;
var pMax = <?php echo $count ?> ;
var respuestas = []
function play(pfile){
console.log(pfile);
var source = '<audio id="audio_player"><source id="audio_player_ogv" src="audios/' + pfile + '.ogg" type="audio/ogg" /><source id="audio_player_ogv" src="audios/' + pfile + '.mp3" type="audio/mpeg" /></audio>';
$('#divAudio_Player').html(source);
var aud = $('#audio_player').get(0);
aud.play();
}
function ActivecheckAnswers(e){
$("#p"+pMin+" .boton").addClass("ver");
}
function checkAnswers(e){
$("#p"+pMin+" .respuesta").addClass("ver");
}
$(".sonido li").click(function (){
console.log(this.className);
});
function Califica(opc){
$(".continuar").addClass("ver");
respuestas[pMin]=opc;
if (opc==1){
$("#p"+pMin+" .respuesta .opciones .opc1").attr('checked', true);
$("#p"+pMin+" .respuesta .opciones .opc2").attr('checked', false);
$('.opc1').on("click",function(){
if($(this).prop('checked')) {
$('.button').show();
}
else{
$('.button').hide();
}
});
}
else if (opc==2){
$("#p"+pMin+" .respuesta .opciones .opc1").attr('checked', false);
$("#p"+pMin+" .respuesta .opciones .opc2").attr('checked', true );
$('.opc2').on("click",function(){
if($(this).prop('checked')) {
$('.button').show();
}
else{
$('.button').hide();
}
});
}
};
function siguiente(){
var aud = $('#audio_player').get(0);
aud.pause();
$(".plantilla .continuar").removeClass("ver");
if (pMin<pMax){
$("#p"+pMin).removeClass("ver") ;
pMin++;
$("#p"+pMin).addClass("ver") ;
state = 0 ;
}
alert(respuestas);
}
</script>
I’m not sure I have understand all but you could archive that by doing a count on the clicked1 (correct) and something like this:
$finalresult = ($countresult / $totalscreen) * 100;
echo $finalresult;
It would show the % result.
i have 2 owl carousel in my page. my problem is one works perfectly but another one. i am using php codeigniter. how to resolve this..i have no idea.how to fix.
1. <script> $(document).ready(function(){ $('#owl-carousel1').owlCarousel({
loop:true,
items:3,
margin:9,
autoplay:true,
autoplayHoverPause:true,
nav:true,
autoplayTimeout:1000,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:3, autoplay:true,
nav:true,
loop:true, slideBy:3,
}
} }); }); </script>
<!----view page---->
<div class="row" style="background-color:#00263A">
<div class="container" style="margin-bottom:50px; margin-top:50px" >
<div class="owl-carousel" id="owl-carousel2" >
<?php
foreach($featuredJobs as $fjobs){ ?> <?php if($fjobs->attachment_url != '' ) {?>
<div class="item"><img src="<?php echo base_url(); ?>files/job_attachment/<?php echo $fjobs->attachment_url;?>"
width="250" height="250" class="responsive" />
<h5><?php echo $fjobs->job_name;?></h5>
<span><?php echo $fjobs->job_categories;?></span> <h6><strong><?php echo
'$'.$fjobs->budget_min.'- $'.$fjobs->budget_max;?></strong></h6>
<a href="<?php if(isset($loggedInUser->id) AND $loggedInUser->id != ''){echo site_url("users/login");}else {
echo site_url("job/createBid/".$fjobs->id);}?>"> <button
type="button" class="btn btn-primary pull-left" title=""><i
class="fa fa-gavel"></i>Bid For This Job</button></a>
</div>
<?php } } ?>
</div>
</div>
</div>
Alright, let me give you some insight. Always cross check your code, your Javascript vs your HTML.
Your first line of your Javascript is:
$(document).ready(function(){ $('#owl-carousel1').owlCarousel({
Yet your HTML is as followed
<div class="owl-carousel" id="owl-carousel2">
See your error already? You refer to owl-carousel2 in the HTML, while your Javascript seeks for instance #owl-carousel1. I leave to you then if you want to change your Javascript or your HTML.