0

I have a custom javascript and jQuery code.

I am new to magento and need to know how to add those jquery and JS snippet into my magento so that it identifies those.

Im trying to show tooltip on page load and hide after sometime using the below JS fiddle link:

http://jsfiddle.net/Lvzuz/17/

The fiddle uses the following files:

1) jquery 2) bootstrap.js 3) bootstrap.css

Accordingly i have updated my magento files as:

In app\design\frontend\rau\default\template\page\html\pager.phtml

<?php if($followupbuttonshow){?>
    <div class="thiscategory">
        <a class="followlink" href="javascript:void" rel="tooltip" data-original-title="Place your stuff here"> <?php echo $this->__('Follow'); ?></a>  
    </div>
<?php } ?>

UPDATED:

In app\design\frontend\rau\default\layout\local.xml

<reference name="head">
      <action method="addJs"><js>jquery/jquery.js</js></action>
      <action method="addJs"><js>jquery/jquery.noconflict.js</js></action>
      <action method="addLinkRel"><rel>text/javascript</rel><href>https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js</href></action>
      <action method="addLinkRel"><rel>text/css</rel><href>https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css</href></action>
   </reference>
...

in app\design\frontend\rau\default\layout\page.xml

<default translate="label" module="page">
   <action method="addJs"><script>js/custom.js</script></action>

In rauqa\skin\frontend\rau\default\js\custom.js

jQuery(document).ready(function () {
    console.log('tooltipp js....');
    $j('.thiscategory .followlink').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
    $j(this).tooltip('enable');
    });

setTimeout(function() {
$j('.thiscategory .followlink').tooltip().eq(0).tooltip('hide').tooltip('enable');
}, 5000);

});

Error in console:

tooltipp js....

tooltip.js?q=29032018:3 Uncaught TypeError: $j(...).tooltip is not a function

at HTMLDocument. (tooltip.js?q=29032018:3)

at j (jquery.min.js?q=29032018:2)

at Object.fireWith [as resolveWith] (jquery.min.js?q=29032018:2)

at Function.ready (jquery.min.js?q=29032018:2)

at HTMLDocument.J (jquery.min.js?q=29032018:2)

To Verify if the js are loaded below is the screenshot:

custom.js file loaded

enter image description here

jquery loaded- not sure if this is the actual jquery file

This is the only jquery loaded enter image description here

cdn for bootstrap.js and css loaded

enter image description here

Link to jquery :

enter image description here

Problem:

Not sure if i have included all the files correctly in the correct manner (html, xml)

Please point out where the issue is.. And the way i have to include the scripts for magento to identify.

Improve this question
1
  • ... and what exactly is the problem? Apart from the fact that Magento uses Prototype rather than jQuery (depending on version). Commented May 2, 2018 at 12:10

2 Answers 2

Reset to default
1

You will just need to put the pasted script into the phtml file and it should work. If jquery is not linked to the page, then link it. Also, pay attention to the naming of the jquery variable. In many cases its name is $, but you use it as jQuery in your script.

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

Have updated the question @Lajos, have removed the 'jQuery' and just used $..i get the error Uncaught TypeError: $(...).ready is not a function
You often use jQuery in Magneto as Prototype also uses $ ... Magento's compatibility kit assigns $j to jQuery IIRC.
@stack200s please show how did you link jquery into your page.
@stack200s I cannot see in your question the exact way you have loaded jquery. You will need something like <script type="text/javascript" src="yourpathtojquery"></script> and I think this is missing from your code.
@stack200s you will need to either have a copy of jquery, possibly in the folder of rauqa/skin/frontend/rau/default/js, or link it from an online source, like code.jquery.com/jquery-3.3.1.min.js. Either way, you will need to have a script tag like your script tags shown in the image of your question.
|
1

I believe your JavaScript file is missing closing: );

Edit for new error: $ is Prototype in Magento, but you're using jQuery in the code. If you have jQuery added, use the alias that was assigned to it (such as $j). Or:

jQuery(document).ready(function(){
    console.log('tooltipp....');
    jQuery('.thiscategory .followlink').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
        jQuery(this).tooltip('enable');
    });

    setTimeout(function() {
        jQuery('.thiscategory .followlink').tooltip().eq(0).tooltip('hide').tooltip('enable');
    }, 5000);
});
Improve this answer

8 Comments

Please check my updated question, even after replacing the jQuery with alias like $j, i still get the same error
If you view the code of the page as it renders in browser, is tooltip.js present? And if so, does it actually load (not 404)?
Which tooltip.js library is this? If it's the Bootstrap one, you'll also need Bootstrap JS.
That example uses Bootstrap, and its Tooltip. There's no tooltip.js, just jQuery and Bootstrap. View frame source on the jsfiddle shows it. view-source:fiddle.jshell.net/apougher/Lvzuz/show/
In the last fiddle, JS and CSS were added with "http://" which results in them not being loaded, as fiddle uses "https://".
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.