JQuery function is not called in PHP CodeIgniter - javascript

Iam new in php. I am trying to popup login window on click.but it is not working
This is my header_view
<head>
<script type="text/javascript" language="javascript" src="<?php echo base_url();?>Assets/js/popuplogin.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url();?>Assets/js/jquery.min.js"></script>
</head>
<body>
<div id="rightcorner">
<a href="#" id="loginlink" >Log In</a>
</div>
</body>
I included the below code in home.php(controller)
$this->load->library('javascript');
$this->load->library('javascript/jquery');
$this->load->helper(array('form'));
$data['library_src'] = $this->jquery->script();
$data['script_head'] = $this->jquery->_compile();
below is my popuplogin.js
$(document).ready(function() {
$("#loginlink").click(function(){
$("#logindiv").css("display","block");
});
When I click on loginlink nothing happened.
Pls help me.

Related

Why my DataTable jQuery cant load on my table view?

This is the code for the script,
but it's not working please help me.
<script>
function loading(){
$("#loading").removeAttr("hidden");
}
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
$("#example1").DataTable();
});
</script>
This is the code for the script, but its not working please help me.
<script src="<?php echo base_url()?>public/jquery-1.12.3.min.js"></script>
<script src="<?php echo base_url()?>public/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()?>public/app.min.js"></script>
<!-- DataTables -->
<script src="<?php echo base_url()?>public/datatables/jquery.dataTables.min.js"></sc‌ript>
<script src="<?php echo base_url()?>public/datatables/dataTables.bootstrap.min.js"><‌​/script>
<!-- Select2 -->
<script src="<?php echo base_url()?>public/plugins/select2/select2.full.min.js"></sc‌​ript>
this image is the console error please click here
I Fix it on my Own..
I have a "colspan= 2" in the view table and i have a extra "td" in my code thanks to all your comment.

js bootpag not loading pagination

My bootpag is not loading the pagination.I have spend several hour checking the rest of the code and it works good.The problem is that I'm unable to figure out why does not bootpag load.
Here is my code:
dashboard.php//Users dashboard
<?php
session_start();
......
......
$pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js_user.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("views/apps/get_apps_record.php"); //initial page number to load
$(".paging_link").bootpag({
total: <?php echo $pages; ?>
}).on("page", function(e, num){
e.preventDefault();
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
$("#results").load("views/apps/get_apps_record.php", {'page':num});
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Dashboard</title>
</head>
<body>
//loading the apps.php here
....
<script src="js/jquery-1.12.4.min.js"></script>
....
</body>
</html>
apps.php//the pagination is here
...
<div id="results" class="list-group"></div>
<div class="paging_link"></div>
....
In the #results the output is being loaded but the pagination is not showing up.
Any ideas?
Was missing:
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
face palm!!!
I think you are misspelled.
Please add your css files on head then
Add jquery ,then
Add bootstrap.min.js ,then
Add custom js scripts

unable to make ajax work to send form data

i am unable to see what is wrong with the below code. I simply want to submit a php variable to another php page. please don't say sessions as i know for sure sessions wont work for me here. all i want is to send the session variable to the next php page via ajax and without the user knowing it.
<?php
session_start();
$fname=$_SESSION['mail'];
?>
<!DOCTYPE HTML>
<html>
<title>Addressbook</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"DbManipulate.php",
type:"POST",
data:"source1:"<?php echo $fname ?>""
});
}
</script>
<link rel="stylesheet" type="text/css" href="crudstyle.css" />
</head>
<body>
<div id="hidden_form_container" style="display:none;"></div>
<div id="mhead"><h2>Your Adressbook</h2></div>
<div id="note"> <span> your addressbook is connected to our servers :) </span></div>
<?php
echo $fname;
?>
<table id='demoajax' cellspacing="0">
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Passing data as a object is not correct in your code. Please change as follows and try
data:{source1:"<?php echo $fname ?>"}
There is some syntax error in your data:value part in $.ajax() call
You should use
data: "source1=<? php echo $fname ?>"
or
data:{source1:"<? php echo $fname ?>"}
<?php
session_start();
$fname="surat";
?>
<!DOCTYPE HTML>
<html>
<title>Addressbook</title>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var sessioni='<?php echo $fname ?>';
$.ajax({
url:"DbManipulate.php",
type:"POST",
data:{source1:sessioni}
});
});
</script>
<link rel="stylesheet" type="text/css" href="crudstyle.css" />
</head>
<body>
<div id="hidden_form_container" style="display:none;"></div>
<div id="mhead"><h2>Your Adressbook</h2></div>
<div id="note"> <span> your addressbook is connected to our servers :) </span></div>
<?php
echo $fname;
?>
<table id='demoajax' cellspacing="0">
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

