I am using trying to use code igniter to create an interface where users can check tickboxes next to images, changing a value in our database.
The challenge is that when users check the tickboxes, values are not changed in the database.
If I manually change values in the database, the tickbox values are changed on the interface. But if the user checks the tickbox, the database doesn't change. How puzzling!
The code and interface screenshot are below. The functions veto() and unveto() appear not to be called. I've put an alert in, and they have not been triggered.
Any help or suggestions would be quite helpful, as I'm not sure how to fruitfully approach this problem.
interface
see javascript followed by relevant CI controller and view snippets below
document.addEventListener('DOMContentLoaded',function(){
// ********** PREVIEW *********************
});
//perform an ajax call to update the server DB
function veto(previewId)
{
if(previewId === "") return;
var baseURL = window.location.origin + "/myboxes";
var controllerPath=baseURL + "/bobcatuser/previewFeedback";
//console.log(controllerPath);
// Update the server via ajax
jQuery.ajax({
type: 'POST',
url:controllerPath,
data: {
previewId: previewId
},
dataType:'json',
success: function(response){
var previewVeto = document.getElementById("previewVeto");
previewVeto.value = response.data[1];
},
error: function(){
console.log("Error: could not record preview due to server response.");
}
});
return false;
}
function previews()
{
$msg='';
$this->session->set_userdata('msg',$msg);
if($this->session->userdata('logged_in_user'))
{
$data['previews']=$this->package->getPreviews();
$data['previewActive']=$this->package->getPreviewActive();
$previewDeadline= date('M j, Y',strtotime($this->package->getPreviewDeadline()));
$data['instructions'] = str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('previewInstructions'));
$data['inactiveMessage'] = str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('inactivePreview'));
$data['vetoPrompt'] = $this->util->getMessage('previewVetoPrompt');
//print_r($data);
$this->load->view('header_view');
$menu_data['active']=$this->user->getActive(15);
$this->load->view('menu_view',$menu_data);
$this->load->view('user_previews',$data);
$this->load->view('footer_view');
}
else
{
redirect('login', 'refresh');
}
}//end previews
<section class="page-entry">
<div class="container padding-32">
<div class="row">
<div class="col-12 col-lg-6">
<h2 class="page-title">Order Preview</h2>
<div class="hr show-tablet"></div>
</div><!-- closing title column div -->
</div><!-- close row -->
</div><!-- close container -->
</section>
<section class="content">
<div class="container">
<div class="spacer-h-30"></div>
<div class="row">
<?php foreach($previews as $thisPreview){ print_r($thisPreview->preview_id); ?>
<form class="form-custom">
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<?php if($thisPreview->veto) { ?>
<input type="checkbox" id="veto" value="1" onclick="veto()" checked>
<?php }else{ ?>
<input type="checkbox" id="unveto" value="0" onclick="unveto()" >
<?php } ?>
<!--span class="myicon myicon-save"></span-->
</div><!-- item__header -->
<div class="item__image">
<img src=<?php echo $thisPreview->image_link ?> alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
<p class="item__person"><?php echo $thisPreview->customer_name ?></p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
</form>
<?php } ?>
</div><!-- row -->
</div><!-- container -->
</section>
</main>
</body>
The way to update the server from a checkbox is an ajax call.
Your original code was missing a submit button and the date from the checkbox.
added 'vetodata' to ajax call in function veto()
added document.form[0].submit(); to function veto()
See revised and working! javascript and 'view' code -- there were no changes to the controller
function veto(previewId)
{
if(previewId === "") return;
var baseURL = window.location.origin + "/myboxes";
var controllerPath=baseURL + "/bobcatuser/previewFeedback";
console.log(controllerPath);
// Update the server via ajax
jQuery.ajax({
type: 'POST',
url:controllerPath,
data: {
previewId: previewId,
vetodata: "1"
},
dataType:'json',
success: function(response){
var previewVeto = document.getElementByName("previewVeto");
previewVeto.value = response.data[1];
document.form[0].submit();
},
error: function(){
console.log("Error: could not record preview due to server response.");
}
});
return false;
}
<section class="page-entry">
<div class="container padding-32">
<div class="row">
<div class="col-12 col-lg-6">
<a href="#" class="back-link">
<i class="back-link__icon">
<svg class="svg-icon-back"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-back"></use></svg>
</i>
<span>To Incoming Orders</span>
</a>
<h2 class="page-title">Order Preview</h2>
<div class="hr show-tablet"></div>
<div class="col-12 col-lg-6">
<h2 class="block-title">Instructions</h2>
<p class="regular-text"><?php if($active === TRUE) {echo $instructions;} else {echo $inactiveMessage;} ?></p>
</div><!-- close instruction col div -->
</div><!-- close row -->
</div><!-- close container -->
</section>
<section class="content">
<div class="container">
<div class="spacer-h-30"></div>
<div class="row">
<?php foreach($previews as $thisPreview){
$preview_id = $thisPreview->preview_id;
$preview_name = "preview_".$preview_id ?>
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<input class="largerCheckbox" <?php echo $thisPreview->veto ? "checked" : ""; ?> type="checkbox" id="previewVeto"
<?php if(!$active) echo "disabled"; ?>
onclick="veto('<?php echo $active ? $thisPreview->preview_id : ""; ?>')">
</div><!-- item__header -->
<div class="item__image">
<img src=<?php echo $thisPreview->image_link ?> alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
<p class="item__person"><?php echo $thisPreview->customer_name ?></p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<?php } ?>
</div><!-- row -->
Related
I was making this shopping site as a test, but have come across a problem when trying to change the banners at the tops of the page based on the category the user is viewing
This is for a site being run off a seerver on my localhost, not wordpress btw
<div class="item">
<div class="image">
<img src="assets/images/banners/cat-banner-1.jpg" alt="" class="img-responsive">
</div>
<div class="container-fluid">
<div class="caption vertical-top text-left">
<div class="big-text">
<br />
</div>
<?php $sql=mysqli_query($con,"select categoryName from category where id='$cid'");
while($row=mysqli_fetch_array($sql))
{
?>
<div class="excerpt hidden-sm hidden-md">
<?php echo htmlentities($row['categoryName']);?>
</div>
<?php } ?>
</div>
<!-- /.caption -->
</div>
<!-- /.container-fluid -->
</div>
I tried using PHP to make the banner section responsive like so:
<div class="image">
<?php if (is_category( 'Entertainment' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/><?php endif;?>
<?php if (is_category( 'Science' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/><?php endif;?>
<?php if (is_category( 'Lifestyle' )) : ?><img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/><?php endif;?>
</div>
I realize this was a sloppy way to do it, but was all I could come up with and it still did not work.
What would I have to do to the PHP in order to make the site change banner images for different categories? Is there a way I could also do it perhaps without using PHP?
php
<?php
if $is_category == 'Entertainment' {
<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-1.jpg"/>
}else if{ $is_category =='Science' {
<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-2.jpg"/>
}else{ $is_category =='Lifestyle' {
<img class="round_corners hover-shadow" src="assets/images/banners/cat-banner-3.jpg"/>
}
?>
css
.round_corners {
some format
}
.hover-shadow {
some format
}
html
echo $is_category
I want to remove a Parent div using js or jquery but I am unable to do so because it is multiple cards made dynamically. Here is my code:
<?php
for($ter as $term)
{
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
<?php
echo $term->name;
?>
</h2>
</div>
<div class="row-joinee">
<?php echo $term->data; ?>
</div>
</div>
}
?>
main.js file:
jQuery(document).live(function($) {
if ( $('.row-joinee').text().length == 0 ) {
// length is 0
$('.row-joinee').closest(".wrapper-newjoinee-custom").remove();
}
});
please help me to make display none of wrapper-newjoinee-custom class if row-joinee class is empty
You could try something like this:
$(".row-joinee").filter(
function() { return $(this).text().trim() == ""})
.closest(".wrapper-newjoinee-custom").hide()
This will hide those .wrapper-newjoinee-custom that has en empty <div class="row-joinee">
Demo
$(".row-joinee").filter(function() { return $(this).text().trim() == ""}).closest(".wrapper-newjoinee-custom").hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name im empty
</h2>
</div>
<div class="row-joinee"></div>
</div>
<div class="wrapper-newjoinee-custom">
<div class="breadcrumbs joinee-firstchild">
<h2 class="section-heading blue-bar">
name
</h2>
</div>
<div class="row-joinee">
data
</div>
</div>
I am trying to build a social network site and in order for post's to keep on updating I've set an interval time of 20 seconds so it refreshes the page and show's new comments and or post's.
My problem now is that when a user is trying to input a comment in my form, the page is running through the interval and as soon as it hit's 20 seconds the page refreshes and the text input deleted.
I want to set the interval function so that it will start counting if no one had typed anything anywhere in the page for about 10 seconds.
I can't give an input ID since the comment's are bound to post's and by that do not have a static ID for reference.
Is there a way to do what I just described?
that's the code of the page I want to stop the interval temporarily:
<?php
session_start();
if(!isset($_SESSION['login_user'])){ // check whether a session is set or not
header('Location: registrationPage.php'); // Redirecting To Registration Page
}
include 'connectDB.php';
$FN = $_SESSION['login_user'];
$result = mysqli_query($conn, "SELECT concat(U.firstName,' ',U.lastname) as fullName FROM tblUser U where U.userName='$FN'");
while($row = mysqli_fetch_array($result)){
$UN = $row['fullName'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Main page">
<meta name="author" content="Sorokina E. and Menaker T.">
<title>Main page</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../files/connection.json" type="text/jason"></script>
<script src="../files/positions.json" type="text/jason"></script>
<script src="../files/messages.json" type="text/jason"></script>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
<script src="../js/typeahead.min.js"></script>
</head>
<body>
<div class="row alignT bg_color7">
<div class="col-sm-1">
<img class="img-responsive" src="../images/logo.gif" alt="">
</div>
<div class="col-sm-1">
<?php
if(isset($_SESSION['login_user'])){
echo '<span >Welcome ' . $UN. '! </span>';
}
?>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-home"></span>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-user"></span>
</div>
<div class="col-sm-1 " data-toggle="tooltip" title="My connections" >
<button id="NL" class="Tbutton " type="button">
<span class="glyphicon glyphicon-globe " style="vertical-align:middle; " ></span>
</button>
<div id="NC" class="notificationContainer">
<div id="NT" class="notificationTitle">My friends:</div>
<div id="NB" class="notificationsBody forConnection">
<?php include ('selectAllFriends.php');?></div>
<div id="NF" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-2 ">
<span > <input id="search" name="typehead" class="typeahead" data-provide="typeahead" placeholder="Search people" ></input></span>
</div>
<div class="col-sm-1 mm">
<span><input type="button" onclick="location.href = 'allUsersPage.php';" class="btn btn-info" value="All people" ></span>
</div>
<div class="col-sm-1 " data-toggle="tooltip" title="My messages" >
<button id="NL1" class="Tbutton " type="button">
<span class="glyphicon glyphicon-envelope" style="vertical-align:middle; " ></span>
</button>
<div id="NC1" class="notificationContainer">
<div id="NT1" class="notificationTitle">My Messages:</div>
<div id="NB1" class="notificationsBody forMessages">
<?php include ('selectAllMessages.php');?></div>
<div id="NF1" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-2 " data-toggle="tooltip" title="My notifications" >
<button id="NL2" class="Tbutton " type="button">
<span class="glyphicon glyphicon-flag" style="vertical-align:middle; " ></span>
</button>
<div id="NC2" class="notificationContainer">
<div id="NT2" class="notificationTitle">My Notifications:</div>
<div id="NB2" class="notificationsBody forNotifications"></div>
<div id="NF2" class="notificationFooter">See All</div>
</div>
</div>
<div class="col-sm-1">
<span class="glyphicon glyphicon-log-out"></span>
</div>
</div>
<div class="row">
<p class="alignW"><input class=" col-sm-5" type="text" name="mind" id="textField9" placeholder="Share your mind">
<span class=" col-sm-1"></span> <input type="button" id = "btn_submit" class="btn btn-info col-sm-1" value="Add post" ></p>
</div>
<div class="row" id="middle">
<div class="col-sm-8" id="left">
<?php include ('selectAllPosts.php'); ?>
</div>
<div class="col-sm-4" id="right">
<?php include ('select5Positions.php'); ?>
</div>
</div>
<!--Footer-->
<footer class="container-fluid text-center">
<p class="glyphicon glyphicon-copyright-mark"> Created by ... </p>
</footer>
<script>
$(document).ready(function(){
var timer = null;
function autoRefresh_div()
{
$('#left').load("selectAllPosts.php");// a function which will load data from other file after x seconds
}
$(document.body).keydown(function(event){
clearTimeout(timer);
timer = setTimeout(setInterval(function(){ autoRefresh_div() }, 20000), 5000);
});
$("#btn_submit").click(function(){
var userName='<?php echo $FN; ?>';
var content = $('#textField9').val();
var postData = '&uname='+userName+'&content='+content;
$.ajax({
url : "insertPost.php",
type: "POST",
data : postData,
success: function(data,status, xhr){
if(data==="You have successfully posted!"){
$('#textField9').val('');
}
if(data==="ERROR"){
$('#textField9').val('');
}
}
});
});
$('#search').typeahead( {
name:'typehead',
remote: 'selectAllUsers.php?query=%QUERY'
});
//search for all users and go to their pages
$('#search').on('typeahead:selected', function(evt, item){
window.location.href = "userPage.php?fullName="+item.value;
});
$.getJSON("../files/notifications.json",function(result){
$.each(result, function (index, value) {
$(".forNotifications").append("<div class=\"divStyle1\">" +value.Notification + "</div>");
});
});
$("#NL").click(function(){
$("#NC2").hide();
$("#NC1").hide();
$("#NC").fadeToggle(300);
return false;
});
$("#NL1").click(function(){
$("#NC").hide();
$("#NC2").hide();
$("#NC1").fadeToggle(300);
return false;
});
$("#NL2").click(function(){
$("#NC").hide();
$("#NC1").hide();
$("#NC2").fadeToggle(300);
return false;
});
$('#myButton').click(function (){
$(this).hide();
}
);
});
</script>
</body>
</html>
Thank you.
Tom
There are multiple ways you could do this either by making an AJAX Request to retrieve new data or even use Websockets (Which is the most efficient). However, the simplest approach to fixing your problem would be to create a timer via JS when the page loads.
<!-- Element -->
<input type="text" data-ui="post"/>
<!-- Script -->
<script>
$(document).ready(function(){
var timer = null;
function startTimer() {
timer = setInterval(function() {
window.location.reload();
}, 1000);
}
// Stop timer by clearing with interval when
// the user focuses on the element
$('[data-ui]').on('focus', function() {
clearInterval(timer);
});
// Start the timer once the user has blurred away from
// the element
$('[data-ui]').on('blur', function() {
startTimer();
});
// Start the timer as the page has finished loading
startTimer();
})
</script>
The basically stops the window location.reload timer once the user has focused an element that has a [data-ui] attribute tag attached to it. Another method would be to save your inputs content with LocalStorage and reinsert the content into the input box once the page has reloaded.
Let me know if you need a jQUERY'less version.
I am loading a grid of news stories and want to append two DFP adverts at a particular place in the grid - which is define by a data attribute data-adposition
Here's the HTML of the divs
<div class="aggregator">
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
<div class="news-item"> </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="<?php echo $dfpPos; ?>">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="<?php echo $dfpHalfPos; ?>">
<h2>Test DFP TWO</h2>
</div>
</div>
I am then looping through and currently using detach() to preserve the data but remove it from the document.
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
Having no luck currently! The detach() works as it stores the data when I console.log but does no append to the position defined in the data-adposition
it works for me. what are you getting back from the php expression for data-adposition?
$(document).ready(function(){
var selector = ".aggregator";
$(".dfp").each(function(){
var dfpHTML = $(this).detach();
var dfpPos = $(this).data("adposition");
$(selector + " .news-item").eq(dfpPos).after(dfpHTML);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aggregator">
<div class="news-item">n1 </div>
<div class="news-item">n2 </div>
<div class="news-item">n3 </div>
<div class="news-item">n4 </div>
</div>
<!-- AS AN EXAMPLE I WANT TO APPEND AFTER THE 2ND AND 4TH BUT THIS COULD CHANGE -->
<div class="aggregator__dfp" data-dfpcode='<?php echo $dfpCode; ?>' data-halfcode='<?php echo $dfpHalfCode; ?>'>
<div class="dfp" data-adposition="1">
<h2>Test DFP ONE</h2>
</div>
<div class="dfp" data-adposition="2">
<h2>Test DFP TWO</h2>
</div>
</div>
i am working on wordpress right now and i am creating a SPA with 3 cols. The left and middle cols are static, the right one is dynamic based on the links of the first two cols. Right now i have the solution, that i load all the specific in the right col with position: absolut and visibility: hidden. But if i try my webpage on a mobile phone, it works a bit slow. My code looks like this:
<div class="content"> <!-- open class="content"-->
<script> //script for URL-Change by clicking on Link !Start
function showDetailContent(showid) {
var id = document.getElementsByClassName('shown');
for (var i=0;i<id.length;i++) {
id[i].classList.remove('shown');
};
document.getElementById("right_" + showid).classList.add('shown');
};
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script> <!--script for URL-Change by clicking on link !Start-->
<div class="col"><!-- Start col (left)-->
<?php while(have_posts()):the_post();?> <!-- Start while (left)-->
<?php if (in_category('infotext')):?> <!--start if-request for category-->
<div class="infotext animated bounceSwitch"> <!--start infotext and animation-->
<h1>
<?php the_title();?> <!-- h1 of col(left)-->
</h1>
<?php the_content(__(''));?> <!-- get the post-content in it -->
</div> <!-- close infotext and animation-->
<form> <!-- start form login-->
<input id="user" class="bg-whitesmoke" type="text" placeholder="Benutzername" />
<input id="pass" class="bg-whitesmoke" type="password" placeholder="Passwort" />
<input id="submit" class="bg-grey" type="submit" value="Anmelden" />
</form> <!-- end form login-->
<?php endif;?> <!-- end if-request for category-->
<?php endwhile;?>
</div> <!-- end col(left) -->
<div class="col"> <!-- Start col (mid)-->
<?php while(have_posts()):the_post();?><!-- Start while (mid)-->
<?php if (in_category('apps')):?><!-- start if request for category-->
<div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey">
<h1>
<?php the_title();?> <!-- h1 for col(mid-->
</h1>
<?php the_content(__(''));?> <!-- get post content-->
</div>
<?php endif;?> <!-- end if request for category-->
<?php endwhile;?> <!-- End while(mid)-->
</div><!-- End col (mid)-->
<div class="col animated bounceInRight">
<?php while(have_posts()):the_post();?>
<div class="content-right">
<div id="right_<?php the_id();?>" class="right">
<div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey">
<div id="product-01" class="product-preview"> <!-- start div-->
<div id="product-title" class="product-image product-title"><!-- get titel and image-->
<img src="./img/products/logos/logo-cloudshare.png" /><!-- get logo-->
<h1><?php the_title();?></h1><!-- h1 for col(right)-->
</div><!--end product-image-->
<?php the_content(__(''));?><!-- get post content-->
</div><!-- start product-01-->
</div><!-- end product-wrapper products-wrapper round-borders-panal bg-bright-grey-->
</div><!-- end class right-->
</div><!-- end content-right-->
<?php endwhile;?><!-- end while(right)-->
</div> <!-- close col(right)-->
-->
So, is there any opportunity to create the content right on clicking on a link and deleting it if another link is clicked? Or is this really the best solution?
Have a nice day, Yannic :).
use can use an ajax call by jquery ajax tool $.ajax
here is full documentation:
http://api.jquery.com/jQuery.ajax/
make a new php file like loader.php that according to a get request with id parameter returns data for your right column
you should code something like following code snippet
$('div .right').click(function(){
$.ajax({
type:'GET' // request type 'get' or 'post'
url:loader.php, // your destination file that request will get sent
data:{id:2}, // data you pass to your destination its something like loader.php?id=2 in php
success:function(data){
this.html(data); // *data* is your returned value from your php file and now can do anything you want with your returened value
}
});
})