I'm trying to keep true to the DRY principle by moving my jquery auto complete code to a scripts.js file but i'm having trouble getting the auto complete functionality to work when i move it.
Here's how its setup at the moment.
add form
<head>
<?php
require_once ('includes/connect-db.php');
require_once ('includes/functions.php');
?>
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="includes/js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#datepickerID').datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'yy-mm-dd'
})
<?php $productArray = autoComplete();?>
$(function() {
var js_products_array = <?php echo json_encode($productArray); ?>;
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
});
});
</script>
</head>
I'm uncertain as to how to get this to work between the addForm.php and scripts.js when there is embeded php code in the javascript, if that makes sense.
You will have to keep js_products_array outside of the .js file as it contains data from PHP scripts and initilize the autocomplete() on document ready.
so you can keep only
<?php $productArray = autoComplete();?>
<script type="text/javascript">
var js_products_array = <?php echo json_encode($productArray); ?>;
</script>
and in your file.js you can add
$('document').ready(function() {
$('#datepickerID').datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'yy-mm-dd'
})
$( "#autocompleteID" ).autocomplete({
source: js_products_array
});
});
Related
i want to send Get when the link clicked to receive the result in php code
and this what happened
this in php file working perfect
<html>
<a class="cc" href="#">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
but when i put GET to the href didn't work just Flashing content
<html>
<a class="cc" href="?id=1">click me</a>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cc").click(function () {
$(".body").load('page.php ')
})});
</script>
<section class="body"></section>
</html>
In the second case, you really need to stop the <a> from following the link.
$(document).ready(function() {
$(".cc").click(function(e) {
e.preventDefault();
$(".body").load('page.php');
});
});
hello here i have i script but this dont work i caant update chat every second can you help me to update chat every second from database (pleasee no uppate div only text)
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
read.php
<?php
include("config.php");
$Data = "SELECT * FROM chat ORDER BY Time ASC";
$Result = mysqli_query($Connection, $Data);
while($row = mysqli_fetch_array($Result,MYSQLI_ASSOC))
{
echo '</br>' .$row['name'];
}
mysqli_free_result($Result);
mysqli_close($Connection);
?>
this is my code but my code when insert data in database my code not update data in html
Option 1:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(
function() {updateChat();},
1000);
function updateChat()
{
$.get("read.php")
.done(function(data)
{
//You can do futher checks here....
$("#Show_Data").html(data);
setTimeout(function() {updateChat();},1000);
})
.fail(function()
{
//error 404 or 500
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
Int the code above, when something wrong with the call it stops and it does not continues the executions.
Option2:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
setInterval(
function() {updateChat();},
1000);
function updateChat() {
$.get("read.php", function(data)
{
$("#Show_Data").html(data);
});
}
});
</script>
</head>
<body>
<div id="Show_Data"></div>
</body>
</html>
The code aboce executed every 1000 miliseconds the ajax call regardless if it is sucessfull the call or not
You need to use setInterval instead of setTimeout (it runs only once).
If that doesn't help, please post any PHP/JavaScript errors that you are getting.
To make sure PHP errors are set to display, add error_reporting(E_ALL) to the top of your script.
To see JavaScript errors, open the Developer Tools (F12) in your browser and go to Console.
I want to pass jQuery variable to php file ,
this is my_js.js file
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
var s_id = this['sender_id'];
});
});
}
and i want to display it here in php file,
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div> <?php echo $s_id ; ?> </div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
You might consider using jQuery to set the s_id value in the page.
You can modify your HTML as follows (the important part being the added span element):
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div><span id="s_id"></span></div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
And you can use jQuery in your getJSON callback to set the value as follows to find your added span element and modify its text:
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
$("#s_id").text(this['sender_id']);
});
});
}
i want that when we click on Ajax 1 then content of ajax1 is change but Ajax 2 will remain same and vice verse plz help i want to do that with jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pas").click(function(){
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$("#pas").html(result);
}});
});});
</script>
</head>
<body>
<div id="pas"><h2>AJAX 1</h2></div>
<div id="pas"><h2> AJAX2 </h2></div>
</body>
</html>
Two elements cannot have the same id. You should change to using classes.
<div class="pas"><h2>AJAX 1</h2></div>
<div class="pas"><h2> AJAX2 </h2></div>
Once you've done that, you can use this to target the correct item.
$(document).ready(function(){
$(".pas").click(function(){
var $this = $(this); // "this" is the clicked element
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$this.html(result);
}});
});
});
you have to differentiate div's ids: give them two different id (i.e. pas1 and pas2 ) and same class 'pas', then fire actions on div.pas
Don't use duplicated id's, use class instead. Use a refference to the clicked object to update your content. Here is your modified code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
var _this = this;
$.ajax({url:"001.php?q=1 & l=111", success:function(result){
$(_this).html(result);
}});
});});
</script>
</head>
<body>
<div><h2>AJAX 1</h2></div>
<div><h2> AJAX2 </h2></div>
</body>
</html>
In header.php file , below is used
<script type="text/javascript" src="http://example.com/library/includes/jQuery142.js">
</script> // jquery
<script type="text/javascript" src="http://example.com/library/includes/jqueryautoiframe.js">
</script> // plugin iFrame Sizing
in view file below code, How do i put below in to zend ?I used below code but not working.
<iframe src="blabla"></iframe>
<script>
$('iframe').iframeAutoHeight(); //iframeAutoHeight is the function in jqueryautoiframe.js
</script>
You need to wait until the document is ready before you can use any js
try this:
<script>
$(function() {
$('iframe').iframeAutoHeight(); //iframeAutoHeight is the function in jqueryautoiframe.js
});
</script>
try
<iframe src="http://google.com"></iframe>
<script type="text/javascript">
$('iframe').iframeAutoHeight(); //iframeAutoHeight is the function in jqueryautoiframe.js
</script>
Your iframe source is 'blabla' did you put it intentionally ??
try
<?php
$this->headScript()
->appendScript(
<<<'BODY'
$('iframe').iframeAutoHeight();
});
BODY
);
?>