I have made this script that get's the month and the year from calendar.php and I would like when I click the link previous month to get the previous month but also when month number reach 1 make the year - 1. How can I do something like that?
<html>
<head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
get_data();
});
function get_data(a, b) {
$.get('calendar.php', {
month: a, year: b
},
function(response) {
$el = $('<div></div>').attr('class', 'data').html(response);
$('#datas').prepend($el);
height = $el.height()+'px';
$el.css({'opacity': 0, 'display': 'block', 'height': '0px'}).animate({height: height }, 500, function() {
$(this).animate({opacity: 1}, 500);
})
});
}
</script>
<style>
#datas {
overflow: hidden;
}
.data {
display: none;
}
</style>
<body>
<a href="#" OnClick="get_data(9, 2012);" > Previous month</a>
<div id="datas">
</div>
</body>
</html>
I think you should use jQuery.ajax
$.ajax({
url: 'calendar.php',
success: function(data) {
// Parse your data and do all neccessery refreshing
}
});
in order get yerstaday you can use
var d = new Date(/* data that you get from calendar.php*/);
d.setDate(d.getDate() - 1);
Related
Hi I have multiple Bootsyrap modals created dynamically with php , these modal opened itself if requirements meets, I want to open one after another closed , and problem is not sure all three modals will meet requirements , some time we have 2 , some time one so I can not use modal close event as well
// 1st modal
<?php if(count($getNewBadges) >0 ) { ?>
<script>
$(document).ready(function() {
$("#EarnBadgeModal").modal('show');
$.ajax({
type: "POST",
url: "<?php echo SITE_URL; ?>/engagement/award/ajax/award_ajax.php",
data: { action:'set_badge_popup' },
success: function(response){
$("#EarnBadgeModal").modal('hide');
}
});
});
</script>
<?php } ?>
// 2nd modal
<?php if(count($getNewContest) >0) { ?>
<script>
$(document).ready(function() {
$("#ContestUserModal").modal('show');
$('#ContestUserModal').css('z-index', 1040);
$.ajax({
type: "POST",
url: "<?php echo SITE_URL; ?>/engagement/leaderboard/ajax/leaderboard_ajax.php",
data: { action:'set_contest_read' },
success: function(response){
}
});
});
</script>
<?php } ?>
// 3rd modal
if(count($getPoints) >0)
{
?>
<script>
$(document).ready(function() {
$("#pointsUserModal<?php echo $mv; ?>").modal('show');
$('#pointsUserModal').css('z-index', 1049);
});
</script>
<?php
}
I have tried many things like below , but nothing worked
<style type="text/css">
.modal-backdrop + .modal-backdrop {
z-index: 1051;
}
.modal-backdrop + .modal-backdrop + .modal-backdrop {
z-index: 1051;
}
</style>
// another
<style type="text/css">
.modal-backdrop:nth-child(2n-1) {
opacity : 0;
}
</style>
Thanks Any help is appreciated
I did like this as #Cbroe advised and its working fine now , added a class on bootstrap close button .closeModal
<script type="text/javascript">
$( document ).ready(function() {
for (i = 0; i < 1; i++) {
$(modalArr[0]).modal('show');
modalArr.shift();
}
});
$(".closeModal").on('click', function()
{
for (i = 0; i < 1; i++) {
$(modalArr[0]).modal('show');
modalArr.shift();
}
});
console.log(modalArr);
</script>
I'm not familiar with js. I'd like to get the result of "file_get_contents" function and put it on the "source" (I have marked both with .................).
Thank you in advance.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
content = JSON.parse(data)
fetch(content['some']['media']['content'], myInit).then((resp) =>
resp.text()).then(function(data));});}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
var player = new Clappr.Player({
source: '<?php echo $url...................?>',
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});};
</script>
</body>
</html>
I think if you use the following code, you will get closer to your solution.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
var content = JSON.parse(data);
console.dir(content);
var player = new Clappr.Player({
source: content['some']['media']['content'],
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});
});
}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
//Whatever
};
</script>
</body>
</html>
If you tell me what console.dir outputs, I might be able to offer more help.
BTW.: doesn't clapper have some documents showing how to use its API?
I want to change the width of span depends on load data from jquery respnse. Thanks.
<div class="star-rating">
<span style="width:
<script type='text/javascript'>
var auto_refresh = setInterval(function(){
$('#load_rating_average').load('get_average_rating.php?b_id=<?php echo $row['b_id']; ?>');
},2000);
</script>
<span id=''></span>
</span>
</div>
You can use jQuery css for this, just get the value in javascript and assign it using jQuery
$("#spanId").css("width", "<?php echo $dynamicWidth ?>%"); // give id to span
or
$("#spanId").width("<?php echo $dynamicWidth ?>%");// give id to span
EDIT
you can use ajax request as well,
setInterval(function(){
$.ajax({
url: 'get_average_rating.php',
type: 'GET',
data: { 'b_id' : <?php echo $b_id ?> },
success: function(width){ // assumed width = 75 (numeric o/p)
// apply width to spanId
$("#spanId").css("width",width + "%");
}
})
},2000);
This one Worked thanks for sharing.
var auto_refresh = setInterval(
function()
{
var dt;
$.get("get_average_rating.php?b_id=<?php echo $row['b_id']; ?>", function(data){
dt=data;
$("#load_rating_avg").css("width", dt +"%");
});
}, 2000);
There are a lot of solutions out there as to how to save the position of draggable DIVs but I haven't found any that will help with using a While loop in php.
I have a database of "needs" and I want to display all the "needs" that match the persons username and status=inprogress. This could be 1 need or 1,000,000 needs depending on if the criteria is met.
I want to save the position of the need (DIV) automatically when it's moved. Is this possible? I wanted to store the values in a database using SQL if I can.
Here the code I currently have that displays the "needs" (divs)
Header
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#set { clear:both; float:left; width: 368px; height: 120px; }
p { clear:both; margin:0; padding:1em 0; }
</style>
<script>
$(function() {
$( "#set div" ).draggable({
stack: "#set div"
});
});
</script>
Body
<div id="set">
<?
$query = mysql_query("SELECT * FROM needs WHERE (needsusername='$username' OR workerusername='$username') AND status='inprogress'");
while ($rows = mysql_fetch_assoc($query)) {
$title = $rows['titleofneed'];
$status = $rows['status'];
echo "
<div class='ui-widget-content'>
$title<br>Status: $status<br>
</div>
";
}
?>
</div>
Insert Query
$x_coord=$_POST["x"];
$y_coord=$_POST["y"];
$needid=$_POST["need_id"];
//Setup our Query
$sql = "UPDATE coords SET x_pos=$x_coord, y_pos=$y_coord WHERE needid = '$needid'";
//Execute our Query
if (mysql_query($sql)) {
echo "success $x_coord $y_coord $needid";
}
else {
die("Error updating Coords :".mysql_error());
}
You can use the stop event of draggable to get noticed when an element has reached a new position. Then you just have to get the offset as described in the docs.
Assuming you have a setup like that:
<div id="set">
<div data-need="1"></div>
<div data-need="2"></div>
<div data-need="3"></div>
<div data-need="4"></div>
<div data-need="5"></div>
</div>
I've used a data attribute to store the id of the "need", you can later on use that id to store the position of the "need" in the database.
Now as mentioned before, use the stop event to send an ajax call to the server with the id of the need and the x and y postion of it. Be aware hat this is the position of the screen so if you have different screen sizes you should probably use positions relative to a parent container with a desired position.
$(function() {
$( "#set div" ).draggable({
stack: "#set div",
stop: function(event, ui) {
var pos_x = ui.offset.left;
var pos_y = ui.offset.top;
var need = ui.helper.data("need");
//Do the ajax call to the server
$.ajax({
type: "POST",
url: "your_php_script.php",
data: { x: pos_x, y: pos_y, need_id: need}
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
});
});
This way every time a draggable element reaches a new positions e request will be sent to your_php_script.php. In that script you then only have to grab the post parameters and store them in the database.
There is a working fiddle, of course the ajax request is not working but you can see whats going on in the console.
I have been following a tutorial on creating a style switcher with PHP and jQuery, now in the tutorial the PHP function uses get data, which is not available in codeigniter, I was hoping someone would be able to help me tidy up my sorry attempt?
My PHP function
function setBackground() {
$style = $this->uri->segment(3);
setcookie("style", $style, time() + (60*60*24*30));
echo $style;
}
My HTML and jquery call
<ul id="options">
<li><a class="option" href="<?php echo base_url();?>welcome/setBackground/red">Red</a></li>
<li><a class="option" href="<?php echo base_url();?>welcome/setBackground/green">Green</a></li>
</ul>
<script type="text/javascript">
$('a.option').styleSwitcher(); // calling the plugin
</script>
The jQuery plugin
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
loadStyleSheet(this);
return false;
});
function loadStyleSheet(obj) {
$('body').append('<div id="overlay" />');
$('body').css({height:'100%'});
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1000,
background: 'black url(img/loading.gif) no-repeat center'
})
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
$('#stylesheet').attr('href','/media/css/' + data + '.css');
cssDummy.check(function(){
$('#overlay').fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
var cssDummy = {
init: function(){
$('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
if ($('#dummy-element').width()==2) callback();
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init();
}
On clicking the link to change the stylesheet I get this error rturned via firebug,
An Error Was Encountered
The URI you submitted has disallowed characters.
the URL that is being sent is,
http://mywebsite/index.php/welcome/setBackground/green&js
this example is me clicking the green choice.
You are not calling function setBackground() in jquery.
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
You need to add id red and blue in a tag.
You need to call it something like this.
.fadeIn(500,function(){
var color=$('.color').attr('id');
$.post('yourphpclass/setBackground/'+color, ...
...
try removing +'&js' part from:
...
$.get( obj.href+'&js',function(data){
...
in jQuery plugin.