Welcome Guest, Not a member yet? Register   Sign In
templates and javascript
#1

[eluser]gullah[/eluser]
I am using a template system to load a main template then from there loading my content from my views. Right now I'm using jquery as my framework and I have some js in my template and on some pages.

My issue is that I have to load the jquery file in the template main file and the view file (when I have js in the view file) or else I get jquery errors. Is there any way that I can make it so I only have to load it once?
#2

[eluser]OwanH[/eluser]
Hi drewtown,

What kind of jquery errors are you getting? Please post an example of your template code and your page-specific view. As long as your main template loads the jquery framework in the head section of your pages there should be no need to load it again in the page-specific view. Post the code so I can see if I can help point out where you may be going wrong.
#3

[eluser]gullah[/eluser]
EDIT: The code tags seem to remove the script links but they are in there, probably where it says [removed]

This is the template library I'm using.
Code:
class Template {
        function load($template = '', $view = '' , $vars = array(), $return = FALSE)
        {
                $this->CI =& get_instance();
                $vars['template_contents'] = $view;
                if ($template == "mainTemplate")
                        return $this->loadMainTemplate($view, $vars, $return);
                else
                        return $this->CI->load->view($template, $vars, $return);
        }


        function loadMainTemplate($view, $vars = array(), $return = FALSE)
        {
                if( ! isset($vars['head_title']))
                        $vars['head_title'] = "Default Title";

                return $this->CI->load->view("mainTemplate", $vars, $return);
        }
}

This is my main template file without extra junk
if I take this js file out I get the following error
Quote:jQuery is not defined
flash.js()()flash.js (line 1)
[Break on this error] jQuery.noConflict();

which is in the flash.js file

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=iso-8859-1" /&gt;
        &lt;title&gt;&lt;?=$title?&gt;&lt;/title&gt;
        &lt;?=link_tag('style/reset.css')?&gt;
        &lt;?=link_tag('style/style.css')?&gt;
        
        &lt;link href="&lt;?=base_url().$this-&gt;config->item('FAL_assets_front').'/'.$this->config->item('FAL_css');?&gt;/fal_style.css" rel="stylesheet" type="text/css" />
        [removed][removed]
        [removed]config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/flash.js" type="text/javascript">[removed]

    &lt;/head&gt;


    &lt;body&gt;
                      

                        &lt;!--STAR FLASH MESSAGE--&gt;
                        &lt;?php
                        $flash=$this->db_session->flashdata('flashMessage');
                    
                        if (isset($flash) AND $flash!='')
                        {?&gt;
                            
                            <div id="flashMessage" style="display:none;">
                                
                                &lt;?=$flash?&gt;
                            </div>
                        &lt;?php }?&gt;
                        &lt;!--END FLASH--&gt;

This is my view without the junk
if I take this one out I get this error
Quote:jQuery is not defined
[Break on this error] jQuery.noConflict();
flash.js (line 1)
jQuery is not defined
[Break on this error] })(jQuery);
jquery.form.js (line 601)
$ is not defined
[Break on this error] $(document).ready(function(){
(line 103)
Code:
[removed][removed]
[removed][removed]

[removed]

    $(document).ready(function(){

    &lt;?php foreach(array_unique($javascript) as $id) : ?&gt;
        $('#show_&lt;?=$id?&gt;').click(function() {
            if($('#show_&lt;?=$id?&gt;').attr('value')=="Show all comments for this meaning") {
                $('#show_&lt;?=$id?&gt;').attr('value', 'Hide Replies');
            } else {
                $('#show_&lt;?=$id?&gt;').attr('value', 'Show all comments for this meaning');
            }
            $('.&lt;?=$id?&gt;_replies').toggle('slideDown');
        });
    &lt;?php endforeach; ?&gt;
    &lt;?php foreach(array_unique($meaningsIds) as $meaningId) : ?&gt;
        $('.meaning_&lt;?=$meaningId?&gt;').click(function() {
            $('.meaning&lt;?=$meaningId?&gt;').fadeOut('slow', function(){
                $('.meaningEdit_&lt;?=$meaningId?&gt;').fadeIn('slow');
            });

            
        });
        $('.form_&lt;?=$meaningId?&gt;').ajaxForm(function(data) {
          if(data==0) {
              $('.meaningEdit_&lt;?=$meaningId?&gt;').fadeOut('slow', function(){
                  $('.meaning&lt;?=$meaningId?&gt;').fadeIn('slow', function() {
                      $('.meaning_content_body_&lt;?=$meaningId?&gt;').append('<b>Success! You must refresh the page for the changes to take effect</b>');
                  });
              });
          } else if(data==1) {
                $('.meaningEdit_&lt;?=$meaningId?&gt;').fadeOut('slow', function(){
                    $('.meaning&lt;?=$meaningId?&gt;').fadeIn('slow', function() {
                        $('.meaning_content_body_&lt;?=$meaningId?&gt;').append('<b>The edit failed please try again.</b>');
                    });        
              });
            }
          });
    &lt;?php endforeach; ?&gt;    

    
    
    });  

[removed]

It seems that they both need their respective jquery load or they aren't given access to jquery at all.
#4

[eluser]Michael Wales[/eluser]
It doesn't appear as if jQuery is loading at all - check your source (after it's been rendered by your browser) and make sure you are pointing to the .js file correctly.
#5

[eluser]gullah[/eluser]
It loads if i have it in those pages and I'm pointing to the google hosted one so I know it's right.

The problem is I have to call it in both of those pages.

For examples I load it in my main template file. If I don't also load it in my view the code in my view won't work, but the code in my main template will. What I really want is to only have to call the js file 1 time.
#6

[eluser]OwanH[/eluser]
Hey drewtown,

Is your main template being loaded on every page view? If it is, are you importing the jQuery .js file(s) in the HEAD section? Once the main template loads the jQuery .js in the html HEAD section then it really should not need to be loaded in any page-specific view, provided that is that you are in fact loading the main html template on each and every page view.
#7

[eluser]gullah[/eluser]
yes i am loading it in the head of the main template which is being called on every page.
Code:
&lt;html &gt;
    &lt;head&gt;

        <sc/r/ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></sc/r/ipt>
        <sc/ri/pt src="&lt;?=base_url().$this->config->item('FAL_assets_shared').'/'.$this->config->item('FAL_js');?&gt;/flash.js" type="text/javascript"></sc/ri/pt>

    &lt;/head&gt;

I'm stumped.
#8

[eluser]OwanH[/eluser]
I actually had a problem using the Google-hosted jQuery recently in the Expression Engine backend for my company site. Expression Engine now has an extension that lets you add the jQuery javascript library for use in the control panel. By default it set the jQuery URL and jQuery UI URL to the Google-hosted versions. I found that approx. 1 out of every 4 page-loads of the control panel the jquery files weren't loading. I ended up having to use my own copies of jQuery and jQuery UI, which I have in a javascript repository on my dedicated server. Since then the files have loaded on every page-load of the control panel.

Now I don't know if this may be your problem as well but it's just FYI I guess. Aside from this last bit, I really am stumped too Sad. Wish I could help you more.
#9

[eluser]gullah[/eluser]
I'm going to bump this to see if anybody else has any ideas as it is pretty important to me.

Basically the problem is that I call jquery.js (now locally hosted) in my head section of my template file. Then in the loaded files that the template calls I would like to use jquery functions but I have to load jquery again in those files or else it tells me jquery isn't loaded.

So, is there a way that I wouldn't have to load jquery twice (it's a big file!).




Theme © iAndrew 2016 - Forum software by © MyBB