JQuery coding for creating a modal dialog works in jsfiddle but not in a local html file

I am trying to create a modal dialog that appears when hovered using jQuery.
the following codes works perfectly and modal box appears in jsfiddle but it doesn't appear the same way after I migrated it to my local text editor. Could anyone please help me with this? I also included the URL to the jsfiddle version. Thanks.
http://jsfiddle.net/9P64a/
Here are the HTML and CSS parts:
<head>
<!-- <link rel="stylesheet" type= "text/css" href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
#import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.container {
margin: 40px;
}
</style>
</head>
<body>
<div class="container">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
<a id="popoverOption" class="btn" href="#" data-content="Popup with option trigger" rel="popover" data-placement="bottom" data-original-title="Title">Popup with option trigger</a>
</div>
The following is the javascript part:
<script type="text/javascript">
$(document).ready( function() {
$('#popoverData').popover();
$('#popoverOption').popover({ trigger: "hover" });
})
</script>
</body>
</html>
Thank you very much in advance.
Don't you forget about bootstrap scripts? Example:
<script type="text/javascript" src="js/bootstrap.min.js"></script>

How can I include both jQuery UI tabs and LiquidSlider library in my page?

I'm trying to build a website with a dynamic content area which should use the Liquid Slider javascript library to navigate between posts and jQuery UI tabs to switcht between tabs inside each post. The tabs were working fine before, but now that I've included Liquid Slider, the sliding effect works but the tabs won't. There are no errors on the javascript console.
Here's the website (click on "Viaturas" to navigate to the area I'm talking about).
Here's part of my header file:
<head>
(...)
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/scripts/jquery.liquid-slider-custom.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function($) { (...)
/* Slide navigation*/
$('#slider-id').liquidSlider();
/* Tabs navigation*/
$("#tabs").tabs();
And here's a part of the HTML:
<div class="liquid-slider" id="slider-id">
?php $i = 0; if ($pageposts): ?>
<?php global $post; ?>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>
<div>
<div class='vehicle-model-box'>
<span class='car-brand'>".get_post_meta(get_the_ID(),'custom_field_ID_2', true)."</span>
<span class='car-model'>".get_post_meta(get_the_ID(),'custom_field_ID_3', true)."</span>
</div>
<div id='tabs'>
<div class='vehicle-menu-box'>
<ul>
<li class='car-menu-item-first'><a href='#tab-caracteristicas'>CARACTERÍSTICAS</a></li>
<li class='car-menu-item'><a href='#tab-exterior'>EXTERIOR</a></li>
<li class='car-menu-item'><a href='#tab-interior'>INTERIOR</a></li>
<li class='car-menu-item'><a href='#tab-seguranca'>SEGURANÇA</a></li>
<li class='car-menu-item'><a href='#tab-extras'>EXTRAS</a></li>
<li class='car-menu-item'><a href='#tab-fotos'>FOTOS</a></li>
<li class='car-menu-item'><a href='#tab-partilhar'>PARTILHAR</a></li>
<li class='car-menu-item'><a href='#tab-licitar'>LICITAR</a></li>
</ul>
</div>
<div class='vehicle-image-box'>
<div id='tab-caracteristicas'></div>
<div id='tab-exterior'></div>
(... all the other tabs ...)
</div>
</div>
(... other content ...)
</div>
<?php endforeach; ?>
<?php endif; ?>
I think there is something wrong with your function calling order.
First you call: $('#slider-id').liquidSlider();. When you call this, it converts some divs to another elements. Second you call $("#tabs").tabs();. This time, your might not be able to converted ui tab. Maybe you should change order of those two functions.
Edit: Scroll problem.
You are also using jquery localscroll. You used it like $.localScroll({duration:800});. This will convert all your links like your_text to scroll button. To fix this, define a target like;
$('.menu-item').localScroll();
This will only scrollify your links on header.

Categories