CodeIgniter Forums
jQuery - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: jQuery (/showthread.php?tid=38659)

jQuery - El Forum - 02-15-2011

[eluser]j4zzyh4ck3r[/eluser]
Do Anyone knows how to use Jquery class in CodeIgniter ?
I tried this
Code:
<?php
    /**
     * @property CI_Loader $load
     * @property CI_Jquery $javascript
     */
    class Javascript extends CI_Controller {
        function __construct() {
            parent::__construct();
            $this->load->library('javascript');
        }

        function index() {
            $this->javascript->hide('div#my_div');
            $this->load->view('javascript');
        }
    }
?>

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;title&gt;Javascript&lt;/title&gt;
        &lt;!--&lt;?= $library_src ?&gt;
        &lt;?= $script_head ?&gt;--&gt;
    &lt;/head&gt;
    &lt;body&gt;
        <div id="my_div"><h1>This is my div !</h1></div>
    &lt;/body&gt;
&lt;/html&gt;

But it didn't hide the div element with id 'my_div'...

jQuery - El Forum - 02-15-2011

[eluser]eokorie[/eluser]
Try adding
Code:
&lt;?= $script_foot ?&gt;--&gt;
to your file and see if it works.

jQuery - El Forum - 02-15-2011

[eluser]j4zzyh4ck3r[/eluser]
[quote author="eokorie" date="1297799350"]Try adding
Code:
&lt;?= $script_foot ?&gt;--&gt;
to your file and see if it works.[/quote]

Sorry I still didn't get it, it said that undefined variable... Can u give me the works complete code for just hiding that div ?

Thanks in advance...

jQuery - El Forum - 02-15-2011

[eluser]eokorie[/eluser]
Hi

Try this:

Code:
&lt;?php if (!defined('BASEPATH')) exit('No direct script access allowed');



class Javascript_test extends CI_Controller
{

    function __construct()
    {
        parent::__construct();
        $this->load->library('javascript');
        $this->load->library('jquery', FALSE);
    }

    function index() {
        $data = array();

        $this->jquery->script('/assets/js/jquery/jquery.js', TRUE);
        $js = $this->javascript->hide('#myDiv');

        $this->javascript->output($js);
        $this->javascript->compile();

        $this->load->view('index',$data);

    }

}

Your html would the look like this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/&gt;
    &lt;title&gt;Javascript Test&lt;/title&gt;
    &lt;?php echo isset($script_head) ? $script_head : ''; ?&gt;
&lt;/head&gt;
&lt;body&gt;
<div id="myDiv">
    This is my div!
</div>
&lt;?php echo isset($library_src) ? $library_src : ''; ?&gt;
&lt;?php echo isset($script_foot) ? $script_foot : ''; ?&gt;
&lt;/body&gt;
&lt;/html&gt;

Hope this helps!

jQuery - El Forum - 02-15-2011

[eluser]j4zzyh4ck3r[/eluser]
[quote author="eokorie" date="1297828488"]Hi

Try this:

Code:
&lt;?php if (!defined('BASEPATH')) exit('No direct script access allowed');



class Javascript_test extends CI_Controller
{

    function __construct()
    {
        parent::__construct();
        $this->load->library('javascript');
        $this->load->library('jquery', FALSE);
    }

    function index() {
        $data = array();

        $this->jquery->script('/assets/js/jquery/jquery.js', TRUE);
        $js = $this->javascript->hide('#myDiv');

        $this->javascript->output($js);
        $this->javascript->compile();

        $this->load->view('index',$data);

    }

}

Your html would the look like this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/&gt;
    &lt;title&gt;Javascript Test&lt;/title&gt;
    &lt;?php echo isset($script_head) ? $script_head : ''; ?&gt;
&lt;/head&gt;
&lt;body&gt;
<div id="myDiv">
    This is my div!
</div>
&lt;?php echo isset($library_src) ? $library_src : ''; ?&gt;
&lt;?php echo isset($script_foot) ? $script_foot : ''; ?&gt;
&lt;/body&gt;
&lt;/html&gt;

Hope this helps![/quote]

That helps a lot, thanks bro,
but why the jQuery code generated two times like this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html &gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;title&gt;Javascript&lt;/title&gt;        
        [removed][removed]
[removed][removed]
[removed]
// &lt;![CDATA[
$(document).ready(function() {

    $("div#my_div").click(function(){
        $("div#my_div").hide(1000);
        return false;
    });
    
    $("div#my_div").click(function(){
        $("div#my_div").hide(1000);
        return false;
    });

});
// ]]>
[removed]
    &lt;/head&gt;
    &lt;body&gt;
        <div id="my_div"><h1>This is my div !</h1></div>        
    &lt;/body&gt;
&lt;/html&gt;


jQuery - El Forum - 02-15-2011

[eluser]eokorie[/eluser]
what does your controller code look like?

jQuery - El Forum - 02-15-2011

[eluser]j4zzyh4ck3r[/eluser]
[quote author="eokorie" date="1297843383"]what does your controller code look like?[/quote]

Sorry I already got that, my fault is I stored it in a variable so it display 2 times, after I remove that, it generated normally, Thanks bro Smile

jQuery - El Forum - 02-15-2011

[eluser]eokorie[/eluser]
no worries!!