Pop up Related Issue - javascript

There is a button in my webpage which calls another page through AJAX.The page carries certain data named "Match" if the query is successfully ran. Now I want that if a Match is recieved from the other page then a pop up comes. Here's my code
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<h>ksadjaskjdaskdjaskdjaskdjaskdjaskdjasdk</h> </div>
</div>
<button class="abc" style="font-size:30px;cursor:pointer" >☰ Accept</button>
<script type="text/javascript">
var a="Match";
$(document).ready(function(){
$(".abc").click(function(){
$.ajax({
type: 'POST',
url: 'accept.php?w1=<?php echo $id ?>',
success: function(data) {
// $("p").text(data);
if(a=data)
{
function openNav()
{
document.getElementById("myNav").style.height = "100%";
}
}
else
{
location.reload();
}
}
});
});
});
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

Related

how can i convert this code from hover to either click or toggle

Below is the script works fine with hover but need it to be either a toggle or a click function if anyone has any ideas on how to achieve this.
it collects data from different php files depending on the button that is hoverd over thats fine but when working on the page it pops up all the time kind of annoying
<script type="text/javascript">
$(document).ready(function(){
$(".container").hide();
$(['btn1', 'btn2', 'btn3']).each(function(){
var btn = this;
var con = $("#"+btn).children('.container');
$("#"+btn).hover(
function(){
$(".hover").mouseout();
$(this).addClass('hover');
var cache = $(con).children('p');
//check to see if content was loaded previously
if(cache.size()){
con.show();
}else{
$(con).show();
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'data/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
},
//mouseout
function(){
if($.browser.msie){
$(con).hide();
}else{
$(con).fadeOut(250);
}
$(this).removeClass('hover');
}
);
});
});
</script>
<div id="btn1" class="wrapper">
<div class="button">
<p><i class="fa fa-users" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
<div id="btn2" class="wrapper">
<div class="button">
<p><i class="fa fa-comments" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
Thanks guys i figured out how to do this and also make the coding less.
so what it does is you create the dropdown button with the btn1 id
and the next button with id of btn2.
the parsing php files called btn1.php you code what you need to display the data in the content div of the buttons
Aaaargh sorry seems like only the first button works shows the conent div and closes when clicked but subsequent new buttons show the content div Ajax requests are all fine
but dont close when clicked again
<script>
$(".wrapper").click( function()
{
var btn = $(this).attr('id');
var conte = $('.content').css('display');
var con = $(this).children('.content');
if (conte == 'block') {
$(con).css('display','none');
} else if (conte == 'none') {
$(con).css('display','block');
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'configuration/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
});
</script>

Adding a onclick function to AJAX

So I have 5 Tab Buttons and 5 Tab Containers. Each container is attached to an AJAX that sends Longitude and Latitude to my php file and after its processed, the container will show the results. I have had no luck consolidating my AJAX's into one function. However, can someone help me add an onclick function to the AJAX call so it only executes when the user clicks the respective tab button?
ALSO
After obtaining the users location in the first AJAX function, can I use those variables again for another AJAX, without requesting location again?
Here is my website: https://www.aarontomlinson.com
Here is the needed code
AJAX FUNCTIONS
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showShopsSponsored);
} else {
$('#ShopsSponsored').html('Geolocation is not supported by this browser.');
}
});
function showShopsSponsored(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$(".spinner").show();
$.ajax({
type:'POST',
url:'ShopsSponsored.php',
data:'latitude='+latitude+'&longitude='+longitude,
success:function(msg){
if(msg){
$("#ShopsSponsored").html(msg);
}else{
$("#ShopsSponsored").html('Not Available');
}
$(".spinner").hide();
}
});
}
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showShopsDistance);
} else {
$('#ShopsDistance').html('Geolocation is not supported by this browser.');
}
});
function showShopsDistance(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$(".spinner").show();
$.ajax({
type:'POST',
url:'ShopsDistance.php',
data:'latitude='+latitude+'&longitude='+longitude,
success:function(msg){
if(msg){
$("#ShopsDistance").html(msg);
}else{
$("#ShopsDistance").html('Not Available');
}
$(".spinner").hide();
}
});
}
HTML FOR TAB CONTAINER
<!-- TAB BUTTONS -->
<ul id="tabs" class="menu-left">
<li><button2><a id="tab1" ><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></a></button2></li>
<li><button2><a id="tab2">Distance</a></button2></li>
<li><button2><a id="tab3">Rating</a></button2></li>
<li><button2><a id="tab4">OPEN</a></button2></li>
<li><button2><a id="tab5">Delivery Price</a></button2></li>
</ul>
<!-- TAB CONTAINERS -->
<div class="tabcontainer" id="tab1C">
<div style="position: relative;" id="ShopsSponsored">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div class="tabcontainer" id="tab2C">
<div style="position: relative;" id="ShopsDistance">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
// TAB CONTAINER SCRIPT
$(document).ready(function() {
$('#tabs li a:not(:first)').addClass('inactive');
$('.tabcontainer').hide();
$('.tabcontainer:first').show();
$('#tabs li a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.tabcontainer').hide();
$('#'+ t + 'C').fadeIn('fast');
}
});
});
**********MY GOAL*****************
I want this function to load with the page and send the results to the container like it does..
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showShopsSponsored);
} else {
$('#ShopsSponsored').html('Geolocation is not supported by this browser.');
}
});
function showShopsSponsored(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$(".spinner").show();
$.ajax({
type:'POST',
url:'ShopsSponsored.php',
data:'latitude='+latitude+'&longitude='+longitude,
success:function(msg){
if(msg){
$("#ShopsSponsored").html(msg);
}else{
$("#ShopsSponsored").html('Not Available');
}
$(".spinner").hide();
}
});
}
Now I want this function load WHEN I click the TAB
function
function showShopsDistance(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$(".spinner").show();
$.ajax({
type:'POST',
url:'ShopsDistance.php',
data:'latitude='+latitude+'&longitude='+longitude,
success:function(msg){
if(msg){
$("#ShopsDistance").html(msg);
}else{
$("#ShopsDistance").html('Not Available');
}
$(".spinner").hide();
}
});
}
tab
<button2><a id="tab2">Distance</a></button2>
BONUS POINTS
Can this function also be written without requesting location? Instead using the location variables from the first function?
$(document).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showShopsDistance);
} else {
$('#ShopsDistance').html('Geolocation is not supported by this browser.');
}
});
function showShopsDistance(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$(".spinner").show();
$.ajax({
type:'POST',
url:'ShopsDistance.php',
data:'latitude='+latitude+'&longitude='+longitude,
success:function(msg){
if(msg){
$("#ShopsDistance").html(msg);
}else{
$("#ShopsDistance").html('Not Available');
}
$(".spinner").hide();
}
});
}
THANK YOU! THIS ONE SHOULDN'T BE THAT HARD I JUST KEEP FAILING!
Some remarks:
I would use active class instead of an inactive class as you only really care about the active one.
You might find it useful to use HTML5 data attributes for your containers. data-tab is 1-1 mapping for the tabs and their containers. data-url is the url that will be called in the AJAX request.
I believe you only need to get the geolocation once. So you could get the latitude and longitude, and store them somewhere such as hidden element or localStorage. Then have your AJAX calls use whatever is stored in the localStorage.
Untested but it would look something like this:
HTML
<!-- TAB BUTTONS -->
<ul id="tabs" class="menu-left">
<li class="active"><button2><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></button2></li>
<li><button2>Distance</button2></li>
<!-- etc -->
</ul>
<!-- TAB CONTAINERS -->
<div class="tabcontainer active" data-tab="ShopsSponsored" data-url="ShopsSponsored.php">
<div style="position: relative;">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<div class="tabcontainer" data-tab="ShopsDistance" data-url="ShopsDistance.php">
<div style="position: relative;">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<!-- etc -->
CSS
/* by default, tabs should be hidden */
.tabs li, .tabcontainer {
display: none;
}
/* only active ones should be visible */
.tabs li.active, .tabcontainer.active {
display: block;
}
JavaScript
$(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
saveCoordinates(position.coords);
});
} else {
// probably good idea to have some default geolocation since all your AJAX calls seem to rely on a geolocation
saveCoordinates({ latitude: 1, longitude: 2 });
}
$('#tabs li a').click(function (e) {
e.preventDefault();
var link = $(this),
tab = link.closest('li'),
tabContainer = $('.tabcontainer[data-tab="' + link.data('tab') + '"]'),
spinner = tabContainer.find('.spinner');
// activate tab
tab.addClass('active').siblings().removeClass('active');
// activate tab container
tabContainer.addClass('active').siblings().removeClass('active');
// make AJAX call
spinner.show();
$.ajax({
type: 'POST',
url: tabContainer.data('url'),
data: {
latitude: localStorage.getItem('latitude'),
longitude: localStorage.getItem('longitude')
},
success: function (msg) {
spinner.hide();
if (msg) {
tabContainer.find('> div').html(msg);
} else {
tabContainer.find('> div').html('Not Available');
}
}
});
});
function saveCoordinates(coords) {
localStorage.setItem('latitude', coords.latitude);
localStorage.setItem('longitude', coords.longitude);
}
});

