<script> not loading after ajax scroll called - javascript

I have googled a lot regarding this, and actually couldn't find any solution.
This is what I have in my .phtml file:
<?php foreach($items as $item):?>
........................
............
<?php $count = 1;?>
<div id="new-script-<?php echo $count . "-". $item->getId();?>">
<script type="text/javascript">
var dthen<?php echo $count; ?> = new Date("<?php echo Date("m/d/y", strtotime($toDate)).' 11:59:59 PM'; ?>");
var start = "02/10/16 14:57:49";
start_date = Date.parse(start);
var dnow<?php echo $count; ?> = new Date(start_date);
if(CountStepper>0)
ddiff= new Date((dnow<?php echo $count; ?>)-(dthen<?php echo $count; ?>));
else
ddiff = new Date((dthen<?php echo $count; ?>)-(dnow<?php echo $count; ?>));
gsecs<?php echo $count; ?> = Math.floor(ddiff.valueOf()/1000);
var iid<?php echo $count; ?> = "countbox_<?php echo $count; ?>";
CountBack(gsecs<?php echo $count; ?>,"countbox_"+timer, timer);
timer++;
</script>
<?php $count = $count + 1; ?>
</div>
................
<?php endforeach;?>
As you can see I have got few php variable called inside script. Which is why I cannot keep this script in external file.
And my ajax code:
jQuery(document).ready(function() {
jQuery.ias({
dataType: 'text',
container : ".category-products",
item : "ol.products-pack-list",
next : "a.next",
pagination : '.pages',
loader : '<div style="width:100%; display:block; min-height:100px;"><p class="cateogry-loader loader" id="loading_mask_loader" style="margin:0 auto; width: 150px; padding: 15px 30px; background: #fff4e9; border: 2px solid #f1af73; color: #d85909; font-weight: bold; text-align: center; z-index: 1000;"><img src="/image/ajax-loader-tr.gif" alt="Loading..."><br>Please wait...</p></div>',
triggerPageThreshold : 9999
});
});
And this is in my <head> tag:
<script type="text/javascript" src="https://www.digitalcinema.com.au/skin/frontend/enterprise/helloshopper/js/auto-load/jquery-ias.min.js"></script>
Now, this works fine, however I also have a infinite-ajax-scroll in place to load all my result. Which is causing the issue here.
After each ajax scroll, my <script> just disappears. I am not able to prevent this. Please suggest.
I had also asked this to the above extension writer, haven't answered yet.
https://github.com/webcreate/infinite-ajax-scroll/issues/218
My rendered html
First page before ias call
<li class="item odd 1">
<div id="new-script-1">
<script type="text/javascript">
var dthen1 = new Date("02/14/16 11:59:59 PM");
start_date = Date.parse(start);
var dnow1 = new Date(start_date);
if(CountStepper>0)
ddiff= new Date((dnow1)-(dthen1));
else
ddiff = new Date((dthen1)-(dnow1));
gsecs1 = Math.floor(ddiff.valueOf()/1000);
var iid1 = "countbox_1";
CountBack(gsecs1,"countbox_"+timer, timer);
timer++;
</script>
</div>
Second page after ias call
<li class="item odd 1">
<div id="new-script-1-100">
<script type="text/javascript">
var dthen1 = new Date("02/14/16 11:59:59 PM");
start_date = Date.parse(start);
var dnow1 = new Date(start_date);
if(CountStepper>0)
ddiff= new Date((dnow1)-(dthen1));
else
ddiff = new Date((dthen1)-(dnow1));
gsecs1 = Math.floor(ddiff.valueOf()/1000);
var iid1 = "countbox_1";
CountBack(gsecs1,"countbox_"+timer, timer);
timer++;
</script>
</div>
</li>
<li class="item even 2">
<div id="new-script-2-101">
</div>
</li>
See second list and it's content, whole script is disappeared.

Related

Why does reload specific section not work?

