I am trying to print some code from PHP after clicking button in JavaScript, however the code is not running and I can't see any errors.
<script type="text/javascript src="https://code.jquery.com/jquery-
3.4.1.min.js" >
$( document ).ready(function() {
<?php echo '$("button[data-id='. $transport[0]['request']['vehicleType']
. ']" ).click();'; ?>
});
</script>
...
<script type="text/JavaScript src=" https:="" code.jquery.com="" jquery
3.4.1.min.js"="">
$( document ).ready(function() {
$("button[data-id=seated]" ).click();});
</script>
Running the code in console works just fine and the button is clicked,however echoing from php the code is present without errors but not executed and the button is not clicked.
the code is not working even like this
php
<script src="https://code.jquery.com/jquery-3.4.1.min.js" > </script>
<script type="text/javascript">
$( document ).ready(function() {
<?php echo '$("button[data-id='. $transport[0]['request']['vehicleType'] . ']" ).click();'; ?>
});
</script>
js output
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script type="text/javascript">
$( document ).ready(function() {
$("button[data-id=seated]" ).click();});
</script>
those missing quotes and slashes came from formatting my question, im new to the forum so i wasn't sure how to format the code.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" > </script>
<script type="text/javascript">
$( document ).ready(function() {
setTimeout(function(){ <?php echo '$("button[data-id='. $transport[0]['request']['vehicleType'] . ']" )[0].click()' ?> }, 100)
setTimeout(function(){ <?php echo '$("input[value='. $transport[0]['request']['vehicleSpecification'] . ']")[0].click();'; ?> }, 100)
});
</script>
A small time out and ref to element 0 was enough to make it work
Related
I am new to dataTable customization, for multi-column search(through input text box) I referred this: https://datatables.net/examples/api/multi_filter.html.
And copy pasted the javascript mentioned. over that link. Is that enough?
PS: also I included the files mentioned, is there any order needed of adding those files?
as I have many other jQuery files in my pages (for bootstrap and other functions), I have included all dataTables files.
<script src=" https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>
Image for refrenceclick here
Without seeing your code, it's hard to say what's wrong. The example you gave is a good one, and here is another live enter link description here - the code is below. Hopefully those will get you going.
$(document).ready(function() {
$('#example thead th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder='+title+' />' );
} );
var table = $('#example').DataTable({
scrollX: true
});
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
I echo my html in the body using php.
Like this:
<body>
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</body>
In this html I have a button with the id set to button. Then, in Jquery,I have this code:
$(document).ready(function(){
$("#button").click(function(){
alert("It works");
});
});
However, It works is not getting printed. What should I do?
It also depends on where your Javascript Code is located within the DOM and also if you have jQuery included in the page in question.
Something like this could hopefully work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<title>Demo</title>
</head>
<body>
<div class="container">
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$("#button").on("click", function(e){
alert("It works");
});
});
})(jQuery);
</script>
</body>
</html>
Please note that the above Snippet is assumed to live inside a PHP File (index.php - for example).
How to create a element that uses javascript without reloading the jquery.js?
I've already load it on layout.
every time, I must load it.
This is my element/contacts.ctp
(entire html)
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js">
</script>
<script type="text/javascript" src="js/bootstrap/novo.js">
</script>
<script type="text/javascript">
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
e.preventDefault();
var inpute = '<div class="entradas-'+id+'" hidden></br><select class="form-control" id="tipo." name="abc['+id+'][tipo_id]"><?php foreach($contatotipo as $tipo): ?><option value="<?= $tipo->id; ?>"><?= $tipo->nome; ?></option> <?php endforeach; ?> </select> <input class="form-control" id="contato" placeholder="Preencher" name="abc['+id+'][contato]"> <button class="btn btn-danger btn-remove" id="addcontato" type="button"> <span class="fa fa-minus"></span> </button> </br> </div>';
$(".novas").before(inpute);
$('.entradas-'+id).slideDown('slow');
return id++;
})
.on('click', '.btn-remove', function(e)
{
$(this).closest('div').slideUp();
e.preventDefault();
return false;
});
});
</script>
First, put the custom JavaScript code in a separate file. Then, wrap it inside the $(document).ready() function, like this
$(document).ready(function(){
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
...
}
...
});
This tells jQuery to wait with the code execution until all the elements on the page have been drawn.
Then, load all the scripts in the <head> tag:
<html>
<head>
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap/novo.js"></script>
<script type="text/javascript" src="js/your/custom/path.js">
</head>
Make the header the same for all your pages, and you're good to go.
I have a jquery function.
I also have a variable, $id_number.
If the value in variable exists:
I want the jquery function to load. This is a modal that should pop up on page start.
<? if(isset($id_number))
{ ?>
jQuery(document).ready(function(
<? }
else
{ ?>
jQuery(function($){
<? } ?>
// code
});
why is my function not loading on page start? What am i doing wrong?
This should work
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<? if(isset($id_number))
{ ?><script>
alert('dummy');
</script>
<? }
else
{ ?>
<script>
alert('data');
</script>
<? } ?>
I have two .php files. The first one ajax_testing.php looks like this:
<!DOCTYPE html>
<html>
<?php
$index_local=1;
$_SESSION['global_index'] = $index_local;
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="main">Who is batman? click count=<?echo $_SESSION['global_index'] ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait till page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?php echo $_SESSION['global_index']; ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
Document number two is called property-detailed.php and looks like this:
<!DOCTYPE html>
<html>
<?php
$_SESSION['global_index'] = $_GET['global_index'];
?>
<head>
<script></script>
</head>
<body>
<div id="main">Who is batman? click count=<?php echo $_SESSION['global_index']; ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait til page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?echo $_SESSION['global_index'] ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
I load the first page, and it has a variable, $global_index, that is set to 1 and a button with an ajax command to reload the div with the new information found on the second page.
My goal is to have the variable $global_index carry over and increment each time I press the button. Is this possible with only ajax being implemented? If so, is there a way to make it happen with only the first page? Otherwise would it just be easier to have my database keep track of this number and increment that?
In your ajax_testing.php:
<?php session_start(); ?>
<script type="text/javascript" src="jquery.js"></script>
<?php
$_SESSION['counter'] = 1;
$count = $_SESSION['counter'];
?>
<div id="main">Batman<?php echo $count; ?></div>
<button id="detailed">Link</button>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#detailed',function(){
var count = "<?php echo $count; ?>",
dataString = "counter=" + count;
$.ajax({
type: "POST",
url: "property-detaild.php",
data:dataString,
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
And in your property-detailed.php:
<?php
session_start();
$_SESSION['counter'] = $_SESSION['counter']+1;
echo $_SESSION['counter'];
?>