one click inserting and closing via jquery pop up - javascript

i am trying to build a media gallery, while working on that i am screwed up with inserting image source and closing the pop on same insert click.
here it is, from where i am calling my popup and ajax
<div class="place"></div>
<div class="popup_bk" id="popup_bk"></div>
<div class="popup_gal" id="popup_bk"></div>
<script>
$(document).ready(function() {
function close (){
$(".popup_gal").hide();
$(".popup_bk").hide();
}
$('.actlink').click(function() {
$(".popup_gal").load("http://gtc.app/admin/media/gallery/").fadeIn('slow');
$(".popup_bk").fadeIn('slow');
});
$('.popup_bk').click(function() {
close();
});
});
</script>
and the other gallery page which is loaded via load (ajax) call is
<input type="checkbox" class="sel_img" value="<?php echo $media->id; ?>">
<img src="<?php echo $media->file_path . $media->file_name;?>" class="thumbnail index-thumb">
<input type="button" id="insert" name="insert" value="insert" class="btn btn-primary btn-lg pull-right" id="insert-btn">
<script>
$(document).ready(function() {
$('#insert').click(function(event) {
var chImg='';
$('.sel_img:checked').each(function(idx,ele){
chImg+=$(this).siblings('img').attr('src');
});
$('.place').html(chImg);
});
});
</script>
so can any help me with this screwed code, is this a good approach to do so or can be improved
secondly! i want to retrieve my processed data at <div class="place"></div> when it clicked on insert button and on the same time the popup should be closed.

thanks i tried more and its done with this
<script>
$(document).ready(function() {
$('#insert').click(function(event) {
var chImg='';
$('.sel_img:checked').each(function(idx,ele){
chImg+=$(this).siblings('img').attr('src');
});
$('.place').attr('src',chImg);
$('.popup_gal').css('display','none');
$('.popup_bk').css('display','none');
//alert(chImg);
});
});

Related

How to make a div refresh?

So this is my button div inside a PHP function called getDetails().
<div class='detail_cart'>
<a href='detail.php?add_cart=$prod_id'>
<button id='detail_button_add'>Add to cart</button>
</a>
</div>
Based on ip address, it counts how many products you've added in the cart and display them to my shop cart icon.
Every time the button is pressed it adds the product into a database but i need refresh page in order to see the updated count.
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
I tried to fix but no chance..
<script type= "text/javascript">
$(document).ready(function(){
$("#detail_button_add").bind("click",function(){
$("#total_cart").load("header.php");
});
});
</script>
"header.php" is the header section of my PHP.
You need to add an clear div with an span inside. You will get the data from an API in this case your header.php that returns 1,2 or any number and that will be displayed.
Your header.php
echo mysqli_num_rows($run_cart);
http_response_code(200);
exit;
<div id="total_cart">
<span id="total_cart_num"></span>
</div>
<div>
<a href="detail.php?add_cart=<?=$prod_id ?>">
<button id="detail_button_add">Add to cart</button>
</a>
</div>
<script>
document.querySelector("#detail_button_add").addEventListener("click", function(){
refreshCart();
});
function refreshCart(){
const xhr = new XMLHttpRequest();
// Add link to your Site that returns the count
xhr.open("GET", "header.php"); // Header returns Like 1,2,3 or any Number
xhr.addEventListener("load", function(){
if(this.status == 200){
document.querySelector("#total_cart_num").innerHTML = this.responseText;
} else {
alert("An error as been triggered!");
}
});
xhr.send();
}
</script>
If you mean that this is header.php:
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
and you do this:
$("#total_cart").load("header.php");
the result would be:
<div id ='total_cart'>
{content from header.php}
</div>
e.g.
<div id ='total_cart'>
<div id ='total_cart'>
{count of cart}
</div>
</div>
The solution is to skip the creation of div in the header.php:
(create that div elsewhere)
//remove echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
//remove echo "</div>";
If you don't get your click event to work, you might need to use on("click"... instead of bind("click"...
(on also works on dynamically created html elements (with content))
$(document).ready(function(){
$("#detail_button_add").on("click",function(){
//This header.php should NOT include the actual html-element (div) jsut the
//content you want INSIDE the htm-element with id #total_cart
$("#total_cart").load("header.php");
});
});
Another thing with your first code-snippet is that your link won't work:
<a href='detail.php?add_cart=$prod_id'>
It should be (taking for granted you have the code in a php-file)
<a href='detail.php?add_cart=<?php echo $prod_id;?>'>

