I am beginner in CI,
i used facebox plugin for loading a page [query result ] in CodeIgniter,
ie select all the datas from a table.
Its working properly,
The problem is i need to display only the data on a specific day,ie from the user input.
My code is:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '<?=base_url();?>facebox/loading.gif',
closeImage : '<?=base_url();?>facebox/closelabel.gif'
})
})
</script>
...........
....
<a href="<?=base_url();?>admission/details" rel="facebox" >view details </a>
if i add a text box to this page how can i pass the value to that controller?
with out changing the facebox properties.
<a id="fb1" href="<?=base_url();?>admission/details" rel="facebox" >view details </a>
<input type="text" onchange="updateFB('#fb1',this.value)">
<script>
function updateFB(el,val){
$(el).attr('href',"<?=base_url();?>admission/details/"+val);
}
</script>
//controller
function admission(){
$date = $this->uri->segment(3);
....
Related
I have a list of items on my page from a DB table
I am trying to change the glyphicon when checked
<div class="div1">
<span id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>
this is the script on the top of my page:
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").load("clicked.php");
});
});
</script>
clicked.php looks like:
<span id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>
The problom is the when I click on one item - all the items change there glyphicons
What am I doing wrong?
You just have to remove & add new class:
$(document).ready(function(){
$(".div1").click(function(){
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
//Here you can add ajax call
});
});
There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.
Also using the right scope, $(this) will stop it effecting all your div1 elements.
<script>
$(document).ready(function(){
$(".div1").click(function(){
//$(".div1").load("clicked.php");
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
});
});
</script>
And to make the code toggle from one to another on each click
<script>
$(document).ready(function(){
$(".div1").click(function(){
if ( $(this).children('span').hasClass('glyphicon-ok') ) {
$(this).children('span').removeClass('glyphicon-ok');
$(this).children('span').addClass('glyphicon-eye-open');
} else {
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
}
});
});
</script>
I made a side menu with these links:
<div id="menu_lat">
Orçamentos
Relatórios
Próximos Eventos
Chat
</div>
When I open one of these, the content is opened in another div (which, in the first page, already has some content, which is an image):
<div id="conteudo">
<img src="img/foto_inicial.jpg">
</div>
How could I load the PHP file inside this layer when I click that link?
Use jQuery and the load() function
Update you links with a class
<div id="menu_lat">
<a class="loader" href="http://localhost:8080/sgf/form_proposta.php">Orçamentos</a>
<a class="loader" href="relatorios.html">Relatórios</a>
<a class="loader" href="proximos.html">Próximos Eventos</a>
<a class="loader" href="chat.html">Chat</a>
</div>
Then in your <script> tags add this to handle the click event on your links with the class loader.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#conteudo').load($(this).attr('href'));
});
});
</script>
DO the Ajax call on the DIV id conteudo
I'm building a website where the admin can make settings for the website. I would like the admin settings page to have a similar "feel" as the rest of the website, which has some nice looking jQuery features.
On the admin site there's a hidden div, which is shown when one of six links has been clicked. I'd like the content of the hidden div to change content before showing itself. I'm not sure how to do this. I could have a div box for every link on the page. But this becomes pretty cumbersome since I'd need to repeat my css and jquery for every link. I imagine that this, somehow, can be done with some javascript/jquery code that determines which link that was click and then decides which php function to call inside the hidden div. Then the php could "echo" out the content of the div, which then could be shown.
How could one do this?
My HTML/jQuery code is as follows:
--- The html links ---
<table id="settings">
<tr>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
----- The Hidden div -----
<div id="dashboard_box">
<div class="dashboard_inside">
<form action="#" method="post">
<p style="font-size:20px; font-weight: bold;">Change color</p>
</br>
<fieldset>
<? load_content1();?>
</fieldset>
</form>
</div>
</div>
---- jquery code (working)----
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
You probably want to use ajax to load the content from the server. Take a look at jquery's .load() method: http://api.jquery.com/load/
You could include a data attribute per link:
<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>
js would look something like this:
$(".action").on('click', function() {
$("#dashboard_box fieldset").load($(this).data('content'), function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
}
return false;
});
Then, in your content.php file you could check the method parameter in the url to determine what content to return.
My php is a little rusty, but something like this:
<?
call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
You can just add data attribute in each of your link's
<a href="#" data-url="content1.php" ..
Then on click of any of the a you can get the php to be called.
$('a').on('click',function(){
var phpFunctionToCall = $(this).data('url');
});
You probably need to make ajax call to load content into your fieldset As this <? load_content1();?> run's on server and javascript have no control over it.
Thanks for all the help. this is what I ended up doing.
--- HTML ---
<a class="action" data-content="content.php?method=load_content2"></a>
---Jquery---
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var phpFunctionToCall = $(this).data('content');
$('#indhold').load(phpFunctionToCall);
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
--- PHP (shortened)---
function load_settings_panel($settingOnRequest) {
return $settingOnRequest;
}
$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
i have some trouble here...
lets say i have a element like this...
bootstrap(document).ready(function() {
bootstrap('#popinquiry').popover({trigger:'hover'});
});
i using noConflict on my source code.. and then i have a element like this..
<a href='#' id='popinquiry' rel='popover' title='Popover Title'>heree</a>
and after i load the page.. the popover was shown, but the trigger i set above doesnt work.. so i must click the "heree" first too show my popover.. but when i write the trigger direct on 'popinquiry'
<a href='#' id='popinquiry' rel='popover' data-trigger='hover' title='Popover Title'>heree</a>
The option worked.. can you help me?? the problem is all off popover options parameter
your javascript:
<script>
$(function ()
{ $('#popinquiry').popover();
});
</script>
your html :
<div class="well">
hover for popover
</div>
try this code; I hope it will solve your problem:
JavaScript:
<script type="text/javascript">
$(function () {
$(".btn").popover({
trigger: 'hover',
placement : 'bottom'
});
});
</script>
HTML:
Popover
Further you can checkout this page for more working examples - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php
I have a function in jquery which displays images on link click and also has to hide the image when the link is clicked again.
This is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.links').click( function(){
var linkclicked = this.id;
var url = $j(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$j('#image-holder'+linkclicked).empty().append(image);
/* The above line shows the image on first click.
Adding slideToggle hides the image again */
};
image.onerror = function () {
$j('#image-holder'+linkclicked).empty()
.html('That image is not available.');
}
$j('#image-holder'+linkclicked).empty().html('Loading...');
return false;
});
});
function loadnow() {
}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>
Please let me know where to write slideToggle as to enable show/hide function properly. There are two links here which show separate images. They are shown when clicked but the problem is to hide them on next click and make them
visible when clicked again and so on.
The way you have your code here is not really quite right for .slideToggle. You should not put the URL for the image in the href attribute of an <a> element because the link will try to go there on click.
The way .slideToggle works is well documented on the docs page. All you have to do is use the HTML <img> tag, which is made to hold images. Then you $().hide(); them when the page loads so they aren't shown. All you have to do them is call the .slideToggle() function on the link click event.
See the working example with some misc pictures in this fiddle: http://jsfiddle.net/8xcZT/5/.
Or here is a working version of your code: http://jsfiddle.net/JMXba/9/. I can see this may be desirable to wait for the click to load the image.
Good Luck!