the code is working but it has a bug that if you first add a item and go to the modal it will show first the disabled button before the enable if you go back to the item
<script>
$(document).ready(function(){
$("div.container1").click(function(){
$('#show_cart').load('temp_user_cart.php');
if ($("table#dataTable tbody").length) {
$("#deleteButton").attr("disabled", false);
console.log(true);
}
})
});
</script>
Thank for your suggestion and insight, I already solve the problem by using php
<div class="" style="text-align: center; ">
<div class="pl-2 pr-2 pt-3 pb-0" style="display:inline-block;border: 2px solid black; border-radius:5px; ">
<?php
$sqlbd = "SELECT SUM(item_total) AS SUB_TOTAL FROM temp_cart WHERE temp_id = '".$_SESSION['temp_id']."' ";
$resultbd = $conn->query($sqlbd);
while($rowbd = $resultbd->fetch_assoc()){
if ($rowbd['SUB_TOTAL'] == 0) {
?><p style="color: green; ">EMPTY CART</p>
<?php
}else{
?><p style="color: green; "> ₱ <?php echo $rowbd['SUB_TOTAL']; ?>.00</p>
<?php
}
?>
</div>
</div>
<?php
if($rowbd['SUB_TOTAL'] == 0){
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary" disabled="disabled">Go to cart</button>
</a>
</div>
</div>
<?php
}else{
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary">Go to cart</button>
</a>
</div>
</div><?php
}
}
?>
Related
Refering to this question , it has a helpful answer but it's partial answer because it only shows three unique popup dialogs - static.
I'm new to jQuery and working in this project. I want this to be dynamic with MySql database. Let's say I have a collection of 20 products stored in a tbl_products and each product has a uniqe id, name and price. When user clicks for more product details, I want to display the Magnific popup dialog that shows the product details, showing the product image(small thumbnail), product name and product price.
This link is inside loop:
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
Here is the Code:
<div class="page-content">
<?php
$query = "SELECT * FROM tbl_product ORDER BY product_id ASC LIMIT 20";
$result = mysqli_query($connect, $query);
$ctr = 0;
if(mysqli_num_rows($result) > 0)
{
$i = 0;
$param = 'right';
while($row = mysqli_fetch_array($result))
{
//echo "<h2>" . $row[0] . "</h2>";
$data = $row["product_image"];
$images = explode(";", $data);
if($param=='left'){
$param = "right";
}
else{
$param = "left";
?><div class="clear"></div><?php
}
?>
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<span class="fa fa-check fa-3x" style="color: black; margin-left:45%;"></span>
<h3 style="text-align:center; margin-top:0px;margin-bottom:20px;">Artikulli u shtua në shportë</h3>
<div class="table-responsive" style="border: none !important;">
<table style="border: none !important;">
<tr>
<th width="80%"></th>
<th width="20%"></th>
</tr>
<tr>
<td style="font-size:12px;">
<div class="news-thumbs" style="margin-left:0px; margin-right:20px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p style "font-size:11px;">
<?php
foreach(range(1, $row[10]) as $i)
{
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</p>
</div>
</a>
</div>
</td>
<td style="margin-left:-50px; font-size:28px; font-style:bold; line-height:20px;">€<?php echo $row[2];?> <br>
<p style="font-size:11px; font-style:bold;">TVSH - 8% </p>
<p style="font-size:10px; line-height:20px;">Dërgesa Falas</p>
Shiko detalet
</td>
<td style="font-size:12px;"> </td>
</tr>
</table>
</div>
<hr style="border-top: 0.5px solid #E8E8FF;">
<button type="button" class="btn btn-default popup-modal-dismiss">Vazhdo me blerje</button>
<button type="button" style="float:right;" class="btn btn-primary">Kryje porosinë</button>
<!-- </div>
<div class="news-thumbs" style="margin-left:-50px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p><?php echo $row[2];?></p>
</div>
</a>
<hr style="border-top: 0.5px solid #E8E8FF;">
</div> -->
</div>
<a href="m-detail-<?php echo $row[0]; ?>.html">
<div class="half-material-box-<?php echo $param; ?>">
<span class="fa fa-heart-o fa-2x"style="color: red; aria-hidden="false";></span>
<!--<i class="center-text full-bottom huge-icon color-yellow-dark fa fa-bolt"></i>-->
<amp-img src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" layout="responsive" width="127" height="130"></amp-img>
<p class="center-text small-text half-bottom">
<!--<i class="fa fa-angle-right"></i><?php echo substr_replace($row[1], "...", 60);?>-->
</p>
<h3 class="small-text lef-text bold" name="hidden_name" style="color:#969696;"><?php echo $row[1]; ?></h3>
<h4 class="left-text thick" name="hidden_price" style="color:#f94b2b;">€ <?php echo $row[2]; ?></h4>
<?php
foreach(range(1, $row[10]) as $i)
{
//echo $i;
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</div>
</a>
<!-- </form> -->
<?php
}
}
?>
<div class="clear"></div>
</div>
jQuery:
(function ($) {
$(document).ready(function() {
$(".popup-with-zoom-anim").each(function() {
$(this).magnificPopup({
type: 'inline',
fixedBgPos: true,
fixedContentPos: true,
overflowY: 'hidden',
closeBtnInside: false,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
})(jQuery);
It shows the Popup dialog the way I want but the problem is that it shows the same data no matter what product I click!
I can't figure it out weather it has problem with Id or .each instance in jQuery. Any help would be appreciated!
Thank you!
Here i want to append the div to the parent div using closest function.Here is my code please have a look
var maxAppends = 0;
function add_field(id)
{
var update_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Documentsss</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
$(".update_new_"+id).append(update_new);
maxAppends++;
}
<div id="update_new_<?php echo $value->id;?>" class="update_new_<?php echo $value->id;?> item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1"
class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
<?php
if (!empty($value->documents)) {
$uploaded_file = json_decode($value->documents);
}
if (!empty($uploaded_file)):foreach ($uploaded_file as $v_files_image): ?>
<div class="">
<input type="hidden" name="fileName[]"
value="<?php echo $v_files_image ?>">
<span class=" btn btn-default btn-file">
<span class="fileinput-filename"> <?php echo $v_files_image ?></span>
×
</span>
<strong>
<a href="javascript:void(0);" class="RCF"><i
class="fa fa-times"></i> Remove</a></strong>
<p></p>
</div>
<?php endforeach; ?>
<?php else: ?>
<span class="btn btn-default btn-file"><span
class="fileinput-new">Select File</span>
<span class="fileinput-exists"><?= lang('change') ?></span>
<input type="file" name="files[]">
</span>
<span class="fileinput-filename"></span>
<a href="#" class="close fileinput-exists" data-dismiss="fileinput"
style="float: none;">×</a>
<?php endif; ?>
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong><a href="javascript:void(0);" id="update_more" onclick="add_field('<?php echo $value->id;?>');" u_id="<?php echo $value->id;?>" class="addCF item-row-click update_more_<?php echo $value->id;?>"><i
class="fa fa-plus"></i> Add More
</a></strong>
</div>
</div>
</div>
when i click add_field i want a div to append to the parent div with class update_new_<?php echo $value->id;?>,so in order to that i had done a script.please have a look
without using closest function the div is appending but the values of div is not passing the value through post,so i want to do the append function with closest function,please help me to solve
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high";
$(function () {
var jqxhr = $.getJSON(url, function () {
console.log("success");
}).done(function (data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>"
+ "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> "
+ item.title+"</div></div>";
}
}).fail(function (data) {
console.log("error");
});
});
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
Hello Friends, I am new in google custom search API and jquery.
This code is perfect on page load but i want to load images on button click.
How to load images on button click i tried other peoples code but it can't do what i want.
I want to get the URL of images from custom search and display that images in html.
so, please help me
Add the json calling function inside the button click.And passing the input string to the URL
$('#findNow').on('click',function(){
document.getElementById("content11").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
var jqxhr = $.getJSON(url, function() {
console.log("success");
}).done(function(data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>";
}
}).fail(function(data) {
console.log("error");
});
})
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
I have script function and its working on laptop but it not calling on mobile (checked on Androids only). Even not displaying simple alert message.
What can be reason for this?
This is link:
<a href="javascript:void(0)"
onclick="doit(id='<?php echo $results[$i]->ID; ?>', color = '<?php echo get_post_meta($pid, 'color', true);?>',color2='<?php echo get_post_meta($pid, 'color2', true);?>',
unit_size='<?php echo get_post_meta($pid, 'unit_size', true);?>', unit_size2='<?php echo get_post_meta($pid, 'unit_size2', true);?>',col_unit_gst='<?php echo get_post_meta($pid, 'col_unit_gst', true);?>',
col_unit_Xgst='<?php echo get_post_meta($pid, 'col_unit_Xgst', true);?>',col2_unit2_Xgst='<?php echo get_post_meta($pid, 'col2_unit2_Xgst', true);?>',
col2_unit2_gst='<?php echo get_post_meta($pid, 'col2_unit2_gst', true);?>')" value="<?php echo $results[$i]->ID;?>" class="mycls<?php echo $pid;?>"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">For Price</button></a>
Here is function created
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Price List</h4>
</div>
<div class="modal-body">
<script language="JavaScript">
function doit (id='', color = '',color2='', unit_size='', unit_size2='',col_unit_gst='', col_unit_Xgst='',
col2_unit2_Xgst='', col2_unit2_gst=''){
alert('Yes we are here');
document.getElementById('color').innerHTML = color;
document.getElementById('unit_size').innerHTML = unit_size;
document.getElementById('col_unit_gst').innerHTML = col_unit_gst;
document.getElementById('col_unit_Xgst').innerHTML = col_unit_Xgst;
/* document.getElementById('id').innerHTML = id; */
document.getElementById('color2').innerHTML = color2;
document.getElementById('unit_size2').innerHTML = unit_size2;
document.getElementById('col2_unit2_Xgst').innerHTML = col2_unit2_Xgst;
document.getElementById('col2_unit2_gst').innerHTML = col2_unit2_gst;
}
</script>
<div class="ratelist-heading">
<ul class="head">
<li>Colour
</li>
<li>Unit Size
</li>
<li>ex.GST
</li>
<li>Incl.GST
</li>
</ul>
<ul class="ratelist">
<li><p style="float: none;" id="color"></p> <p style="float: none;" id="color2"></p></li>
<li><p style="float: none;" id="unit_size"></p> <p style="float: none;" id="unit_size2"></p></li>
<li><p style="float: none;" id="col_unit_Xgst"></p> <p style="float: none;" id="col2_unit2_Xgst"></p></li>
<li><p style="float: none;" id="col_unit_gst"></p> <p style="float: none;" id="col2_unit2_gst"></p></li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update: This is also not working in Internet Explorer 11. Seems to be browser compatibility issue.
Have you checked if JavaScript is allowed in your phone browser? Go to settings and check if it allows JavaScript , otherwise if it doesnt allow it wont play any code.
I figure out the error. Here are changing which i made:
function doit (id, color,color2, unit_size, unit_size2,col_unit_gst, col_unit_Xgst,
col2_unit2_Xgst, col2_unit2_gst)
Previously i was passing as :
function doit (id='', color = '',color2='', unit_size='', unit_size2='',col_unit_gst='', col_unit_Xgst='',
col2_unit2_Xgst='', col2_unit2_gst='')
This was not working in "Internet explorer 11" and also have same issue in mobile devices. Its fixed now.
Thanks all for your time.
How can I access seemore button to all next seemore buttons? It only works for first one. How can I make it -show dynamic ids so it will work for all seemore buttons?
javascript:
<script type="text/javascript">
function changeClass() {
if (content.classList.contains("show")) {
btn.innerHTML = "Show Less";
} else {
btn.innerHTML = "Show More";
}
}
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
php:
<?php
$id1 = $_SESSION['id'];
$sql = "select fname from User_registration where U_id=$id1";
$result = mysql_query($sql ,$conn);
$row = mysql_fetch_array($result);
$sql1 = "select * from Job_post where u_id=$id1";
$result1 = mysql_query($sql1,$conn);
$row1 = mysql_fetch_array($result1);
$c = $row1[job_category];
?>
<div class="job" style="background-color:#E2F5D0;width:100%;">
<div class="container" id="jobcontainer">
<div class="row" id="jobrow">
<div class="col-sm-12" id="jobcol">
<h1 class="jobh"> Ciao <?php echo $row['fname'];?> </h1>
<h3 class="jobh3">This is job_posting page. with description and budget
as per categories and sub categories. profile details are show here.
This is job_posting page. with description and budget
as per categories and sub categories. profile details are show here. </h3>
</div>
</div>
<div class="row" id="jobrow1">
<div class="col-sm-8">
Description
</div>
<div class="col-sm-4">
Budget
</div>
</div>
<?php
$sql2 = "select * from Job_post where job_category='$c'";
$resultr = mysql_query($sql2,$conn);
$index = 0;
while($row4 = mysql_fetch_array($resultr)) { ?>
<div class="row" id="jobrow2">
<div class="col-sm-8">
<h3 class="jobh33"> <?php echo $row4[project_name]; ?> </h3>
<h3 class="jobh3">
<?php $row2 = $row4['project_description'];
echo substr($row2, 0, 250);?>
<br>
See more. </h3>
<div id="example" class="more">
<h3><?php echo substr($row2,250);?></h3>
<h3>See less.</h3>
</div>
<br>
<div class="col-sm-4">
<?php echo $row4['job_category'];?>:
<div class="jobh3">
<?php echo $row4['job_sub_category'];?>
</div>
</div>
<div class="col-sm-4">
Location:
<div class="jobh3">
<?php echo $row4['job_location'];?>
</div>
</div>
</div>
<div class="col-sm-4">
<h3 > <?php echo $row4['budget'];?> </h3>
<button type="button" class="btn btn-success"> Fai I'Offeria </button>
</div>
</div>
<?php }?>
</div>
</div>
You will want to use classes to do this. I am using jQuery because I don't know how to do this sort of thing with raw javascript:
<div class="group">
<span class="name">Joe</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about joe
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<div class="group">
<span class="name">Frank</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about frank
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<div class="group">
<span class="name">Jitendra</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about this OP
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
function ClickParent(ClickElem,ElemFind)
{
$("."+ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("."+ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
</script>
DEMO:
http://jsfiddle.net/qfqbmw2h/