Develop Reference

jquery.js and bootstrap.js conflict

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>

Ajax Not Working in page in Codeigniter

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?

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;
}
});
}

CKEditor with Simple Image Browser plugin

I'm trying to use CKEditor with the Simple Image Browser plugin on wampserver, but I'm sorry, I really do not understand what to put in this line:
CKEDITOR.config.simpleImageBrowserURL
In the video he putted a php file, what to put in this file ?
(video: https://www.youtube.com/watch?v=WB5Y8XNQlgE)
I'd like to show the pictures that are in a variable directory 'images/$id/'
Thanks for your help. 
Page of the plugin:
http://ckeditor.com/addon/simple-image-browser

For simpleImageBrowserURL you need to provide a URL (e.g. a php script) which delivers the content as JSON.
You can start with a URL to a static .txt file with a content like this:
[{"url": "/images/1234/image1.png"},{"url": "/images/1234/image2.png"}]
Or a very simple php script:
<?php
header('Content-Type: application/json');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>
UPDATE
With the above php script the simple image browser plugin does not load the images. This is caused by the jQuery $.get function the plugin uses. While jQuery already parses the JSON and passes objects to the function the plugin tries to parse the objects (here the images variable):
$.get(CKEDITOR.config.simpleImageBrowserURL, function(images) {
var json;
console.log(images);
json = $.parseJSON(images); // this will not work if the images parameter contains objects
It may be that this worked that way with older versions of jQuery...
So to make this work the php script has to deliver a text/plain mime type:
<?php
header('Content-Type: text/plain');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>

<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/ckeditor/plugins/simple-image-browser/plugin.js"></script>
<link href="styles/knacss.css" rel="stylesheet" type="text/css" />
<link href="styles/ui.css" rel="stylesheet" type="text/css" />
<link href="styles/fonts.css" rel="stylesheet" type="text/css" />
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
CKEDITOR.config.extraPlugins = 'simple-image-browser';
CKEDITOR.config.simpleImageBrowserURL = 'images-liste.php';
CKEDITOR.replace('details');
});
</script>
</head>
<body>
<p><label for="description">Descripção:</label></p>
<p><textarea class="ckeditor" name="description" id="description"></textarea></p>
</body>
</html>
images-liste.php:
<?php header('Content-Type: application/json');
echo '[';
echo '{"url": "http://andrewprokos.com/wp-content/uploads/22346-brasilia-cathedral-night-2.jpg"},';
echo '{"url": "https://upload.wikimedia.org/wikipedia/commons/6/6c/Brazil.Brasilia.01.jpg"}';
echo ']';
?>
Errors:
ckeditor.js:327 Uncaught TypeError: Cannot read property 'getEditor' of undefined
ckeditor.js:610 Uncaught TypeError: Cannot read property 'title' of undefined

JQuery form validation does not work for me

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