How to add onload event to a div using jquery or javascript?

hi guys i am trying to call a function on the onload event of a div but i can't find anything that would help me call a function on the onload event.
i did try to call it using this "oQuickReply.swap" but it didn't work as that would only swap the position. so can you tell me how can i add a onload event on a div?
my question is different as i have a function that can only be called in a loop to take the 'post_id' value to the function the onload event i want is to call my function select_comment() which would get me all the comments from my database to the page. let me show you my code and if there is something you dont understand tell me beforehand i will detail it.
<script type="text/javascript">
$(window).load(function(e){
// grab the scroll amount and the window height
loadmore();
select_likes();
select_share();
// get_recieve_friend_requests();
// get_sent_friend_requests();
});
function loadmore(){
var lastID = $('.load-more').attr('lastID');
// alert(lastID);
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/get_all_post"); ?>',
data: {id: lastID },
dataType: 'json',
beforeSend:function(data){
$('.load-more').show();
},
success:function(data){
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
if (json=="") {
$("#bottom").append('<div class="btn btn-default col-md-6" >'+'No More Results'+'</div>');
$("#Load_more_data").hide()
}else{
$postID=json[json.length-1].id;
$('.load-more').attr('lastID', $postID);
$.each(json, function (key, data) {
var post_id=data.id;
var post_status=data.status;
var status_image=data.status_image;
var multimage=data.multimage;
if(!post_status=="" && !status_image==""){
$("#status_data").append('<div class="panel-footer" onload="select_comment('+post_id+');"><div class="row"><div class="col-md-12">13 people like this</div></div><ul class="media-list"><li class="media_comment"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content"><textarea name="textdata" id="content_comment" cols="25" rows="1" class="form-control message" placeholder="Whats on your mind ?"></textarea><button type="submit" id="comment_button" onclick="comment_here('+post_id+');">Comment</button></form></div></div></li></ul></div></div>');
});
}
}
});
}
function select_comment(post_id)
{
alert(post_id);
var User_id = $('.id_data').attr('value');
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/select_comment"); ?>',
data: {Post_id:Post_id,User_id:User_id},
dataType: 'json',
success:function(data)
{
alert('you have like this');
}
});
}
now you see that's how i want to use my function to call when that div loads.
Please Refer Below Code. may Be help you
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 550px;
height: 180px;
margin-left: 100px;
}
</style>
</head>
<body onload="myFunction()">
<div id="divstyle">
<h2>Welcome to the tutorial for onload event!</h2>
<hr />
<h3>The function will be executed once the page is fully loaded.</h3>
</div>
<script>
function myFunction() {
alert("Hello, User!");
}
</script>
</body>
</html>
use jQuery to this:
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$('.when-element-with-this-class').ready(function() {
alert( "ready!" );
});
</script>
<div class="when-element-with-this-class">
when this div is ready, js procced function with alert command
</div>
https://jsfiddle.net/g7re6khu/
you can use ready function on any element, window or document. Once the targeted element is loaded the required block is executed. Below is example for same.
$("#myid").ready(function(){
//block will be loaded with element with id myid is ready in dom
})

