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;
}
});
}
Related
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 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 developing GoldenStateLiquidation.com but have developed plenty of bugs in trying to put many projects together to form something beautiful. I put skrollr.js and skrollr.min.js inside js folder, called that in the header
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/skrollr.js"></script>
and my HTML looks like:
<section id="slide-3" class="homeSlide">
<div class="bcg" data-top="background-position: 50% 0px;" data-center="background-position: 50% 100px;" data-anchor-target="#slide-3">
<div class="hsContainer">
<div class="hsContent" data-center="bottom: 200px; opacity: 1" data-top="bottom: 0; opacity: 0" data-anchor-target="#slide-3 h2"></div>
<?php if ( is_home() ) { ?>
<?php if( get_option( 'hathor' )){ ?>
<div class="row">
<div id="slider">
<?php get_template_part( ''.$slides=o f_get_option( 'slider_select', 'nivo'). ''); ?>
<?php }else{ ?>
<?php get_template_part( 'dummy/dummy', 'nivo'); ?>
<?php } ?>
</div>
<?php }?>
</div>
</div>
This is me trying to implement parallax Skrollr with the already-given Hathor theme nivo.slider.
I have many other bugs maybe you can help me out.
You have to implement srkollr.js at the end of your html, just before closing body-tag.
just use following code...
<script src="js/skrollr.js"></script>
<script type="text/javascript">
window.onload = function() {
skrollr.init({
forceHeight: false
});
}
</script>
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.
I wonder whether someone may be able to help please.
I'm a little new to this, so I'm sure to some this will be a basic question but please bear with me.
I'm using the script below to create a image gallery with fancyBox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'centerOnScroll':'true',
helpers : {
title : {
type : 'inside'
}
},
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut': 200,
'overlayShow':false
});
});
</script>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: 100px; margin-right: 100px; margin-bottom: -10px; float: left; position: absolute;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
</form>
</body>
</html>
The problem I'm having is that I cannot create the title inside the image, or indeed anywhere else except on 'hover over' which seems to be the default setting. I've tried all manner of different ways to try and get this to work.
i.e.
$(document).ready(function() {
$("a.fancybox").fancybox({
'centerOnScroll':'true',
'titleShow':'true',
'titlePosition':'inside',
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut': 200,
'overlayShow':false
});
});
and
$(document).ready(function() {
$("fancybox").fancybox({
'centerOnScroll':'true',
'titleShow':'true',
'titlePosition':'inside',
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut': 200,
'overlayShow':false
});
});
I've tried adding and deleting ', deleting spaces, all without success. I just wondered whether someone could perhaps look at this and let me know where I'm going wrong.
Many thanks and regards
In this line:
<a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>
Try setting the title attribute inside the a, not the alt tag inside the img. So it becomes:
<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" /></a><?php endfor; ?>
In case adding a title element to your anchor tag does not work you can force the title in your fancybox settings
$(document).ready(function() {
$("fancybox").fancybox({
'title' : 'yourtitle'
'centerOnScroll' : 'true',
'titleShow' : 'true',
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});