How to limit javascript popup for first three visits on a page?

How a javascript popup can be restricted to show on only first three visits for a page?
here is the html code
<div id="vr-apper" style='display:none'>
<div id="popup">
<center>
<!-- Content -->
<input class="procced_pop_btn" type="submit" name="submit" value="Proceed" onClick="PopUp('hide')" />
</center>
</div>
</div>
Here is javascript code to show popup
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('vr-apper').style.display = "none";
else document.getElementById('vr-apper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
</script>
I would recommend using cookies that increments by 1 using incremention method ++ of JavaScript, and if the cookies value is 4 or above it won't show the popup!

Preventing caching image from jQuery load

When I make a page, I'm stucking in caching problem. Here is my simplified code.
[HTML]
<body>
<div>here parent contents</div>
<input id="btn1" class="btn" data-val="1" type="button" />
<input id="btn2" class="btn" data-val="2" type="button" />
<input id="btn3" class="btn" data-val="3" type="button" />
<div id="childContents"></div>
</body>
[javascript]
$(".btn").click(function (e) {
$("#childContents").load("url?val=" + e.getAttribute("data-val"),
function () {
success call back function
});
});
And the point is that :
[Child Html]
<!-- the image change depanding on some condition -->
<div style="background-image: url('imgUrl')">
contents
</div>
Whenever I click button and reload the child view, I hope the image, which child view has, change.
But since the cached image, the child's image does not change. How can I do for it?
I want to solve it with javascript, since sometimes the jquery version become a big problem and I always consider the version of it. So I want to make my code of small dependance on jQuery. (eg. jquery’s async ajax’s option and so on is not working lower version of IE)
You can add the current time as a cache breaker.
$(".btn").click(function (e) {
$("#childContents").load("url?val=" + e.getAttribute("data-val"),
function () {
//get time since 1970 in milliseonds
var d = new Date();
var n = d.UTC();
//append a cache breaker
var imgUrl = "background.jpg" + "?t=" + n;
//set the img url
$('#backgrounddiv').css('background-image', 'url("'+imgUrl+'")');
});
});
<div id="backgrounddiv" style="background-image: url('background.jpg')">
contents
</div>

Saving checkbox values causes issues with showing/hiding linked image

I have written a code to show or hide a picture based on the value of corresponding checkboxes. I was able to have the picture shown or hidden on reload if 'checked="checked"' is written into the checkbox.
I was able to write a code to save the value of the checkbox but then the picture is no longer tethered to the checked/unchecked value and changes with reload.
My end goal is to have the a checked checkbox to show the picture and unchecked checkbox to hide the picture and I need the value saved to allow the correct value to work on reload after a change has been made.
This is just a small snip of the overall code. The whole thing is a series of 64 checkboxes linked to 64 different pictures, which overlay a mapped background image.
I should also mention that this will ultimately be used for a SharePoint site, if that makes a difference.
Thanks in advance for any help!!
(There is a link to jsfiddle demo at the bottom)
HTML:
<a href="home.aspx">
<p id="A1R1" style="left:146px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A1R1" alt="A1R1" src="red.jpg" width="108" height="60" />
</p>
</a>
<a href="home2.aspx">
<p id="A2R2" style="left:273px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A2R2" alt="A2R2" src="green.html" width="108" height="60" />
</p>
</a>
<fieldset class="fieldset-auto-width" style="width:165px">
<center>
<p style="font-size:25px">Show/Hide</p>
</center>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A1 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A1G" checked="checked" /> </center>
</fieldset>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A2 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A2G" checked="checked" /> </center>
</fieldset>
</fieldset>
<center>
<input type="button" id="ReserveerButton1" value="save" onclick="save()" />
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" />
</center>
JQUERY:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
(function(i, $) {
var $A_1_G = $('#A1G'),
$A_1_R_1 = $('#A1R1');
var toggleMain = function() {
$A_1_R_1.slideToggle();
};
if ($A_1_G.is(':checked')) {
toggleMain();
}
$A_1_G.on('click', toggleMain);
})(document, jQuery);
(function(i, $) {
var $A_2_G = $('#A2G'),
$A_2_R_2 = $('#A2R2');
var toggleMain = function() {
$A_2_R_2.slideToggle();
};
if ($A_2_G.is(':checked')) {
toggleMain();
}
$A_2_G.on('click', toggleMain);
})(document, jQuery);
</script>
Javascript:
function save() {
var checkbox = document.getElementById('A1G');
localStorage.setItem('A1G', checkbox.checked);
var checkbox = document.getElementById('A2G');
localStorage.setItem('A2G', checkbox.checked);
}
function load() {
var checked = JSON.parse(localStorage.getItem('A1G'));
document.getElementById("A1G").checked = checked;
var checked = JSON.parse(localStorage.getItem('A2G'));
document.getElementById("A2G").checked = checked;
}
function wis() {
location.reload();
localStorage.clear()
}
load();
Link to fiddle code
This seems to take care of it: http://jsfiddle.net/w0yL5njs/
Move your 'toggleMain w/ jQuery' code block to after your 'save/load' code block, so that the checkboxes will be pre-checked before the images' initial visibility are set.
So the order of your <script> tags will be
a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
b) The script that uses jQuery.
c) your save/load script that doesn't use jQuery.
Actually, (b) and (c) can be in the same <script> but (a) must be separate.
Add display:none to the <p> containing the images.
Is that what class="hidden" was intended to do? You could add .hidden { display: none; } to your CSS...
// Remove
if ($A_1_G.is(':checked')) {
toggleMain();
}
// ADD
if ($A_1_G.is(':checked')) {
$A_1_R_1.show();
}else{
$A_1_R_1.hide();
}
//remove
if ($A_2_G.is(':checked')) {
toggleMain();
}
if ($A_2_G.is(':checked')) {
$A_2_G.show();
}else{
$A_2_G.hide();
}

