I have the following Script tags in may header.php file.
">
<!-- Bootstrap Core Js -->
<script src="<?php echo base_url('resource/temp/plugins/bootstrap/js/bootstrap.js'); ?>"></script>
<!-- Select Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/bootstrap-select/js/bootstrap-select.js'); ?>"></script>
<!-- Slimscroll Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/jquery-slimscroll/jquery.slimscroll.js'); ?>"></script>
<!-- Waves Effect Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/node-waves/waves.js'); ?>"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="<?php echo base_url('resource/temp/plugins/jquery-countto/jquery.countTo.js'); ?>"></script>
<!-- Custom Js -->
<script src="<?php echo base_url('resource/temp/js/admin.js'); ?>"></script>
<!-- Demo Js -->
<script src="<?php echo base_url('resource/temp/js/demo.js'); ?>"></script>
and these files are again loaded in the footer file as well along with some other .js files. With all the documents, I cannot call ajax function in one of my pages to populate an option list.
I want to populate a select option list when I click on the other option select field. But its not working. Please help. I tried changing latest jquery.min.js files as well. The min.js file version used in the template is 1.12.4.
Below is my Page where ajax call is used.
<div class="form-group form-float">
<div class="form-line">
<label>Union</label>
<select class="form-control union" name="gunion" id="union" required >
<option value="">-- Please Select--</option>
<?php
foreach($union as $row)
{
?>
<option value="<?php echo $row->u_name;?>"><?php echo $row->u_name;?></option>
<?php
}
?>
</select>
<span class="text-danger"> <?php echo form_error('tonque'); ?></span>
</div>
<div class="form-line">
<label>Sakha</label>
<select class="form-control" name="gshaka" id="sakha" required>
<option value="">---Please Select--</option>
</select>
<span class="text-danger"> <?php echo form_error('tonque'); ?></span>
</div>
and the Script:
<script type="javascript">
$(document).ready(function(){
$('#union').on('change',function(){
var unionID = $(this).val();
console.log(unionID);
if(unionID){
$.ajax({
type:'POST',
url:'getsakha/'+unionID,
cache:false,
success:function(html){
$('#sakha').html(html);
}
});
}else{
$('#sakha').html('<option value="">Select Union first</option>');
}
});
});
</script>
Remove javascript from script tag of type attribute
<script type="javascript">
add type="text/javascript" in your script tag
<script type="text/javascript">
OR either remove type attribute
<script>
This happens because there are not type attribute of javascript but there is text/javascript. If you are not writing type attribute then it will consider as a javascript
I hope this may help you.
remove repeated script files and load all script files in the footer.
or you can use https://api.jquery.com/jquery.noconflict/
Related
I have two jQuery document.ready functions, one is for a pop-up, the other is for a cookie notification banner.
The problem I am encountering is when I load these separately whichever one I load second stops the first from working.
For example:
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#bookdirectlink").click(function() {
jQuery("#bookdirectp").show();
});
jQuery(".close").click(function() {
jQuery("#bookdirectp").hide();
});
}
);
</script>
<script type="text/javascript">
jQuery(document).ready(
function() {
$('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
});
</script>
The second script then works and hides the cookie bar when the button is clicked, but the first script doesn't work. The reverse is true if I swap the scripts around.
I've also tried combining the two into one ready statement, ie:
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery("#bookdirectlink").click(function() {
jQuery("#bookdirectp").show();
});
jQuery(".close").click(function() {
jQuery("#bookdirectp").hide();
});
$('.cookie-message').cookieBar({ closeButton : '.my-close-button' });
}
);
</script>
But then none of the functions work.
The cookie bar runs from a script that I am loading in the header:
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>
Any advice would be greatly appreciated.
This is the html for the cookie banner:
<div class="cookie-message">
<p>We use cookies, including those by third parties, to improve our services, show you advertisements based on your preferences, perform statistical analysis on our users' browsing behaviour and simplify the interaction with social networks. If you continue browsing, we will assume that you agree with their use.</p><p> You can obtain further information here. Privacy Policy</p> <a class="my-close-button" href>Accept</a>
</div>
And the html for the pop up:
<div id="directcontainer">
<a class="close" href="#">X</a>
<?php if(get_field('heading', 'option')){ ?><h2><?php the_field('heading', 'option'); ?></h2> <?php } ?>
<?php if(get_field('main_text', 'option')){ ?><p><?php the_field('main_text', 'option'); ?></p> <?php } ?>
<?php if(get_field('small_text', 'option')){ ?><p><span><?php the_field('small_text', 'option'); ?></span></p> <?php } ?>
<?php if(get_field('booking_button_link', 'option')){ ?><?php if(get_field('booking_button_text', 'option')){ ?><?php the_field('booking_button_text', 'option'); ?> <?php } ?><?php } ?>
</div>
Stupid mistake:
I had
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"/>
instead of:
<script type='text/javascript' src="<?php bloginfo('template_url'); ?>/dist/js/jquery.cookieBar.js"></script>
when jquery.js and bootstrap.js active, button form action can't run. But when jquery.js command, button signin (tg-btnsignin) can't run.
this is script code:
<script src="<?php echo base_url('/assets/js/bootstrap.min.js'); ?>"></script>
<script src="<?php echo base_url('/assets/js/vendor/jquery-library.js'); ?>"></script>
this is my form code:
<form class="tg-formtheme tg-formtrip"
method = "GET"
action = "<?php echo site_url('Home/search'); ?>" >
this is my signin code:
<div class="tg-userbox">
<a id="tg-btnsignin" class="tg-btn" href="#tg-loginsingup">
<span>sign in</span>
</a>
Put the jQuery before bootstrap.
<script src="<?php echo base_url('/assets/js/vendor/jquery-library.js');?>"></script>
<script src="<?php echo base_url('/assets/js/bootstrap.min.js');?>"></script>
I have two dropdowns with the data in the second dropdown dependent on what is selected in the first dropdown. I'm using Ajax/JQuery and it works fine if I comment out the include file that has my site template code for the sidebar of every page on my site. With that include file in the code though, it doesn't work. Instead of populating the second dropdown, it has an empty list. When I inspect the element using the browser's development tools, the code from the the head tag is being replicated there instead of the code populating the list options. So I guess my question is if there is some potential conflict between HTML, PHP, and Ajax/JQuery? I should also note that even if I place all the HTML in the file instead of calling the include library for the sidbar, it still behaves in the same manner.
Here is the ajax2.js...
$(document).ready(function() {
$("#country").change(function() {
var country_id = $(this).val();
if(country_id != "") { $.ajax({
type:"POST",
url:"sample.php",
data:{c_id:country_id},
success:function(response) {
var resp = $.trim(response);
$("#state").html(resp);
}
});
} else {
$("#state").html("<option value=''>------- Select --------</option>");
}
});
});
Here is the Ajax/JQuery source files from the head tag...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
And finally, here is the HTML with the code for the two dropdowns (sample.php)...
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>Sample</title>
<link href="../../sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
</head>
<body>
<?php include("../includes/sidebar.php"); ?><?php
//MySql DB Info
include("../includes/db_connect7.php");
if (isset($_POST['c_id'])) {
$title = mysql_real_escape_string($_POST['c_id']);
echo "title = $title";
$sql = "select * from TW_Picks where title='$title'";
$res = mysql_query($sql);
if(mysql_num_rows($res) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = mysql_fetch_assoc($res)) {
echo "<option value=\"$row[name]\">$row[pick]</option>";
}
}
} else {
?>
<div align="center">
<font face="Verdana, Arial, Helvetica, sans-serif" size="5"><strong>SAMPLE</strong></font> </div>
<p> </p>
<center>
<form action="<?php echo $PHP_SELF ?>" method="post">
<br><br>
<select name="country" id="country">
<option>Select Fed</option>
<option value="USA">USA</option>
<option value="CAN">CAN</option>
<option value="MEX">MEX</option>
</select>
<br><br>
<select name="state" id="state">
<option>Select Title</option>
</select>
<br><br> <br><br><br>
<input name="addnew" type="submit" value="Add New">
<br><br>
</form>
</center>
<?php
} ?>
<br><br><br><br><br><br><br>
<p> </p>
</body>
</html>
The sample.php file also includes the header file. When you fetch sample.php using jQuery, it send back the header code as well. Make your your sample.php file only returns required HTML.
if (isset($_POST['c_id'])) {
// what you are doing here should work okay
} else {
// Put the includes here
include("../includes/sidebar.php");
}
My apologize in advance for my (maybe) stupid question but my knowledge of Javascript/JQuery is almost 0
I have in index.html the following script:
index.html
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#MyDIV")
.load("buttons.php")
});
</script>
<div id="MyDIV"></div>
As you can see, the idea is load buttons.php in a div tag in index.html - That works fine -
buttons.php
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<script>
$('#botton5').click(function(event){
$("#bottons").load('somepage.php?answer=5'); //here!
});
</script>
Thats also works fine and I receive the information from somepage.php in MyDIV in index.html
but does not work when I include a php in the URL in the line
$("#bottons").load('somepage.php?answer=5&title=<?php echo $title;?>&date=<?php echo $date;?>'); //here!
Including a PHP in load, the div does not load in index.html, can you please support me on how to add a php in the URL in load?
Thanks in advance for your support
#Luis Gerardo Runge In JavaScript you can't use PHP but logically you can take your value in hidden field and use in javascript. i have add some sample code my be it's help you
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<div id="bottons">
</div>
<?php
$title = 'your title';
$date = 'yourdate';
?>
<input type="hidden" id="title" name="title" value="<?php echo urlencode($title); ?>">
<input type="hidden" id="date" name="date" value="<?php echo urlencode($date); ?>">
<script>
$('#botton5').click(function(event){
alert('call');
$("#bottons").load('json.php?answer=5&title='+$('#title').val()+'&date='+$('#date').val()+''); //here!
});
</script>
FYI: You need to use urlencode and urldecode for pass parameter through the URL
I have a webpage with many sites which contains informations about items. I get the informations out of a mysql database. Now I need tooltips out of these informations.
I´m searching a solution to get the "echo" in a tooltip. It shouldn´t be much code, because I want to use the tooltips very often. The question is, woulnd´t it be easier to get the whole <div class="itembox"> in a tooltip?
Here is the code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="container">
<div class="itembox">
<?php
$con = mysqli_connect("localhost","XXXXX","XXXXX","XXXXXXX");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
/* change character set to utf8 */
if (!mysqli_set_charset($con, "utf8")) {
printf("Error loading character set utf8: %s\n", mysqli_error($con));
exit();
} else {
}
$sql = "SELECT * FROM TEST WHERE id=8778";
$result = mysqli_query($con,$sql)or die(mysqli_error());
echo "<table>";
while($row = mysqli_fetch_array($result)) {
$name= $row['name'];
$itemLevel= $row['itemLevel'];
echo
"<tr><td class='nameepisch'>".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$itemLevel."</td></tr>
</tr>";
}
echo "</table>";
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
mysqli_close($con);
?>
</div>
</div>
The simplest way for html tooltips is assigne a proper value to the title attribute of a tag eg:
if $myTooTiptext is the text you want show could be somethings like this
echo
"<tr><td class='nameepisch' title='".$myToolTiptext .">".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$id[$itemLevel]."</td></tr>
When you move over the td for name the tooltip text is showed
In case you're using Bootstrap, you can do like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
And, don't forget to add Bootstrap CSS and JS inside the page:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>