Jump to content

Force jQuery to load as the first js file before any other js files?


Yumeru
 Share

Recommended Posts

Hi, I am working on a website for somebody using prestashop, unfortunately, prestashop do not provide an option for me to load my scripts (i.e. HTML script tags) AFTER the loading of the jQuery file. This requested in my script not working properly as the jQuery object was not initialized before my script.

 

Is there a workaround for this that does not involve putting scripts tag in smarty template files as I would like prestashop to serve my scripts via its cache system.

 

 

Share this post


Link to post
Share on other sites

why not to use  $(document).ready() function for all your scripts ?

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

in my opinion this is how it should be coded :)

Share this post


Link to post
Share on other sites

Thanks. I found my own solution.

 

Calling addjquery() before my addJS() calls ensures that the jQuery library will be loaded before my other js files. I was worried that jQuery will be loaded twice (2 external <script> tags) but looks like only one instance of the jquery script ref will be output to the html.

 

@vekia: That solution will not work because I am also loading other libraries that has to have jQuery loaded before or they will simply crash.

Share this post


Link to post
Share on other sites

Hi,
Normally in a module to load your js and css after jquery it is necessary to call the hookActionAdminControllerSetMedia.

public function hookActionAdminControllerSetMedia($params)
{
 
     if ( $this->context->controller instanceof AdmiMyController ) 
    {
      
          $this->context->controller->addCSS($this->_path.'css/my.css');
       
         $this->context->controller->addJS(array(
                $this->_path.'js/my.js'
         	
			));
    }
 
}

Like that jquery is not loaded two times.

  • Like 1

Share this post


Link to post
Share on other sites

In front office you can load the js and css in the controller you want  like that:

	public function hookHeader()
	{
		if (Configuration::get('PS_CATALOG_MODE'))
			return;

		$this->context->controller->addCSS(($this->_path).'my.css', 'all');
		if ((int)(Configuration::get('PS_BLOCK_CART_AJAX')))
			$this->context->controller->addJS(($this->_path).'my.js');
	}

In that case, I use the header but you can use hookDisplayTop or others front office hook.
A list of all hooks is here :

http://doc.prestashop.com/display/PS15/Hooks+in+PrestaShop+1.5

Share this post


Link to post
Share on other sites

  • 5 months later...
  • 1 year later...

If you use in your file.js jQuery before function addJs() $this->context->controller->addJquery();

 

e.g.

    public function hookBackOfficeHeader()
    {
        if (Tools::getValue('module_name') == $this->name) {
            $this->context->controller->addJquery();
            $this->context->controller->addJS($this->_path . 'views/js/back.js');
        }
    }
  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

  • 1 year later...

hi

I am trying to use datetimepicker in a field in front office, bit when i click on the field i get only datepicker without time sliders, I think this maybe related to same issue of adding jquery at the top, any one can help please?

Share this post


Link to post
Share on other sites

  • 3 weeks later...

@Vekia

Is it possible to copy an external div and paste inside the Dashboard?
 
Example:
Page content = <div class = "url1Content">my content to be copied</ div>
 
Result on my Dashboard:
<Div id="MyDash">
    <div class = "url1Content">My content to be copied</ div>
</ div>
 
or
 
<Div id="MyDash">My content to be copied</ div>

Share this post


Link to post
Share on other sites

In prestashop, to load jQuery file, we use addJquery() function.

 

In order to load jQuery file before any other file you might want to call this function before loading any other js file.

 

For example-:

 

Let say you are including all your js files in setMedia() function then

 

public function setMedia()




{


$this->addJquery(); // This line must be added before the line shown below


$this->addJS('path_to_your_js_file/filename.js');


}


 

And if you are including js files at other places then also you can do the same. Make sure to add jQuery file before any of your js file adding code is called.

Share this post


Link to post
Share on other sites

  • 3 years later...
On 3/1/2014 at 2:08 PM, Vinum said:

Hi,
Normally in a module to load your js and css after jquery it is necessary to call the hookActionAdminControllerSetMedia.

public function hookActionAdminControllerSetMedia($params)
{
 
     if ( $this->context->controller instanceof AdmiMyController ) 
    {
      
          $this->context->controller->addCSS($this->_path.'css/my.css');
       
         $this->context->controller->addJS(array(
                $this->_path.'js/my.js'
         	
			));
    }
 
}

Like that jquery is not loaded two times.

My problem was i using backofficerheader hook . this added my js before the jquery.js file . This hook working correctly . Thanks lot

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More