After ajax load of html content I need to scroll to specific element. The element has attr data-event-id="" But sometimes this variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top; returns 0. Whole ajax code is:
function refreshContent(id)
{
var scrollNumber = 0;
$.ajax({
type: 'POST',
url: '<?php echo Yii::app()->createAbsoluteUrl("user/ajaxEventLoad"); ?>',
dataType:'html',
success:function(data){
$("#eventListBlock").empty().append(data);
if(id!=null) {
console.log(id);
scrollNumber = $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top;
console.log(scrollNumber);
$("html, body").animate({
scrollTo: scrollNumber
}, 1000, function() {
// alert("Finished animating");
});
}
},
error: function(data) { // if error occured
alert("Error occured. please try again");
}
});
}
and html:
<div id="eventListBlock">
<?
$this->renderPartial('/windows/timelineWindow', array(
'dataProvider'=>$dataProvider
));
?>
</div>
with rendering this part:
<div class="cd-timeline-block">
<div class="cd-timeline-icon" style="background: <? echo $data->color ?>">
<i class="fa fa-<? echo $data->icon ?>"></i>
</div>
<div class="cd-timeline-content">
<div class="timelineToolPanel" data-event-id="<? echo $data->id ?>">
<i class="fa fa-pencil timelineToolPanelEdit"></i>
<i class="fa fa-trash timelineToolPanelDelete"></i>
</div>
<h2><? echo $data->title ?></h2>
<p><? echo $data->content ?></p>
<span class="cd-date"><? echo date("d. m. Y", strtotime($data->date_event)); ?></span>
</div>
</div>
where #eventListBlock is fixed container.
custom attributes in html have to be defined with "data-*", otherwise it won't work.
http://www.w3schools.com/tags/att_global_data.asp
name your attr in "data-event-id=" and it should do the job, even when i have not proofed the JS code :D
Related
I'm using a slick slider. While I'm calling a HTML part which have slick slider using AJAX call it is not working. I've mentioned my code as below:
$(document).ready(function(){
var year = $("#year").val();
if(year == 'all'){
$.ajax({
method: 'post',
url: 'helpData.php',
data: {year:year},
success: function(data){
$("#helpData").html(data);
}
});
}
});
This is an AJAX call.
if ($(this).is(".slider3")){
$(this).slick({
dots: true,
autoplay:true,
autoplaySpeed:1500,
prevArrow: false,
nextArrow: false,
});
}
This code is for slick slider which is in another JS file which I already included.
<?php
foreach ($helpData as $hdata) {
$heData = $help->getAllImg($hdata->heid);
?>
<div class="col-md-6">
<div class="onePost">
<div class="mySlider slider3">
<?php foreach( $heData as $himg ){ ?>
<div class="bannerSlider">
<img src="<?php echo SITE_URL; ?>/img/help/<?php echo $himg->photo; ?>" class="img-responsive otherImages" />
</div>
<?php } ?>
</div>
<a href="highlightpost.php?id=<?php echo $hdata->heid; ?>">
<p class="photoCaption">
<?php echo $hdata->title; ?>
</p>
</a>
<p style="float: right;">
<i class="fas fa-share-alt"></i>
</p>
</div>
</div>
<?php } ?>
<?php } ?>
This is my helpData.php code which is called using AJAX.
Try this,
<?php
$html='';
foreach ($helpData as $hdata) {
$heData = $help->getAllImg($hdata->heid);
$html .= '<div class="col-md-6">
<div class="onePost">
<div class="mySlider slider3">';
foreach ($heData as $himg) {
$html .='<div class="bannerSlider">
<img src="'.SITE_URL.'/img/help/'.$himg->photo.'" class="img-responsive otherImages" />
</div>';
}
$html .='</div>
<a href="highlightpost.php?id='.$hdata->heid.'">
<p class="photoCaption">'.$hdata->title.'</p>
</a>
<p style="float: right;">
<i class="fas fa-share-alt"></i>
</p>
</div>
</div>';
}
echo $html;
?>
I have the modal with form on click of save it saves in the temporary page and the modal has to close the values should get displayed in the div content.now it is working fine but when the page reloads the content is displaying.i don't want to reload the page
html code:
<div class="content">
<?php if($load_data): ?>
<?php foreach($load_data as $data): ?>
<div class="row modal_bg">
<div class="col-md-3">
<span class="jd_name"><?php echo $data->first_name; ?></span>
<span class="jd_name" ><?php echo $data->last_name; ?></span>
<p class="loc"><?php echo $data->location; ?></p>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
ajax code:
jQuery.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>" + "page/datapage/",
data: formData,
processData: false,
contentType: false,
success: function(res)
{
$('#myModal').modal('hide');
console.log(res);
if(res)
{
url:"<?php echo base_url(); ?>page/datapage/<?php echo $per->id; ?>";
}
},
error: function(errResponse)
{
console.log(errResponse);
}
});
how to solve this issue ,without page reload i want to display the content.can anyone suggest me how to do.
you need to use html();
success: function(res)
{
$('#yourTargetId').html(res);
I am trying to implement an infinite scroll in my application but at the moment of reaching the end of my page, this throws the error that places.
This is the ajax code:
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
$.ajax(
{
url: '/loadMoreData.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
Here, is where I show the data from th DataBase:
<?php while ($post = $result -> fetch(PDO::FETCH_ASSOC)){ ?>
<div class="box-list" id="post-data">
<div class="item">
<div class="row">
<p class="post-id hidde" id="<?php echo $post['id']; ?>">
<div class="col-md-1 hidden-sm hidden-xs">
<div class="img-item"><img src="<?php echo OTRA; ?>/images/<?php echo $post['thumb']; ?>" alt=""></div>
</div>
<div class="col-md-11">
<h3 class="no-margin-top"><?php echo $post['titulo']; ?> <i class="fa fa-link color-white-mute font-1x"></i></h3>
<h5><span class="color-black"><?php echo $post['company']; ?></span> - <span class="color-white-mute"><?php echo $post['locacion']; ?></span></h5>
<p class="text-truncate "><?php echo $post['extracto']; ?></p>
<div>
<span class="color-white-mute"><?php echo fecha($post['fecha']); ?></span>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
and this id the other PHP file to load more data:
<?php session_start();
require 'extras/config.php';
require 'functions.php';
comprobarSession();
$conexion = conexion($bd_config);
$qry = "SELECT * FROM publications WHERE id > '$_GET['last_id']' ORDER BY id DESC LIMIT 8";
$result = $conexion->query($qry);
print_r ($result);
$json = include('views/empleos.php');
echo json_encode($json);
on the Developer Tool of Chrome the error that show me is
jquery.js:8706 GET http://localhost/loadMoreData.php?last_id=9 404 (Not Found)
What is the name of that php file? Sounds like it is not loadMoreData.php? Perhaps it is loadData.php, and the AJAX call should be changed?
hi guys i am trying to get a button id that is in a for loop so whenever the button click the unique id that can be differentiated from other ids should be able to work. let me show you my code.
<?php foreach ($message as $key ) : ?>
<?php echo $senders_user_id=$key['senders_id']; ?>
<div class="senders_id" S_id="<?php echo $key['senders_id']; ?>" style="display: none;"></div>
<a class="list-group-item">
<div class="checkbox">
<label>
<?php echo form_open(,['id'=>'sender_user_id']); ?>
<input type="checkbox">
<button id="senders_id" class="Read" S_id="<?php echo $key['senders_id'];?>" onclick="readbyuser($senders_user_id);">Read</button>
<button id="senders_id" class="unread" S_id="<?php echo $key['senders_id'];?>" onclick="unreadbyuser($senders_user_id);">Unread</button>
</label>
</div>
<span class="glyphicon glyphicon-star-empty"></span><span class="name" style="min-width: 120px;
display: inline-block;"><?php echo $key['uname']; ?></span> <span class=""><?php echo $key['textdata']; ?></span>
<span class="text-muted" style="font-size: 11px;"></span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-paperclip">
<?php echo form_close(); ?>
</span></span></a>
<?php endforeach; ?>
</div>
Now here there are three post meaning three 'senders_id' so when i click on button Read the id of that should pass but the same id is passing again and again no matter which button i click on
Here is my code
function readbyuser()
{
var senders_id=$('#senders_id').attr('S_id');
var Recievers_id=$('.Recievers_id').attr('R_id');
jQuery.ajax({
type:'post',
url:'<?php echo base_url("user/read_by_user"); ?>',
data:{id:senders_id,R_id:Recievers_id},
dataType:'json',
success:function(data)
{
console.log(data);
alert(data);
$('.unread').removeClass('unread_user');
$('.Read').addClass('read_user');
}
});
}
function unreadbyuser()
{
var senders_id=$('#senders_id').attr('S_id');
var Recievers_id=$('.Recievers_id').attr('R_id');
jQuery.ajax({
type:'post',
url:'<?php echo base_url("user/unread_by_user"); ?>',
data:{id:senders_id,R_id:Recievers_id},
dataType:'json',
success:function(data)
{
$('.Read').removeClass('read_user');
$('.unread').addClass('unread_user');
}
});
}
please tell me what i am doing wrong
<button id="senders_id" class="Read" S_id="<?php echo $key['senders_id'];?>" onclick="readbyuser($senders_user_id);">Read</button>
<button id="senders_id" class="unread" S_id="<?php echo $key['senders_id'];?>" onclick="unreadbyuser($senders_user_id);">Unread</button>
Two elements cannot have samei id. Use class name instead.
Also you can pass PHP values directly in this.
onclick="readbyuser($senders_user_id);"
as
onclick="readbyuser(<?php echo $key['senders_id'];?>);"
This is the script of ajax I am using
mypage.php
$(".sales_anchor").click(function(e)
{
e.preventDefault();
var store_username = $("#storeUsername").val();
var store_id = $("#storeID").val();
var sale_id = $(this).attr('id');
$.ajax(
{
url: 'scripts/sales_sales_products.php',
data: {"store_id": store_id, "sale_id": sale_id,"store_username": store_username},
method: 'POST',
success: function(data)
{
data = $(data).find("div#mainContentOfSale");
$("#contents").html(data);
console.log(data);
}
});
})
<div id="contents"></div>
And
sales_sales_products.php
include_once '../includes/custom_functions.php';
$stmtgetallsales = $mysqli->prepare("SELECT * FROM store_sales ss
INNER JOIN store s ON s.store_id=ss.store_id
WHERE s.store_id=?");
$stmtgetallsales->bind_param("i",$_POST['store_id']);
$stmtgetallsales->execute();
$getallsales = $stmtgetallsales->get_result();
$sales_rows = $getallsales->num_rows;
$stmtgetallsales->close();
?>
<script src="js/3.1.1/jquery.min.js"></script>
<script src="../js/jquery.countdown.min.js"></script>
<div class="container" id="mainContentOfSale">
<?php while($allsales = $getallsales->fetch_assoc())
{
$stmtgetsaleproducts = $mysqli->prepare("SELECT * FROM store_products sp
INNER JOIN store_sale_products ssp ON sp.product_id = ssp.product_id
WHERE ssp.sale_id=? AND sp.store_id=?");
$stmtgetsaleproducts->bind_param("ii",$allsales['sale_id'],$_POST['store_id']);
$stmtgetsaleproducts->execute();
$getsaleproducts = $stmtgetsaleproducts->get_result();
$sale_product_rows = $getsaleproducts->num_rows;
$stmtgetsaleproducts->close();
?>
<script>
$(document).ready(function() {
$('.products_title').hide();
$(".timer").each(function() {
var time = this.id;
var timeLeft = time.split('-').reverse().join('-');
$(this).countdown(timeLeft, function(event) {
$(this).text(event.strftime("%D days %H hours %M minutes %S seconds remaining"));
});
})
});
</script>
<div class="sale_title">
<h2 class="title" id="sale_products"><?php echo $allsales['sale_name']; ?></h2> <span class="badge"><?php echo $sale_product_rows; ?></span> <span class="timer" id="<?php echo $allsales['sale_till']; ?>"></span></div>
<div class="sale_title"><span class="discount">Discount: <span class="color-text"><?php echo $allsales['sale_discount']; ?></span>%</span></div>
<div class="product_area wrapper ">
<?php while($saleproducts = $getsaleproducts->fetch_assoc()){?>
<div class="product">
<a href="<?php echo " index.php?store=".$_POST['store_username']." &view=single&product=".$saleproducts['product_id']; ?>">
<div class="product-image">
<img src="<?php echo image_check($saleproducts['product_image1']); ?>" />
</div>
</a>
<div class="product-details">
<div class="product-name">
<a class="name" href="<?php echo " index.php?store=".$_POST['store_username']." &view=single&product=".$saleproducts['product_id']; ?>"><span><?php echo substr($saleproducts['product_name'], 0, 20); ?></span></a>
</div>
<div class="product-price">
<span class="price"># Rs. <?php echo sale_price($allsales['sale_discount'],$saleproducts['product_price']); ?>/</span>
</div>
</div>
</div>
<?php }?>
<?php } ?>
When I call the anchor tag with class sales_anchor it calls this script and in the inspect element and in network tab when I check the script it does populated the data and html and everything is fine. But it isn't getting called in the current page and in contents div. What am I doing wrong?
You are encountering an JSON.parse error in your screenshot. (Notice the red bar above your result window saying SyntaxError: JSON.parse: unexpected character at line 1 column 9 of the JSON data)
This is because $.ajax is trying to parse the response as a JSON string to an object (the default behaviour).
Please change your ajax function to this:
$(".sales_anchor").click(function(e)
{
e.preventDefault();
var store_username = $("#storeUsername").val();
var store_id = $("#storeID").val();
var sale_id = $(this).attr('id');
$.ajax(
{
url: 'scripts/sales_sales_products.php',
dataType: "text",
data: {"store_id": store_id, "sale_id": sale_id,"store_username": store_username},
method: 'POST',
success: function(data)
{
data = $(data).find("div#mainContentOfSale");
$("#contents").html(data);
console.log(data);
}
});
})
<div id="contents"></div>