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>
Related
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);
I am new to jQuery so please don't judge me too harshly!
I'm making a page which lists videos, under each video there is a voting button. The button works in 2 stages, first you click it which expands the button, then the second click should confirm the vote using PHP/Ajax. If you click another button before submitting it should reset the first.
I put together the below to try and accomplish this, the first section is to expand the button, then the second is to submit the vote. It kind of works, but I noticed that if you click on one button, then another, then back to the first it submits the vote. Any ideas of how I can get this working? Or a better way of working?
Thanks in advance!
<script>
$(window).load(function(){
$("ul li .button").click(function() {
$("ul li .button").removeClass("active-button");
$("ul li .button").text("Vote for this");
$(this).addClass("active-button");
$(this).text("Submit vote");
stop;
});
});
$(document).on("click", "ul li .button", function () {
if ( $(this).hasClass( "active-button" ) ) {
$("ul li .active-button").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
});
}
});
</script>
<ul class="videos clearfix">
<?php include('config.php');
$sql=mysql_query("SELECT * FROM messages LIMIT 4");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$title=$row['title'];
?>
<li>
<h2><?php echo $title; ?></h2>
<?php echo $msg; ?>
<div id="<?php echo $mes_id; ?>" name="up" class="button vote">Vote for this</div>
</li>
?php } ?>
</ul>
Dont have two seperate click handlers, combine them into one:
$(document).on("click", "ul li .button", function () {
if ( $(this).hasClass( "active-button" ) ) {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='up')
{
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
}else{
$("ul li .button").removeClass("active-button");
$("ul li .button").text("Vote for this");
$(this).addClass("active-button");
$(this).text("Submit vote");
}
});
I'm trying import images to HTML using PHP, but NivoSlider not loaded that.
I looked for the cause of the problem.
I am printing a alert message of response and the right.
Here is the HTML and AJAX query:
<div id="workcontent" class="pcontent" style="display:none;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
</div>
</div>
<script>
$(document).ready(function() {
var wl = $('#worklist div');
wl.on('click', function(){
var name = $(this).attr('id');
console.log(name);
$.ajax({
url: 'read.php',
type: 'POST',
data: { data : name }
}).done(function (response) {
$('#slider').prepend(response);
alert(response);
});
});
});
</script>
<div id="back"></div>
<div id="backcontainer">
<div id="back">
Back
</div>
</div><!--End backcontainer-->
</div><!--End content-->
And here is the other jQuery:
<script>
$(document).ready(function() {
$('#slider').nivoSlider(function(){alert('OK');});
});
</script>
This alert don't show! ):
Finally, here is the PHP code:
<?php
if (isset($_POST["data"])){
if ($_POST["data"] == "") {
echo "data ures";
} else {
$data = $_POST["data"];
$fname = "content/".$data."/*.*";
$files = glob($fname);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
echo '<img src="'.$num.'" data-thumb="'.$num.'">';
}
}
} else {
echo "nem jott data";
}
?>
Sorry for my bad english
NivoSlider doesn't take a function as an argument.
Also .nivoSlider() is probably called before the AJAX call returns it's response.
A better solution would be:
$(document).ready(function() {
$.ajax({
url: 'read.php',
type: 'POST',
data: { data : name }
}).done(function (response) {
$('#slider').prepend(response).nivoSlider( {} );
});
});
Now you can be fairly sure #slider contains the images from the response body so NivoSlider can act on them.
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);
My script part in my php page is like this
<script type="text/javascript" >
alert('Out');
if (<?php echo $delFlag; ?> == 1) {
alert('ting');
}
</script>
While the code below is what I get from the Chrome Developers tool (Resource>XHR) (which I'm using for debugging)
<!-- For javascripts -->
<script type="text/javascript" >
alert('Out');
if (1 == 1) {
alert('ting');
}
</script>
The alerts are not popping up.
What is wrong with my codes??
Update
I've my codes in a file add-line.php
<script type="text/javascript" >
// $(function() {
if (<?php echo $timer; ?> == 1) {
//alert('Line');
var timenow = <?php echo time(); ?>;
var dataPass = 'lineId=' + <?php echo $lineId; ?> + '&storyId=' + <?php echo $storyId; ?> + '&timenow=' + timenow;
$.ajax({
type: "POST",
url: "proc/updateDb.php",
data: dataPass,
cache: false,
success: function(){
// Show error if error is there
}
});
}
// });
</script>
Now in the updateDb.php I m processing some CRUD thing using the POST values and then determine $delFlag value. Then at the end of this file, I've my scripts as (same as the first one above)
<script type="text/javascript" >
alert('Out');
if (<?php echo $delFlag; ?> == 1) {
alert('ting');
}
</script>
But this script is not being executed at all it seems.
As I notice you are using ajax, you that script would run if you add it to the DOM.
for example, if you use $.ajax()
$.ajax({
url: 'some/url/',
type: 'html',
method: 'get',
success: function(data){
$('head').append(data);
// data here would be the response from the server...
}
});
You tried this:
<!-- For javascripts -->
<script type="text/javascript" >
var number = parseInt("<?php echo $delFlag; ?>");
alert('Out');
if (number == 1) {
alert('ting');
}
</script>
You can do it without the quotes if you want.. but if you using some editor they whill markit as a error.
Try like that. Error message will prompt and try to fix it.
<script type="text/javascript">
alert('Out');
try
{
if (<?php echo $delFlag; ?> == 1) {
alert('ting');
}
}
catch(err)
{
alert(err.description);
}
</script>