I've tried different codes, but the codes always not working. I want to reload just the specific section every 5 seconds, not reloading the whole page. It's important not to refresh the whole page, because it includes an chat function. If I would reload the whole page, people can't enter text without loosing it every 5 seccond. Like I said, I've tried some codes from stackOverflow but somehow they don't work for me.
Here's my code
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#context").load(window.location.href + " #context" );
}, 5000);
});
</script>
<--variables explained --->
$fid = $_GET['fid']
$username = $_SESSION['username']
$db :
$servername = "localhost";
$dbname = "psychopath";
$username = "root";
$password = "";
try{
$dsn = "mysql:host=" . $servername . ";dbname=" . $dbname;
$db = new PDO($dsn, $username, $password);
echo "";
}catch(PDOException $e){
echo $e.getMessage();
}
<--- variables END ----->
$display_messages = $db->prepare("SELECT * FROM mychat_from WHERE (user_to_name = ? OR userfrom_name = ?) AND (user_to_id = ? OR userfrom_id = ?)");
$display_messages->execute([$username , $username, $fid, $fid]);
while($row=$display_messages->fetch(PDO::FETCH_ASSOC)){
$userfrom = $row['userfrom'];
if($userfrom != $username){
$messagefrom2 = $row['message_from'];
$messagefrombreak2 = wordwrap($messagefrom2, 27, "\n", true);
?>
<?php
?><section id="context" name="context"><?php echo '<b> '.$userfrom.'</b>said:<br>';
echo "<section style='background: black; float: left; margin-left: 5px; border-radius: 7px; color: white;'> <font style='float: left;'> ".$messagefrombreak2."</font></section>";?>
</section>
<?php echo "<br><br>";
?>
And here is full code:
<!-- end snippet -->if(isset($_GET['fid'])){
$fid = $_GET['fid'];
?>
<section>
<section>
<?php
$get_friend = $db->prepare("do stuff");
$get_friend->execute([$fid]);
while($row=$get_friend->fetch(PDO::ROW STUFF)){
}
?>
</section>
<section>
<?php
$username = $_SESSION['username'];
$get_id = $db->prepare("do stuff");
$get_id->execute([$fid]);
while($row=$get_id->fetch(ROW STUFF)){
$get_your_id = $db->prepare("do stugg");
$get_your_id->execute([$username]);
while($row=$get_your_id->fetch(ROW STUFF)){
$display_messages = $db->prepare("DO STUFF");
$display_messages->execute([$your_id, $your_id, $fid, $fid]);
while($row=$display_messages->fetch(DO STUFF)){
$userfrom = $row['userfrom'];
if($userfrom != $username){
$messagefrom2 = $row['message_from'];
$messagefrombreak2 = wordwrap($messagefrom2, 27, "\n", true);
?>
<?php
?><div id="container" name="container"><div id="context" name="context"><?php echo '<b> '.$userfrom.'</b>said:<br>';
echo "<section style='background: black; float: left; margin-left: 5px; border-radius: 7px; color: white;'> <font style='float: left;'> ".$messagefrombreak2."</font></section>";?>
</div></div>
<?php echo "<br><br>";
?>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#context").load(window.location.href + " #container" );
}, 5000);
});
</script>
<?php
}else{
$messagefrom = $row['message_from'];
$messagefrombreak = wordwrap($messagefrom, 27, "\n ", true);
echo "<font style='float: right;'><b>You </b>said: </font><br>";
echo "<section style='background: #960505; float: right; margin-right: 5px; border-radius: 7px; color:
white;'><font style='float: right;'> ".$messagefrombreak." </font></section><br><br>";
}}}}
?>
</section>
use ajax and json
ajax to make a call to server within the page
json little simple format
use setInterval
like
var myVar = setInterval(my_func, 5000);
my_func is a function that will hold ajax action. and do what do you need

How to disable button and change color if the time is expire

