Develop Reference

Bootstrap toggle doesn't work after javascript refresh

I have a problem with Bootstrap Toggle.
After a partial refresh of the main page, the toggles disappear and I see only checkboxes.
I refresh the page with this code:
<script type="text/javascript">
setInterval( function() {
$('.swcon').load("status/controls.php");
}, 5000);
</script>
And here is part of my code on main page:
<div class="grid-item swcon">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">TOGGLES</h3>
</div>
<table class="table table-hover table-condensed small" border="0">
<tbody>
<tr>
<?php
/* GPIO */
$sth = $db->prepare("SELECT * FROM gpio WHERE gpio='$s[gpio]' AND rom='$s[rom]' AND (mode='simple' OR mode='temp' OR mode='moment' OR mode='read' OR mode='day') ");
$sth->execute();
$gpio = $sth->fetchAll();
foreach ($gpio as $g) {
?>
<td class="col-md-1">
<img src="media/ico/switch-icon.png" alt="" title="<?php if(!empty($s['ip'])){echo "Last IP: ".$s['ip']." GPIO: ".$s['gpio']." Mode: ".$g['mode'];} else {echo "GPIO: ".$s['gpio']." Mode: ".$g['mode'];}?>" />
</td>
<td class="col-md-1">
<a href="index.php?id=view&type=gpio&max=day&single=<?php echo $s['name']?>" class="label <?php echo label($g['status']) ?>" title="Charts" ><?php echo str_replace("_", " ", $s['name'])?></a>
</td>
<?php
/* SIMPLE IP */
if(($g['mode']=='simple'&&!empty($s['ip']))||($g['mode']=='temp'&&!empty($s['ip']))) {
?>
<td class="col-md-2">
<form class="form-horizontal" action="" method="post" style=" display:inline!important;">
<input class="checkbox" type="checkbox" data-toggle="toggle" data-size="mini" onchange="this.form.submit()" name="switch" value="<?php echo $s['tmp'] == '1.0' ? 'off' : 'on'; ?>" <?php echo $s['tmp'] == '1.0' ? 'checked="checked"' : ''; ?> />
<input type="hidden" name="ip" value="<?php echo $s['ip']; ?>"/>
<input type="hidden" name="rev" value="<?php echo $g['rev']; ?>"/>
<input type="hidden" name="rom" value="<?php echo $s['rom']; ?>"/>
<input type="hidden" name="gpio" value="<?php echo $s['gpio']; ?>"/>
<input type="hidden" name="onoff" value="simpleip" />
</form>
</td>
<!-- Rest of the page not important here -->
If I refresh the page manually, it looks as expected.

That is because BootstrapToggle parses the page at the initial pageload looking for nodes with [data-toggle="toggle"]. So, when you load new content to the page, the new DOM structure does not get parsed automatically. In order to initialize the new checkboxes as BootstrapToggle objects, you have to call $('[data-toggle="toggle"]').bootstrapToggle(); manually after the new content has been placed into the page.
As jQuery.load() accepts a callback function that is executed when the request completes as it’s second argument, you can implement the solution above like this:
$('.swcon').load('status/controls.php', function() {
$('[data-toggle="toggle"]').bootstrapToggle({
size : 'mini',
// additional settings if necessary
});
});

How to prevent submission of form [duplicate]

This question already has answers here:
Using JQuery - preventing form from submitting
(15 answers)
Closed 5 years ago.
I have a form with ajax calls:
<form method="post" action="?slt=Sbmt" onsubmit="return validateForm()" id="reportform" enctype="multipart/form-data">
<div id="evaluation1">
<h2>Rate Technical Skills</h2>
<table class="quartz-table" id="techskills_table">
<thead>
<tr>
<th>Driver</th>
<th>Sub-Driver</th>
<th class="sorter-false">Skill</th>
<th class="sorter-false">Marks</th>
</tr>
</thead>
<?php
foreach( $subdriver as $sbdriver => $sbd )
{
$skillsResult = getTechSkills($yes, $role, $sbd);
$countTech = 0;
while($row = mysqli_fetch_array($skillsResult))
{
$id = $row['id'];
$driver = $row['driver'];
$subdriver = $row['subdriver'];
$dep = $row['department'];
$skill = $row['skills'];
$vrgood = $row['4'];
$good = $row['3'];
$middle = $row['2'];
$low = $row['1'];
?>
<tbody>
<tr class="full_qst">
<td><?php echo $driver; ?></td>
<td><?php echo $subdriver; ?></td>
<td><?php echo $skill; ?></td>
<td> <img alt="" src="imagesAssessment/check.png" class="check">
<div class="mrk">
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
<label class="choice" for="q1_b" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
<label class="choice" for="q1_c" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
<label class="choice" for="q1_d" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
</div>
<input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" />
<input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />
</td>
</tr>
</tbody>
<?php
$countTech++;
}
}
?>
</table>
<button type='button' class='ev_quest2' data-id3="<?php echo $yes.'|'.$role.'|'.$quarter.'|'.$username.'|'.$staffid; ?>">Performance Skills</button>
</div>
<div id="evaluation3"></div>
<br/><br/><br/>
</form>
I call ajax to display in evaluation3 . Here is code to display data:
$(document).on('click', '.ev_quest3', function(){
var row_number2 = "<?php echo $countPerf; ?>";
var checked_number2 = $("#evaluation2 :checkbox:checked").length;
if(row_number2 == checked_number2){
var evaluation3 = $(this).data("id3");
$.ajax({
url: "comAssessment/scoreboard_evaluation_closed.php",
method: "POST",
data: {evaluation3: evaluation3},
dataType:"text",
success: function (data) {
$('.quest3').hide();
$("#evaluation3").hide().html(data).show("slide", { direction: "up" }, 1500);
}
});
}else{ alert('Please Rate all Performance Skills first!'); }
});
So I check sum of checked checkboxes and sum of checkboxes from the database. If its not equal then system wont upload data. In the end I want to check if all checkboxes of id evaluation3 are checked. If yes then submit the form if not just give alert and stay on the page.
And here is scoreboard_evaluation_closed.php:
<table id="closedquest_table" class="quartz-table">
<thead>
<tr>
<th class="sorter-false">Skill</th>
<th class="sorter-false">Marks</th>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($closedResult))
{
$id = $row['id'];
$dep = $row['department'];
$skill = $row['question'];
$vrgood = $row['4'];
$good = $row['3'];
$middle = $row['2'];
$low = $row['1'];
?>
<tbody>
<tr class="full_qst">
<td><?php echo $skill; ?></td>
<td> <img alt="" src="imagesAssessment/check.png" class="check">
<div class="mrk">
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
<label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
</div>
<input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" />
<input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />
</td>
</tr>
</tbody>
<?php
$countClosed++;
}
?>
</table>
And function to prevent submission if not all checkboxes are checked:
$(function () {
$('form').on('submit', function (e) {
var row_number3 = "<?php echo $countClosed; ?>";
var checked_number3 = $("#evaluation3 :checkbox:checked").length;
if(row_number3 != checked_number3){
e.preventDefault();
alert(/*'Please Rate all Closed Questions'*/ row_number3+' a / b '+checked_number3);
}
});
});
So the problem is it gets me alert message but it also submit the form after giving first alert message. How can I prevent form from submission if not all checkboxes are checked?

I think this should work.
$("#reportform").submit(function(e){
e.preventDefault();
// your code here
});

Show newly data using Ajax and jQuery

I am using Laravel, I have a following data view
<div class="content-inside-main">
<div class="content-inside" id="content-inside-feedback">
<div class="row header-content space-div">
<div class="col-lg-1"><h5>#</h5></div>
<div class="col-lg-1"><h5>Member Id</h5></div>
<div class="col-lg-4"><h5>Question</h5></div>
<div class="col-lg-4"><h5>Reply</h5></div>
<div class="col-lg-1"><h5>Replied by</h5></div>
<div class="col-lg-1"><h5>Options</h5></div>
</div>
<div>
<hr class="line-div"/>
</div>
<?php
$questions= \App\Question::all();
?>
<?php
foreach ($questions as $question):
$id = $question->id;
$member_id = $question->user_id;
$body = $question->message;
$status=$question->replied;
$reply=$question->reply;
$user_id=$question->replied_id;
$member=\App\Member::find($member_id);
$m_id=$member->id;
$m_name=$member->nick_name;
$m_reg_time=$member->reg_time;
$m_unreg_time=$member->unreg_time;
$m_status=$member->unreg;
$m_group_id=$member->group;
$group=\App\Group::find($m_group_id);
$m_group_name=$group->name;
if($id != NULL) {
?>
<div class="row content-messages" >
<input type="hidden" id="count" value="{{$id}}"/>
<div class="col-lg-1"><?php echo $id; ?></div>
<div class="col-lg-1"><?php echo $member_id; ?></div>
<div class="col-lg-4"><?php echo $body; ?></div>
<div class="col-lg-4">
<?php
if($status == 0){
?>
<div class="according-form-container" id="reply-feedback-form_<?php echo $id; ?>">
<a class="btn-link show-add-form-div" data-toggle="collapse" data-parent="#reply-feedback-form_<?php echo $id; ?>" href="#reply-feedback-form_content_<?php echo $id; ?>" >
Reply
</a>
<div id="reply-feedback-form_content_<?php echo $id; ?>" class="collapse collapse-add-form">
<form class="form" id="reply-feedback_<?php echo $id; ?>" enctype="multipart/form-data" method="post" action="addreply">
{{csrf_field()}}
<div class="control-group">
<label class="control-label" for="description">Message: </label>
<div class="controls">
<input type="hidden" name="id" id="id" value="{{$id}}"/>
<input type="hidden" name="member_id" id="member_id" value="{{$member_id}}"/>
<input type="hidden" name="user_id" id="user_id" value="{{Auth::id()}}"/>
<textarea name="description" id="feedback-message_<?php echo $id; ?>" class="input-block-level" required></textarea>
<br/><br/>
<button id="submitfeedback_<?php echo $id . '_' . $member_id; ?>" type="submit" class="btn feedback-reply-submit-btn">Send</button>
</div>
</div>
</form>
<div id='preview_feedback_<?php echo $id; ?>'>
</div>
</div>
</div>
<?php
} else {?>
<div class="col-lg-4">{{$reply}}</div>
<?php
}
?>
</div>
<div class="col-lg-1">
<?php
if($user_id != null){
$user_name= DB::table('admin')->where('id',$user_id)->value('name');
echo $user_name;
}else {
echo 'None';
}
?>
</div>
<div class="col-lg-1">
<button id="view_member" name="view_member" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#view_memeber"
>View
</button>
</div>
</div>
<hr class="line-div" />
<?php
}
endforeach;
?>
<div id="show"></div>
<div class="text-center navigation-paginator" id="paginator" >
</div>
</div>
I have another application.It fill question table anytime.I want to do If question table have new records,show them in this page without refreshing.
Like following screenshots:
before
after

You could send periodical ajax calls and then compare the results with the data you already have to add the new values. It could be something along this lines:
function query() {
$.ajax({
url: 'your/url',
success: function(data) {
var loadedValues = JSON.parse(data).values;
// Iterate only in the new values
for(i = existingValues.length; i < loadedValues.length; i++) {
$("#content-inside-feedback").append(/*HTML you want to add*/);
}
}
});
setTimeout(executeQuery, 5000);
}
$(document).ready(function() {
// First call, then it will be called periodically
setTimeout(query, 5000);
});

PHP - How can I get the name from input type hidden and $_POST to another php?

I wish can pass the value of getvenueurl to another php named map.php .
I use input type hidden to to echo in current page:
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
and I wish when i click the button <a href="map.php" target="_blank"><input type="button" class="button" value="MAP" style="width:100px;"> in map.php show the correct value of getvenueurl.
In current page:
<?php
$read_venue = mysql_query("select * from venue where theme_name = '$title'");
while($show_venue = mysql_fetch_array($read_venue))
{
?>
<form method="post" action="#tab5">
<center><table border="1" class="venuetb">
<tr>
<input type="hidden" name="getvenue" value="<?php echo $show_venue['venue']; ?>"/>
<input type="hidden" name="getvenueprice" value="<?php echo $show_venue['price']; ?>"/>
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
<td style="width:20%;"><center><div class="imgvenue"><img src="<?php echo 'venueimg/'.$show_venue['venueimg']; ?>" /></div></center></td>
<td ><center><div class="bine"><?php echo $show_venue['venue']; ?> - RM <?php echo $show_venue['price']; ?></div></center></br>
<div class="dv"><p> <b>Address : </b><?php echo $show_venue['address']; ?></p>
<p> <b>Detail : </b><?php echo $show_venue['detail']; ?></p>
<b> Contact No: </b><?php echo $show_venue['contact']; ?></div>
</td>
<td style="width:20%;">
<center><input type="button" class="button" value="MAP" style="width:100px;">
<input type="submit" class="button" style="width:100px;" value="CHOOSE" name="choose_venue"></center>
</td>
</tr>
</table></center><br>
</form>
<?php
$_SESSION['theurl'] = $show_venue['url'];
}
?>
<?php
if(isset($_POST['choose_venue']))
{
$getvenue = $_POST['getvenue'];
$getvenueprice = $_POST['getvenueprice'];
$savevenue = mysql_query("insert into selectvenue(user,title,venuename,venueprice) values('$username','$title','$getvenue','$getvenueprice')");
if($savevenue)
{
echo"<center>$getvenue save.</center>";
}
else
{
echo "Failed.";
}
}
?>
</div>
I have try to use session to pass the value of getvenueurl but seen it is failed, because it will only show the last column value for all output that in while loop.
In map.php:
<table class="mapping">
<tr>
<td>
<?php
$theurl = $_SESSION['theurl'];
echo $theurl;?>
</td>
</tr>
</table>
How can I get the correct value to my map.php ?

u can pass value through anchor tag this way..i hope this will help u.
<input type="button" class="button" value="MAP" style="width:100px;">

Instead of
<input type="button" class="button" value="MAP" style="width:100px;">
write this code
<input type="button" class="button" onclick="submit_to_map()" value="MAP" style="width:100px;">
Then place this javascript code on the page.
<script type="text/javascript">
function submit_to_map() {
var form = document.getElementById("form-id");
form.action = "map.php";
form.submit();
}
</script>
Then you can get the value of all elements with $_POST[] inside the form from map.php. Hope this will help you

Confirm you have <?php session_start(); ?> on beginning of each page !

Javascript list.js to this php code

I love this script list.js from www.listjs.com. It seems to be the perfect fit for searching and filtering the output of a php file below, but I just can get it to work, I only need to add 7 or so lines of code but its not working. Can anyone tell me how come? Thanks
The code that I added is highlighted
<?php
defined('_JEXEC') or die();
?>
**<script type="text/javascript" src="list.js"></script>**
<form action="<?php echo CRoute::getURI(); ?>" method="post" id="jomsForm" name="jomsForm" class="community-form-validate">
<div class="jsProfileType" **id="jsProfileType"**>
**<input class="search" placeholder="Search" />
<button class="sort" data-sort="label">
Sort
</button>**
<ul class="unstyled">
<?php
foreach($profileTypes as $profile)
{
?>
<li class="space-12">
<label for="profile-<?php echo $profile->id;?>" class="radio">
<input id="profile-<?php echo $profile->id;?>" type="radio" value="<?php echo $profile->id;?>" name="profileType" <?php echo $default == $profile->id ? ' disabled CHECKED' :'';?> />
<strong class="bold"><?php echo $profile->name;?></strong>
</label>
<?php if( $profile->approvals ){?>
<span class="help-block"><?php echo JText::_('COM_COMMUNITY_REQUIRE_APPROVAL');?></span>
<?php } ?>
<span class="help-block">
<?php
$profile->description = JHTML::_('content.prepare',$profile->description);
echo $profile->description;?>
</span>
<?php if( $default == $profile->id ){?>
<em><?php echo JText::_('COM_COMMUNITY_ALREADY_USING_THIS_PROFILE_TYPE');?></em>
<?php } ?>
</li>
<?php
}
?>
</ul>
</div>
<?php if( (count($profileTypes) == 1 && $profileTypes[0]->id != $default) || count($profileTypes) > 1 ){?>
<div style="margin-top: 5px;">
<?php if( $showNotice ){ ?>
<span style="color: red;font-weight:700;"><?php echo JText::_('COM_COMMUNITY_NOTE');?>:</span>
<span><?php echo $message;?></span>
<?php } ?>
</div>
**<script>
var options = {
list: "space-12"
};
var userList = new List('jsProfileType', options);
</script>**
<table class="ccontentTable paramlist" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td class="paramlist_key" style="text-align:left">
<div id="cwin-wait" style="display:none;"></div>
<input class="btn btn-primary validateSubmit" type="submit" id="btnSubmit" value="<?php echo JText::_('COM_COMMUNITY_NEXT'); ?>" name="submit">
</td>
<td class="paramlist_value">
</td>
</tr>
</tbody>
</table>
<?php } ?>
<input type="hidden" name="id" value="0" />
<input type="hidden" name="gid" value="0" />
<input type="hidden" id="authenticate" name="authenticate" value="0" />
<input type="hidden" id="authkey" name="authkey" value="" />
</form>

I don't know PHP, but I have seen this error before when I used list.js in my own project. It turned out I didn't define things properly.
You did set up a div with a proper id, but you seem to be missing a 'list' class. Try changing
<ul class="unstyled">
to
<ul class="list">
Second, I don't think that 'list' is a supported keyword in options (at least not in the most recent list.js version). Try changing your options definition to
var options = {
valueNames: [ 'space-12' ]
};
Third, if you want search to work change
<button class="sort" data-sort="label">
to
<button class="sort" data-sort="space-12">