I'm using bootstap tabs, and Im trying to load the content via ajax rather than set it in PHP. My code:
<script type="text/javascript">
function test(e){
console.log(e.target);
//load ajax stuff here
}
</script>
<?php
$this->widget('bootstrap.widgets.TbTabs', array(
'type'=>'tabs',
'placement'=>'above', // 'above', 'right', 'below' or 'left'
'tabs'=>array(
array('label'=>'Ogólne', 'content'=>'Czekaj...', 'active'=>true),
array('label'=>'Książka adresów', 'content'=>'Czekaj...'),
array('label'=>'Cośtam', 'content'=>'Czekaj...'),
),
'events'=>array('shown'=>'test')
)); ?>
However I keep getting this error:
Uncaught TypeError: Object test has no method 'apply'. I tried creating an object, but it still didn't work. Any ideas?
A little clarification, JS code created by the framework:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
jQuery('#yw0').tab('show');
jQuery('#yw0').on('shown', 'test');
jQuery('#collapse_0').collapse({'parent':false,'toggle':false});
});
/*]]>*/
</script>
This should work
Javascript:
<script type="text/javascript">
var test = function(e) {
console.log(e.target);
//load ajax stuff here
}
</script>
TbTabs events ( prefixed with 'js:' )
<?php
...
'events'=>array('shown'=>'js:test'),
....
?>
Related
I'm a newbie to php fox. i want to add jquery function to phpfox but no success. please suggest me proper way of adding jquery function to phpfox.
<script type="text/javascript" >
$Behaviour.onLoadEvents = function(){
}
$Behavior.onClickEvents = function() {
};
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
no success with all of these three functions.
and getting an error
SyntaxError: missing { before function body
on console window
I'm using the jquery-datatables-editable plugin at https://code.google.com/p/jquery-datatables-editable/wiki/EditCell#Client-side_configuration with CI.I have:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable().makeEditable({
sUpdateURL: "/js/jquery-databatables-editable/AjaxUpdate_1.php/index"
});
});
</script>
on the client side page. I want to be able to post to a class a CI library class/function on the server side, but the above does not seem to work. Is there a way to do this?
That's depends on the configuration you have.
Mostly common, if you are using the default setup:
In you Javascript file or view (if inline)
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable().makeEditable({
sUpdateURL: "/index.php/your_controller/function_name"
});
});
</script>
In your routes.php
$route["function_name"] = "your_controller/function_name/";
Lastly, you need to create a function in your controller and output the expected format:
function function_name(){
echo json_encode('whatever you need to return');
}
Hope it helps!
Is it possible to change this to display an element loaded later on in the document:
function tracksinfox_{$page_trackid}()
{
document.getElementById('tracksinfoxshow_{$page_trackid}').innerHTML = 'get stuff here';
}
In the place of "get stuff here", I would like to display a div by id, but the div is created later in the page load using PHP.
with jQuery's on(), you can add event handlers to elements which are added later to the document. http://api.jquery.com/on/
you can make the function perform after document ready by document.onreadystatechange:
document.onreadystatechange=function() {
if(document.readyState == 'complete'){
tracksinfox_{$page_trackid}();
}
}
or just use window.onload event simply;
window.onload = tracksinfox_{$page_trackid};
but there's one more thing you have to know, if you like to perform two or more function after document ready, you can do it like this:
run_after_document_ready( tracksinfox_{$page_trackid} );
run_after_document_ready( somethingelse );
run_after_document_ready( somethingelse2 );
function run_after_document_ready( callback ) {
callback_saver = window.onload;
window.onload = function (){
if ( typeof callback_saver == "function" ){
callback_saver();
}
callback();
}
}
or just use the jQuery
$(document).ready(tracksinfox_{$page_trackid});
$(document).ready(somethiselse);
$(document).ready(somethiselse2);
NOTICE: window.onload has a little different with document.ready, for more information, you should to find the documents about window.onload, document.onreadystatechange and the jquery document ready.
How about using jQuery and doing something like the following. It establishes a callback method that will be called when a new element with id="info" is added to the DOM, then it adds a new DIV with id="info", which causes the callback function to be executed. The callback function unregisters itself (thus it will only ever be called once), then sets the update-me DIV's text based on the new DIV.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="update-me">I will be updated.</div>
<script language="javascript">
jQuery(function ($) {
$("body").on("DOMNodeInserted", "#info", function(e){
$("body").off("DOMNodeInserted", "#info");
$("#update-me").text( $(e.target).text() );
});
$("body").append("<div id='info'>I have changed.</div>");
});
</script>
</body>
</html>
With this javascript I'm printing list of records:
<script type="text/javascript">
$(document).ready(function(){
function hide(){
$('#friend_list').fadeIn(100);
$('#friend_list').load("friend_list.php");
};
setInterval( hide,100 );
});
</script>
in friend_list.php I'm getting all the records relevant for user and returning it like this:
echo "<div class='friend' id='friend'>" . $a["username"] . "<input type='hidden' value='$id'/>" . "</div>";
And I'm using this simple script to make overlay:
<script type="text/javascript">
$(document).ready(function(){
function overlayerOn(){
$('#overlayer').fadeIn(800);
}
function overlayerOff(){
$('#overlayer').fadeOut(800);
};
$('#board').click(function(e){e.stopPropagation();});
$('.friend').click(function(e){
e.preventDefault();
overlayerOn();
var $br = $('#board');
$br.css('display', 'block');
});
$('#overlayer').click(function(e){
overlayerOff();});
});
</script>
Overlay is working as long as I trigger it with some other id or class than the one used from friend_list.php. But that is the one I need. Any idea why overlay is not working when triggered by class .friend?
Thank you...
Use (live is deprecated)
$('.friend').live('click', function(e){
// your code
});
If you are using latest version of jquery then use
$('body').on('click', 'div.friend' , function(e){
// your code
});
It's happening because you are loading content dynamically using
$('#friend_list').load("friend_list.php");
so click is not working because those contents were not in the DOM when it was loaded.
I need to load jQuery1.7 as module, I've seen this code of #jrburke:
requirejs.config({
paths: {
'jquery' : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min'
}
});
require(['jquery'], function($) {
//$ points to jQuery
});
It's not very useful for me, because all .js name are generated by server-side, I got them from php-array.
So, I wrote this:
require(['http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'],
function($) {
//$ points to jQuery
});
But $ is null inside this function.
UPDATE:
Here is my php-template that render my js-scripts for this page:
<script src="http://requirejs.org/docs/release/1.0.1/minified/require.js">
</script>
<script>
require([
<?php echo "'". implode("',\n\t'", $this->scripts) . "'\n"; ?>
], function($){
console.warn ($); // null ;(
// loaded jQuery
window.$ = $;
// Load main client script for this page
boot( '<?php echo $this->eprint($this->content_page); ?>' );
});
</script>
and it is my php-array for this page (page index):
$scripts = array(
'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js',
'http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js',
'/js/libs/jquery.history.js?v=1321687090',
'/js/libs/coolclock.js?v=1321629683',
'/js/libs/excanvas.js?v=1321629683',
'/js/client.modules.js?v=1321703735',
'/js/client.all.js?v=1322512192',
'/js/boot.js?v=1322512037',
'/js/client.index.js?v=1321689884'
);
Have your php array of the form:
$jquery = array (
'jQuery' => 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'
);
Then try:
requirejs.config({
paths: <?php echo json_encode($jquery) ?>
});
require(['jquery'], function($) {
//$ points to jQuery
});