Replace Log In text to say Logged in with jquery

I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.
Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in.
This is a simple demo site and only needs simple code. Thank you!
<Head>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form name="myform" action="#" method="post" id="subForm">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'193731474136796', cookie:true,
status:true, xfbml:true
});
</script>
<img src="facebookbutton.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
<div class="line-separator"></div>
<div class="input">
<input type="username" name="cm-name" id="name" placeholder="Username" />
</div>
<div class="input">
<input type="password" name="cm-password" id="password" placeholder="Password" />
</div>
<input type="submit" value="login" id="submit" /> Forgot Username or Password?
</form>
And I have a linked javascript page for the popup.
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
event.preventDefault();
methods.close();
});
});
}
}).call(this);
EDIT:
I figured out what was wrong. Thank you guys!
jsfiddle
This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted.
http://jsfiddle.net/gVVcM/
jQuery:
$('button').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
HTML:
<a id='login' href='#'>Log In</a>
<button>Submit</button>
edit: now that you posted the submit id.
$('#submit').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
edit2: Prevent Default?.
$('#submit').on('click',function(e){
e.preventDefault();
$('#login').replaceWith('<span>Logged In</span>');
});
If you're using jQuery you can call the following once you've successfully logged in.
$('a#login.open').text('Logged In');
This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.

Categories

Resources