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

[Yumeru]

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.

 

 

[Vinum]

Hi,

Yes there is solutions but all depends how you want to load your scripts with a module or directly in the code ?

[vekia]

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

[Yumeru]

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.

[Vinum]

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.

[vekia]

but this hook is only for back office

[Vinum]

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

[vekia]

sorry but your post will not solve problem here, 

we want to force load js files before other, 

 

with hooks addjs() you can't do that.

[Vinum]

No, he want to load is javascript after jquery. So my reply is correct.

[Ron morales]

and force js to head in ps 1.6.06? , update its a problem but my template

Edited August 5, 2014 by Ron morales (see edit history)

[Azelab]

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');
        }
    }

[batranom]

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?

[schmithz]

@Vekia

Is it possible to copy an external div and paste inside the Dashboard?

 

Example:

Url1 = http://my-site.com/my-external-file.htm

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>

[Knowband Plugins]

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.

[Nishanthan93]

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