PHP Code:
<?php
include 'security.php';
$mysqli = new mysqli('localhost', 'root', '', 'halcondentalclinic');
if (isset($_GET['date'])) {
$date = $_GET['date'];
$stmt = $mysqli->prepare("select * from bookings where dates = ?");
$stmt->bind_param('s', $date);
$bookings = array();
if ($stmt->execute()) {
$result = $stmt->get_result();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$bookings[] = $row['timeslot'];
}
$stmt->close();
}
}
}
$duration = 30;
$cleanup = 00;
$start = "9:00";
$end = "16:00";
function timeslots($duration, $cleanup, $start, $end)
{
$start = new DateTime($start);
$end = new DateTime($end);
$interval = new DateInterval("PT" . $duration . "M");
$cleanupinterval = new DateInterval("PT" . $cleanup . "M");
$slots = array();
for ($intStart = $start; $intStart < $end; $intStart->add($interval)->add($cleanupinterval)) {
$endPeriod = clone $intStart;
$endPeriod->add($interval);
if ($endPeriod > $end) {
break;
}
$slots[] = $intStart->format("H:iA") . "-" . $endPeriod->format("H:iA");
}
return $slots;
}
?>
html and php
<div class="container">
<h1 class="text-center">Book for Date: <?php echo date('m/d/Y', strtotime($date)); ?></h1>
<hr>
<div class="row">
<div class="col-md-12">
<?php echo isset($msg) ? $msg : ""; ?>
</div>
<?php $timeslots = timeslots($duration, $cleanup, $start, $end);
foreach ($timeslots as $ts) {
?>
<div class="col-md-2">
<div class="form-group">
<?php if (in_array($ts, $bookings)) { ?>
<button class="btn btn-danger"><?php echo $ts; ?></button>
<?php } else { ?>
<button class="btn btn-success book"
data-timeslot="<?php echo $ts; ?>"><?php echo $ts; ?></button>
<?php } ?>
</div>
</div>
<?php
} ?>
</div>
</div>
This is the appointment system I want if the date is already past the button for the calendar time change to red and become disabled. For example, 9:00 am - 9:30 am so if the date is already 12:00 pm the 9:00 am - 9:30 become disabled
It is possible to do it? Sorry I am a beginner in PHP and MySQL.
I am not Php developer but as I see you can define a php function to check time is past
function isPastTime($time){
// check $time is past
}
And when you render view, you can add class to remark past booking
<?php if(isPastTime){ ?>
<button class="btn btn-past"><?php echo $ts;?></button>
.btn-past {
color: red;
pointer-events: none;
}
It is my advise. Hope you can resolve it.

php while but the result have to shows in javascript

I have the following code and what I'm trying to do is to show the mysql result in the message box with javascript, but when I click on the message box it shows me only one result for every button.
I want every button have his own message which is in database.
Does anybody have an idea on how I can do it?
<?
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div style="position:absolute; overflow:hidden; <?php echo $row[Pos]; ?> height:23px; z-index:0">
<button onClick="showMsgBox();" id="showBtn">Show MsgBox</button>
</div>
<script>
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox() {
$.msgBox({
title: "Ads",
content: "<? echo $row[Ctn]; ?>",
type: "alert"
});
}
</script>
<?}?>
In the database Pos is the position of the button and Ctn is the message.
Please help.
Try this ;)
<?php
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
/* all messages */
$messages = array();
$index = 0;
while($row = mysql_fetch_assoc($result)){
$messages[] = $row['Ctn'];
?>
<div style="position:absolute; overflow:hidden; <?php echo $row['Pos']; ?> height:23px; z-index:0">
<button onClick="showMsgBox(<? echo $index++; ?>);" id="showBtn">Show MsgBox</button>
</div>
<?php
}
?>
<script>
var messages = <?php echo json_encode($messages); ?>;
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox(index){
$.msgBox({
title: "Ads",
content: messages[index],
type: "alert"
});
}
</script>
Used <?php ... ?> tags you can change as per your need;
Firstly, you id should be unique, if your input is the loop make sure your id is also unique.
Please see code below this might work for you.
<?
$query = "SELECT * FROM 'Points'";
$result = mysql_query($query);
$queryCounter = 0;
$message = array();
while($row = mysql_fetch_assoc($result)){
$message[$queryCounter] = $row[Ctn];
?>
<div style="position:absolute; overflow:hidden; <?php echo $row[Pos]; ?> height:23px; z-index:0">
<button onClick="showMsgBox(<?php echo $queryCounter; ?>);" id="showBtn<?php echo $queryCounter; ?>">Show MsgBox</button>
</div>
<script>
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox(id) {
$.msgBox({
title: "Ads",
content: "<? echo $message[id]; ?>",
type: "alert"
});
}
</script>
<? $queryCounter ++; }?>
check out this code, i hope it will work for you, here i have used data-value html5 attribute to get the message when button is clicked.
<?php
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div style="position:absolute; overflow:hidden; <?php echo $row['Pos']; ?> height:23px; z-index:0" data-value="<?php echo $row['Ctn']; ?>" id="showMsgBoxContent_<?php echo $row['id'];?>" >
<button onClick="showMsgBox(<?php echo $row['id']; ?>);" id="showBtn_<?php echo $row['id']; ?>">Show MsgBox</button>
</div>
<?php
}
?>
<script>
msgBoxImagePath = "images/";
function showMsgBox(id)
{
$("#showBtn_"+id).focus();
var showContent = $('#showMsgBoxContent_'+id).getAttribute('data-value');
$.msgBox({
title: "Ads",
content: showContent,
type: "alert"
});
}
</script>

how to use append in yii

