I'm trying to load a slick-slide-carousel with ajax so that when one of the radiobuttons is pressed, the new images are loaded via ajax.
But I have a problem because when loading the new images, all the images of the carousel are displayed one on top of the other for a second.
It can be seen on this page: http://infrangible-discoun.000webhostapp.com/slideAjax/, by pressing any of the radio-buttons.This is the code.
index.php:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<div id='foto'>
<div class='contenedor2 slideshow2'>
<img src="imagenes/1.jpg">
<img src="imagenes/2.jpg">
<img src="imagenes/3.jpg">
</div>
</div>
<div>
<form id="formOpciones" action="#" method="post">
<label for='color'>Elegir</label>
<input type="radio" class="color" name="color" value="blanco">
<input type="radio" class="color" name="color" value="negro">
<input type="radio" class="color" name="color" value="gris">
<input type="radio" class="color" name="color" value="azul">
</form>
</div>
</body>
<script src="slick2.js"></script>
</html>
ajaxIdProducto.js:
$(document).on('ready',function(){
$(document).on("change",'.color', function(event) {
var $form = $("#formOpciones");
var url1 = "obtenerFoto.php";
{
$.ajax({
type: "POST",
url: url1,
data: $form.serialize(),
success: function(data)
{
$('#foto').html(data);
}
});
}
});
});
obtenerFoto.php:
<html>
<head>
<meta charset="UTF-8">
<title>Obtener Foto</title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<script>
function slickCarousel() {
$('.slideshow2').slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
function destroyCarousel() {
if ($('.slideshow2').hasClass('slick-initialized')) {
$('.slideshow2').slick('destroy');
}
}
destroyCarousel();
slickCarousel();
</script>
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
</body>
</html>
slick2.js:
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
Maybe that's because when you call ajax obtenerFoto.php some of the scripts reload. After the script has finished loading, the slide carousel changes.
ajax request
Maybe you can try by changing the file obtenerFoto.php like this:
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
Related
I have an HTML page where we enter the name of a movie and if that movie is present in the database,then the name is displayed. I am trying to connect to the database using JavaScript, Ajax and PHP. The database is in the MySQL Workbench Server.
This is what I have done:
pc.html
<html>
<head>
<script type="text/javascript">
function Search_Data()
{
var httpr = new XMLHttpRequest();
var movie_name=document.getElementById("moviename").value;
console.log(movie_name);
httpr.open("GET","get_data.php",true);
httpr.send();
httpr.onreadystatechange = function()
{
if(this.readyState==4 && this.status==200)
{
alert(this.responseText);
}
}
}
</script>
<body>
<input type="text" name="moviename" id="moviename" placeholder="Enter a movie...">
<br/>
<input type="button" name="search" value="Search" onclick="Search_Data()">
<br/>
<span id="response"></span>
</body>
</head>
</html>
get_data.php
(Below code is a trial code to see if its working)
<?php
echo "Hello World"
?>
In the browser,the result I am getting is:
The files are in the following location:
C:\Users\Admin\AppData\Roaming\MySQL\Workbench\scripts
The entire code is getting displayed instead of just "Hello World".I am new to web development and PHP and I am not sure what seems to be the problem.
what are you using is ajax with normal java-script i suggest to use jquery ajax and this is a full example how to connect it to php and how to get the value or list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" name="search" id="search" class="btn btn-info">Search</button>
<td width="90%"><span id="employee_name"></span></td>
second
<input type="input" id="inputs" value="submit">
<p id="email"></p>
<p id="pass"></p>
<p id="permission"></p>
<script>
$(document).ready(function(){
$('#search').click(function(){
var val = document.getElementById("inputs").value;
var id= $('#employee_list').val();
setInterval(function(){
$.ajax({
url:"db.php",
method:"POST",
data: {val : val},
dataType:"JSON",
success:function(data)
{
$('#email').text(data[val].email);
$('#pass').text(data[val].pass);
$('#permission').text(data[val].perm);
}
})
}, 1000);
});
});
</script>
</body>
</html>
the php file
<?php
$items = array();
$url="localhost";
$user= "root";
$pass="";
$dbname="test";
$value= 0;
if(isset( $_POST['val'])){
$value= $_POST['val'];
}
$num=0;
$connect=mysqli_connect($url,$user,$pass,$dbname);
$result="SELECT email,pass,permission FROM test where id=$value";
$sql=mysqli_query($connect,$result);
while($row=mysqli_fetch_assoc($sql) ){
/* add a new item */
$num++;
$items[$value] = array(
'email' => $row['email'],
'pass' => $row['pass'],
'perm' => $row['permission']
);
}
$json_response = json_encode($items);
echo $json_response;
?>
Hi I have a confusion in js i called lot of js version in my site what is the proper way
I called this way in different page
<link src="js/jquery.min.js"/>
<link src="js/bootstrap.min.js"/>
<link src="js/owl.carousel.min.js"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link src="js/jquery-1.12.1.min.js"/>
I have slider Date picker etc. So if one is working then rest is not working
So How i make it work all
Gallery Slider
<?php
foreach($block->getGalleryImages() as $image){ ?>
<?php if(!$block->isMainImage($image)):?>
<img src="<?php //echo $image->getData('medium_image_url') ?>">
<?php endif; ?>
<?php } ?>
<div class="product-slider">
<?php /* #escapeNotVerified */ $json=$block->getGalleryImagesJson();
$array = json_decode($json,true);
foreach($array as $item)
{
$imgurl = $item['full'];?>
<div class="item">
<img src="<?php echo $imgurl;?>"/>
</div>
<?php }?>
</div>
<script type="text/javascript">
$.noConflict();
$(".product-slider").owlCarousel({
loop: true,
margin: 50,
responsiveClass: true,
nav: true,
lazyLoad :true ,
rewind : false ,
autoplay: true,
dots: true,
navText : ["",""],
responsive: {
0: {
items: 1
}
, 768: {
items: 2
}
, 991: {
items: 1
}
}
});
</script>
Date Picker
<script type="text/javascript">
jQuery("#dt1-<?php echo $_product->getId()?>").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = jQuery('#dt2-<?php echo $_product->getId()?>');
var startDate = jQuery(this).datepicker('getDate');
var minDate = jQuery(this).datepicker('getDate');
//dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
jQuery(this).datepicker('option', 'minDate', minDate);
}
});
jQuery('#dt2-<?php echo $_product->getId()?>').datepicker({
dateFormat: "dd-M-yy"
});
</script>
<input type="text" id="dt1-<?php echo $_product->getId()?>">
<input type="text" id="dt2-<?php echo $_product->getId()?>">
1 - Change the JavaScript tags from <link /> to <script />. Link tags are for stylesheets and script tags, well, for scripts;
2 - Load JavaScript libraries only once;
3 - Check the URL's and versions you want to load the libraries / stylesheets
from. I guess you're mixing things up a bit.
See example below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript"src="js/owl.carousel.min.js"></script>
If you need to load CSS files, you should write the following:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" media="all" />
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 7 years ago.
Let me show you all, i put this code in a file called consultas.php
CONSULTAS.PHP
This file shows the table with data, at the end of column called folio id="'.$row["folio"].'" when i clicked there this shows me and towards to VISTAPREVIA.PHP for more data about this folio but in paging #1 it works very well and now when i'm going to paging #2 i clicked again and doesn't work because doesn't show me anything, the error says me: Uncaught ReferenceError: $ is not defined
<script type="text/javascript">
$(document).ready(function() {
var table = $('#registros').DataTable({
"paging": true
});
//new $.fn.dataTable.AutoFill( table );
$('.back').on("click", function(event)
{
event.preventDefault();
location.reload();
});
$('.modificar').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.vistaprevia').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.detalle').on("click", function(event)
{
event.preventDefault();
var f = $(this).attr('id');
$('<div></div>').load(this.href, {folio: f}).modal();
});
});
</script>
REGRESAR ATRÁS
<h1 class="titPer">CONSULTA DE LA TABLA</h1>
<div class="tabla">
<table id="registros" class="display" cellspacing="0">
<thead>
<tr>
<th>Folio</th>
<th>Estatus</th>
<th>Punto de Venta</th>
<th>Usuario</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($consulta)) {
?>
<tr>
<td><?=$row['folio']?></td>
<td><?=$row['estatus']?></td>
<td><?=$row['punto_venta']?></td>
<td><?=$row['usuario']?></td>
<td>
<?php
if($_SESSION['permisos'] == 'VENDEDOR' || $_SESSION['permisos'] == 'JEFESUC' || $_SESSION['permisos'] == 'EMBARQUES'){
echo '
<center>
<a class="modificar icon-pencil" href="includes/vistaPrevia.php" id="'.$row["folio"].'"></a>
|
<a class="detalle icon-eye-plus" href="includes/lightbox.php" id="'.$row["folio"].'"></a>
</center>
';
}else{
echo'
<center>
<a class="vistaprevia icon-eye-plus" href="includes/vistaPrevia.php" id="'.$row["folio"].'"></a>
</center>
';
}
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
VISTAPREVIA.PHP
<?php session_start(); ?>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
</head>
REGRESAR ATRÁS
<h1 class="titPer">ACTUALIZACIÓN DE DATOS</h1>
<!-- <form action="includes/"></form> -->
<?php
if($_SESSION['permisos'] == 'CALIDAD'){
include('upRegCal.php');
}
?>
<form action="includes/edit.php" enctype="multipart/form-data" id="formAct" method="POST" name="enviarForm">
<?php
if($_SESSION['permisos'] == 'VENDEDOR' || $_SESSION['permisos'] == 'JEFESUC' || $_SESSION['permisos'] == 'EMBARQUES'){
include('upRegUser.php');
}
if($_SESSION['permisos'] == 'ADMINISTRADOR'){
//include('upRegCal.php');
echo "Hola Administrador";
}
?>
</form>
last
INDEX.PHP
i have to assure this part because i put the correct Jquery scripts but i don't know why and i couldn't find the problem and yes i use the Datables Scripts
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<title>Bienvenido</title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/funciones.js"></script>
<script src="libs/datatables/media/js/jquery.dataTables.js"></script>
<script src="libs/datatables/extensions/AutoFill/js/dataTables.autoFill.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css"/>
<link rel="stylesheet" href="css/estilos.css" type="text/css"/>
<link rel="stylesheet" href="css/estilosForm.css" type="text/css"/>
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<link rel="stylesheet" href="libs/datatables/media/css/jquery.dataTables.css" type="text/css"/>
<link rel="stylesheet" href="libs/datatables/extensions/AutoFill/css/dataTables.autoFill.css" type="text/css"/>
</head>
<body>
<div class="fondoHeader"></div>
<header class="shadow">
<nav>
<?php
if(isset($_SESSION['usuario']))
include('includes/btnSiSession.php');
else
include('includes/btnNoSession.php');
?>
</nav>
</header>
<div id='mainContainer'>
<?php
include('includes/bienvenido.php');
if(isset($_SESSION['usuario'])){
echo "<script language='JavaScript'>";
// echo "document.getElementById('login').style.display='none'";
echo "document.getElementById('login').style.visibility='hidden'";
echo "</script>";
}
else{
echo "<script language='JavaScript'>";
// echo "document.getElementById('login').style.display='block'";
echo "document.getElementById('login').style.visibility='visible'";
echo "</script>";
}
?>
</div>
<div class="clear"></div>
<footer>
<?php
include('includes/footer.php');
?>
</footer>
</body>
</html>
UPDATE
i put this code jQuery CDN script
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#registros').DataTable({
"paging": true
});
//new $.fn.dataTable.AutoFill( table );
$('.back').on("click", function(event)
{
event.preventDefault();
location.reload();
});
$('.modificar').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.vistaprevia').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.detalle').on("click", function(event)
{
event.preventDefault();
var f = $(this).attr('id');
$('<div></div>').load(this.href, {folio: f}).modal();
});
});
</script>
In consultas.php, you must include JQuery (<script src="js/jquery-1.11.2.js"></script>) before using it, before your <script>.
In web, each page is different, then you must add jQuery in each one.
example
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* ... */
});
</script>
In some cases you have to use jQuery instead of $.
2nd option: jQuery(document).ready(function($) {
After this you can use $ as synonym for jquery.
This error is because you're missing the JQuery library. If you are including your Javascript libraries(including JQuery) at the bottom of your page(footer), you can either
Include the JQuery library at the top of the page
OR
make your Javascripts functions into a common js file and include it at the footer just below the Jquery include.
Here is the link to Jquery CDN
I am using a raspberry pi to pulse a relay (on the below form submit) to another piece of equipment which if successfully pulsed will toggle a relay on/off. The toggled relay comes back to the pi as an input which is being monitored on the status.php page inside of the loading div. If I load the below page, it correctly displays the status.php, but after pressing the form submit button, it does not reload the status.php page. I have tried everything I can think of, please help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alarm Panel</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#loading').load('/status.php');
}, 2000);
});
// ]]>
</script>
<?php
if (isset($_POST['PULSE'])) {
shell_exec('python /usr/lib/cgi-bin/pulse.py');
}
?>
</head>
<body>
<div id="currentstatus" data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed="false">
<h1>Current status</h1>
<div id="loading" align="center">
<H3>Loading Status...</H3>
</div>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h4>Change Status</h4>
<form method="post">
<input type="submit" name="PULSE" value="PULSE" />
</form>
</div>
</body>
</html>
status.php
<?php
$status = shell_exec('python /usr/lib/cgi-bin/status.py');
?>
<h3><? echo $status; ?></h3>
<br />
<img src="/img/<? print $status; ?>.jpg" height="250"; width="250";>
have you tried manipulating submit behavior? that may fix it.
$(document).on('click', '[name="pulse"]', function(e) {
e.preventDefault();
$('#loading').load('/status.php');
});
you may also try changing your timeout function... That's a bit tricky because load is an asynchronous function.
var loadStatusTimeout;
function loadStatus() {
$('#loading').load('/status.php', function() {
loadStatusTimeout = setTimeout(loadStatus, 2000);
});
}
loadStatusTimeout = setTimeout(loadStatus, 2000);
also, you're accidentally adding semicolons into your img element:
change:
<img src="/img/<? print $status; ?>.jpg" height="250"; width="250";>
to:
<img src="/img/<? print $status; ?>.jpg" height="250" width="250">
I need when I start type on text box automatically get sugessions from database.then when I select a sugession automatically should fill other text fields which are relate to the selected choice.
here is my code,
view
<body>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/ css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery- ui.css">
<meta charset="UTF-8">
</script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "<?php echo site_url('birds/get_birds'); ?>",
select:function(event, ui){
$("#city").val(ui.item.value);
$("#location").val(ui.item.location);
$("#label").val(ui.item.label);
},
minLength:2
};
$("#birds").autocomplete(ac_config);
})
</script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "<?php echo site_url('birds/get_payee_data'); ?>",
select:function(event, ui){
$("#payeename").val(ui.item.name2);
$("#payee_address").val(ui.item.address2);
},
minLength:2
};
$("#test").autocomplete(ac_config);
})
</script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
});
</script>
<form action="#" method="post">
<input type="text" id="birds" />
<p>city: <input type="text" id="city"/></p>
<p>location: <input type="text" id="location"/></p>
<p>label: <input type="text" id="label"/></p>
<p>Date: <input type="text" id="datepicker"/></p>
<input type="text" id="test" />
<p>name: <input type="text" id="payeename"/></p>
<p>address: <input type="text" id="payee_address"/></p>
</form>
controller
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
public function get_payee_data(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$ss = strtolower($_GET['term']);
$this->birds_model->load_payee_data($ss);
}
}
}
model
function get_bird($q){
$this->db->select('*');
$this->db->like('bird', $q);
$query = $this->db->get('birds');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$new_row['label']=htmlentities(stripslashes($row['bird']));
$new_row['value']=htmlentities(stripslashes($row['aka']));
$new_row['city']=htmlentities(stripslashes($row['city']));
$new_row['location']=htmlentities(stripslashes($row['location']));
$row_set[] = $new_row; //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
function load_payee_data($ss){
$this->db->select('*');
$this->db->like('name', $ss);
$query = $this->db->get('payee_details');
//$query = $this->db->query("SELECT * FROM payee_details WHERE name LIKE '%q%' ");
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$new_row['name2']=htmlentities(stripslashes($row['name']));
$new_row['address2']=htmlentities(stripslashes($row['address']));
$row_set2[] = $new_row; //build an array
}
echo json_encode($row_set2); //format the array into json data
}
}
under the gihan shows sugessions
You are using/including two separate versions of jquery, that'll be the root cause of the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>