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>
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>
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/
codeigniter-external java scriptfile not working?
in my view file:
<script src="<?php echo base_url();?>js/getquestion.js" type="text/javascript"></script>
<a onclick="getQuestion()" style="width: 280px; height: 540px; padding-top: 3px;" class="btn btn-primary" id="HyperLink">Start</a>
getquestion.js:
function getquestion() {
$.get("http://localhost/n/saq/saq/index.php/quizs/getquestion", function (resp) {
if (resp != null) {
$("#question").html(resp);
$("#loading").html("");
}
})
}
when i click start button not showing any thing,
but when i navigate to url http://localhost/n/saq/saq/index.php/quizs/getquestion its working. pls help me
Which folder you put your .js at?
Usually .js files are take places in assets/js folder, so you'll need:
<script src="<?php echo base_url(); ?>assets/js/getquestion.js" type="text/javascript"></script>
Or you can ... (more neat)
<script src="<?php echo base_url('assets/js/getquestion.js'); ?>" type="text/javascript"></script>
Just for information considering this is 2017 already
HTML5 don't need us to include the type attribute in <script> tag
PHP echo have a shorthand, instead of <?php echo base_url(); ?>, you just need <?= base_url() ?>
So you may write just like this:
<script src="<?= base_url() ?>assets/js/getquestion.js"></script>
... and you must include <!DOCTYPE html> in the first line of your pages
try this code,
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="<?php echo base_url();?>js/getquestion.js" type="text/javascript"></script>
<a onclick="getquestion()" style="width: 280px; height: 540px; padding-top: 3px;" class="btn btn-primary" id="HyperLink">Start</a>
<p id="question"></p>
</body>
js code,
function getquestion() {
$.get(<?php echo base_url("index.php/getquestions"),function(result){
if(result != null) {
//alert(result);
document.getElementById("question").innerHTML=result;
}
});
}
I have tested this code in http://jsfiddle.net/gLpHY/92/, in there it runs fine but when I run it in my computer it does not work. (I have tested two versions of this code once using just html and jquery and the next time I use them with php, both of them did not work for me.)
<html>
<head>
<link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
<link rel="stylesheet" href="<?php echo base_url()?>css/tableCss.css">
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery-1.12.0.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/projs.js"></script>
<script type="text/javascript" scr="<?php echo base_url()?>js/jquery.validate.min.js"></script>
<title>Questions</title>
</head>
<body>
<div class="frm"><?php $a=array("id"=>"myForm","name"=>"myForm");
echo form_open('site/search',$a); ?>
<div>
<?php echo form_label('Question:','question'); ?>
<?php echo form_input('question', set_value('question', #$_GET['question']), 'id="question"', 'name="question"'); ?>
</div>
<div>
<?php echo form_label('Category:','category'); ?>
<?php echo form_dropdown('category', $category_options, set_value('category', #$_GET['category']), 'id="category"', 'name="category"'); ?>
</div>
<div>
<?php echo form_label('Score:','score'); ?>
<?php echo form_dropdown('score_comparison', array('gt' => '>', 'gte' =>'>=' , 'eq' => '=', 'lt' => '<', 'lte' => '<='), set_value('score_comparison', #$_GET['score_comparison']), 'id="score_comparison"', 'name="score_comparison"'); ?>
<?php echo form_input('score', set_value('score', #$_GET['score']), 'id="score"', 'name="score"'; ?>
</div>
<div>
<?php echo form_submit('action','');?>
</div>
<?php echo form_close();?>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myForm").validate({
rules: {
question: {
required: true
}
},
messages: {
question:{
required: "Please enter some text"
}
}
});
});
</script>
</body>
</html>
First off all, replace you <?php echo base_url()?> with just /. You can use relative path for resources from your site. Path should be like this: scr="/js/jquery-1.12.0.js" for all you scripts.
For second replace your string $().ready(function () { with $(function () {
Hope this helps.
Try typing in the full URL instead of using <?php echo base_url()?> as I have seen that cause problems with printing the URL twice and then the page obviously not being able to find it. Also, the way you have written .ready() is not recommended. You might want to consider adding document inside the parenthesis like this:
$(document).ready(function(){});
.ready() source
I am trying this thing for 2 days, but I can't understand what the bug here. I try to use lightbox plugin in my codeigniter project, but it does not show the expected result, rather it does not show any error too.
This is between where I include my necessary file:
<link href="<?php echo base_url(); ?>assets/css/core.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/manual_change.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/pre_change.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/core.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.lightbox-0.5.js"></script>
I also include the function of lightbox:
$(function() {
$('a.lightbox').lightBox({
'imageLoading': "<?php echo base_url(); ?>assets/img/lightbox-ico-loading.gif",
'imageBtnClose': "<?php echo base_url(); ?>assets/img/lightbox-btn-close.gif",
'imageBtnPrev': "<?php echo base_url(); ?>assets/img/lightbox-btn-prev.gif",
'imageBtnNext': "<?php echo base_url(); ?>assets/img/lightbox-btn-next.gif",
'imageBlank': "<?php echo base_url(); ?>assets/img/lightbox-blank.gif"
}); // Select all links with lightbox class
});
I have used the image in html as like following:
<img src="<?php echo base_url(); ?>assets/img/products/Acer_AX1400.jpg" alt="" />
The .htaccess file is:
RewriteEngine on
RewriteCond $1 !^(index\.php|images|jquery\.js\robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
My file location is correct:
All Images to show are in:
assets/img/products/
All Images additional for lightbox are in:
assets/img/
All Javascript are in:
assets/js/
All CSS are in:
assets/css/
The page link is at first is:
localhost/shop/
The page clicking after on the image is:
localhost/shop/assets/img/products/Acer_AX1400.jpg
You're calling the function before any of the lightbox elements is loaded, so basically none of them get the event listener binded.
To overcome this, either use the $(document).ready() function or just load your current function at the end of your file, after all the lightbox anchors are loaded in DOM.