how to refresh or reload a particular div on some function using angular js?

<div id="divId_graph" ></div>
<div class="graph" id="graph" style="margin-top:-15px"></div>
controller.js:
$('#graph').svg({ onLoad:drawIntro});
The drawIntro is a function which calculate values.It's not calling when I recall the function with in same page by change some input values.
$.ajax({
type: "GET",
url: "/templates/ch_div_content.html?loadPortion=graph",
data: "partnerSelect="+$rootScope.partnerSelect,
success: function(msg){
if (box1) box1.remove();
$("#divId_graph").html(msg);
}
});
the the ch-div-content.html is the part i want to reload and it is as follows
<?php if ($loadPortion == 'graph'){ ?>
<script language="javascript">
if($( ".graph" )[1]!==undefined){
$( ".graph" )[1].remove();
}
</script>
<div class="graph" id="graph" style="margin-top:25px">
</div>

Ajax setInterval is executed twice for manipulated notification

First, Let's me explain. I have a page to monitoring my users. In this page, I can see all the request of my users on a table and I can see too the total of the request is in to the server. My question is, How can I make a notification when a new request is come. I want to make a notification like big window pop-up said "New Request Is Come" and one tone of music that will be play.
This is my code :
Main page
<!-- start: Header -->
<div class="container-fluid-full">
<div class="row-fluid">
<noscript>
<div class="alert alert-block span12">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have JavaScript enabled to use this site.</p>
</div>
</noscript>
<!-- start: Content -->
<!--First indicator-->
<marquee>Belum Diterima: <span id="request_belum_terima"><?php
if ($request_belum_terima > 0) {
echo $request_belum_terima;
} else {
echo "0 ";
};
?></span> buah Request</marquee>
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Penerimaan Request</h2>
<div class="box-icon">
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<!--Table one-->
<div class="box-content" id="things_table">
<?php $this->load->view('view_monitoring_belum_terima'); ?>
</div>
<!--Second indicator-->
<marquee>Belum Selesai: <span><?php
if ($request_sudah_terima > 0) {
echo $request_sudah_terima;
} else {
echo '0 ';
}
?></span> Request</marquee>
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Outstanding Request</h2>
<div class="box-icon">
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<!--Table two-->
<div class="box-content" id="things_table2">
<?php $this->load->view('view_monitoring_belum_selesai'); ?>
</div>
</div><!--/.fluid-container-->
</div><!--/row-->
<?php $this->load->view('view_monitoring_modal') ?>
<div class="clearfix"></div>
<!-- start: JavaScript-->
<?php $this->load->view('/include/js.html'); ?>
<!-- end: JavaScript-->
<?php $this->load->view('view_monitoring_js'); ?>
I using codeigniter and some jquery to develop my app. So, I solve it one by one.
First, I use the indicator from first marquee. If you can see, there are one ID's jquery on span tag. For ex, First indicator have value 1. So, I use ajax to pool the data from database and check it with old value;
This is the code :
Controller
public function hitungRequestBelumTerima() {
$row = $this->model_request->hitungRequestBelumTerima();
echo json_encode($row);
}
Model
public function hitungRequestBelumTerima() {
$this->db->select('*');
$this->db->where('is_approved', 1);
$this->db->where('by_who is not null');
$this->db->where('it_person is null');
$query = $this->db->get('tbl_requestfix');
if ($query->num_rows() > 0) {
return $query->num_rows();
}
return NULL;
}
After that, I write a jquery's code to autorefresh the indicator like this :
function refresh() {
var ini;
var requestMasuk = $('#request_belum_terima').text();
setTimeout(function() {
$.ajax({
url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
type: 'POST',
dataType: 'json',
success: function(obj) {
if (obj > requestMasuk) {
ini = obj;
$('#request_belum_terima').text(obj);
alert("New request coming");
}
}
}).always(function() {
$('#request_belum_terima').text(ini);
}).done(function() {
$('#request_belum_terima').text(ini);
});
$('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
refresh();
}, 20000);
}
$(document).ready(function() {
refresh();
}
It working to refresh, but I dont know, why alert is pop up twice. So, the case is : one new request but two alert of notif has pop-up on one interval. So, in first 10 minutes for ex, Alert is raising. In 20 minutes, alert still coming. But in 30 minute, the alert is not raise. Why the alert raise twice ?
use setInterval instead of setTimeout. Here is your ajax function (ajax not tested, as you say its working)
function refresh() {
var ini;
var requestMasuk = $('#request_belum_terima').text();
$.ajax({
url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
type: 'POST',
dataType: 'json',
success: function(obj) {
if (obj > requestMasuk) {
ini = obj;
$('#request_belum_terima').text(obj);
alert("New request coming");
}
}
}).always(function() {
$('#request_belum_terima').text(ini);
}).done(function() {
$('#request_belum_terima').text(ini);
});
$('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
}
$(document).ready(function() {
setInterval(function () {
refresh();
}, 20000);
}

Categories

Resources