I have created a form in yii and tried using the append method. In said form the user selects the items and enters the amount. If they click the button it will call the function. In output it shows "object text". How do I retrieve it?
<script type="text/javascript">
function myfunction ()
{
var newElem = document.createElement ("div");
newElem.innerHTML =document.createTextNode(amount);
newElem.style.color = "red";
var container = document.getElementById ("new");
container.appendChild (newElem);
}
</script>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'travel1-form',
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name',array('name'=>'name'),array('class'=>'addtocarts')); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'Seattype'); ?>
<?php echo $form->dropDownList($model,'seattype',
array('S' => 'Sleeper', 'M' => 'Semi-sleeper','A'=>'Seater'),
array('empty' => '(Select Type)','name'=>'seattype'));?>
<?php echo $form->error($model,'seattype'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'amount'); ?>
<?php echo $form->textField($model,'amount',array('name'=>'amount')); ?>
<?php echo $form->error($model,'amount'); ?>
</div>
</div>
<?php echo CHtml::submitButton('Submit',array('name'=>'submit'))?>
<?php echo CHtml::htmlButton('AddtoCart',array('name'=>'addtocart','onclick'=>'myfunction();'))?>
<div id="new">
</div>
<?php $this->endWidget(); ?>
</div>
Please change your js function like below,
<script>
function myfunction ()
{
var container = document.getElementById ("new");
var newElem = document.createElement ("div");
newElem.innerHTML =$('#amount').val();
newElem.style.color = "red";
container.appendChild (newElem);
}
</script>
this amount textfield should include "id",
<div class="row">
<?php echo $form->labelEx($model,'amount'); ?>
<?php echo $form->textField($model,'amount',array('name'=>'amount','id'=>'amount')); ?>
<?php echo $form->error($model,'amount'); ?>
</div>
You need to get the amount from the textfield and then after creating the text node, append it to the newElem.
function myfunction() {
var amount = document.getElementById('amount').value; // amount value from textfield
var newElem = document.createElement("div");
newElem.appendChild(document.createTextNode(amount));
/* You can also use innerHTML instead of the above line like this newElem.innerHTML = amount; */
newElem.style.color = "red";
var container = document.getElementById("new");
container.appendChild(newElem);
}
<div id="new"></div>
<input type="text" id="amount" />
<button onclick="myfunction()">Click</button>

How to pass a value from Codeigniter's form_hidden to javascript?

I want to pass the value of my form_hidden from the view to a javascript function.
VIEW:
<?php echo validation_errors(); ?>
<?php
$mode = (isset($is_editing))? 'disabled' : 'disabled';
$client_name = (isset($is_editing))? $clientcontent->client_name : NULL;
$process = (isset($is_editing))? 'Edit' : 'Add';
$form_action = (isset($is_editing))? 'client/update_client/' . $id : 'client/create_client';
?>
<style type="text/css">
.check_exists
{
margin-top: 4px;
margin-left: 9px;
position: absolute;
width: 16px;
height: 16px;
}
</style>
<?php echo form_open($form_action, 'id="frm" class="form-horizontal" style="margin: 0;"'); ?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title"><?php echo $process ?> Client</h4>
</div>
<div class="span6" style="padding-top:20px;padding-bottom:10px;">
<!-- Project Content Fields -->
<div class="control-group">
<p class="control-label">Client Name*</p>
<div class="controls">
<?php echo form_input('client_name', $client_name, 'id="client_name" style="height: 30px;"'); ?><span id="client_verify" class="check_exists" ></span>
</div>
</div>
<?php echo form_hidden('old_name',$client_name); ?>
</div>
<?php echo form_close(); ?>
<script type="text/javascript">
$(document).ready(function()
{
check_client("#client_name", "<?php echo base_url(); ?>client/check_availability", "#client_verify", "#old_name");
})
// </script>
Javascript File:
function check_client( id, url, spanid, old)
{
var oldname = $(old).val();
$('body').on('keyup', id, function(){
if($(id).val().length >= 3)
{
var newname = $(id).val();
console.info("The new name is " + newname + ":old name is" + oldname);
$.ajax({
url : url,
data : {client_name : $(id).val()},
type : 'POST',
success : function(data){
if( data.is_available == 0 ){ // Here
//start fading the messagebox
$(spanid).css({ "background-image": "url('http://localhost/mapmces_3.4.2/assets/img/no.png')" });
$(spanid).attr( "title", "Already Exists" );
available = false;
}else if( data.is_available ){ // Here the json response
//start fading the messagebox
$(spanid).css({ "background-image": "url('http://localhost/mapmces_3.4.2/assets/img/yes.png')" });
$(spanid).attr( "title", "Available" );
available = true;
}else{
alert("Some error occured! Check Console");
console.error(data.reason);
}
}
});
}
else
{
$(spanid).css({ "background-image": "none" });
}
});
}
Everything works fine. No errors are displayed by firebug. The function also works, but i want to add another validation which is checking if the oldname = newname. The function is able to get the value of the newname but it can't get the value of oldname which is from form_hidden.
Please tell me what I'm doing wrong. Many thanks!
What I would do is load the script in. after that, in your html, create some script tags and echo your form-hidden to a variable.
ex.
<script src='main.js'></script>
<script>
var hello=<?php echo form_Hidden; ?>;
thisIsAFunction(hello);
</script>
</body>
</html>
Just changed
<script type="text/javascript">
$(document).ready(function()
{
check_client("#client_name", "<?php echo base_url(); ?>client/check_availability", "#client_verify", "#old_name");
})
</script>
into
<script type="text/javascript">
var old_name = "<?php echo $client_name; ?>";
$(document).ready(function()
{
check_client("#client_name", "<?php echo base_url(); ?>client/check_availability", "#client_verify",old_name);
})
</script>

Categories