transfer jQuery script to external file

Question

I wrote script directly in html file, it adds some pagination feature, and it works just fine until it's in HTML file, but I just cant get how to transfer this script to external js file and make it run from there. So heres html part :

<form id="moredisplay" method="get" style="display:inline;">
            <input class="hiddeninteger" type="hidden" name="loadmore" value="">
            <!--LIMIT CHANGER-->
            <input type="checkbox" title="" id="limitcheck" name="limit" value="<?php echo $vsego;?>" style="display:none;">
            <input type="checkbox" title="" id="skipforfcheck" name="skip_items" value="" style="display:none;">
            <input type="checkbox" title="" id="skipbackcheck" name="skip_items" value="" style="display:none;">
            <button type="submit" title="back" value="" id="rerurn_more_items"/>back</button>
            <button type="submit" title="next" value="" id="skip_more_items"/>fowards</button>
            <button type="submit" title="more content" value="<?php echo $vsego;?>" id="limit" name="limit" onclick=""/>more content</button>
            <script>
                var currentval = jQuery('.scippeditems').attr('value');
                jQuery('#skip_items,#rerurn_items').attr('value',currentval);
                var valuenumber = jQuery('#skip_items').val();
                if (valuenumber == 0){
                jQuery('#rerurn_items').attr('disabled', 'disabled').css({'opacity':'0.6'});
                }
                var itemsshow = jQuery('#limit').val();
                var pagescount = (jQuery('#skip_items').attr('value'))/(jQuery('#limit').attr('value'));
                if(pagescount >=5){jQuery('#skip_items, #limit').attr('disabled', 'disabled').css({'opacity':'0.6'});}//COUNT PAGES AND LOCK NEXT
                function changepageforf(){
                var elem = document.getElementById("skip_items");
                var currentval = elem.value;
                elem.value = parseInt(currentval) + 24;}//parseInt(itemsshow);}
                function changepageback(){
                var elem = document.getElementById("rerurn_items");
                var currentval = elem.value;
                elem.value = parseInt(currentval) - 24;}//parseInt(itemsshow);}
                </script>
                <script>
                jQuery(document).ready(function(){
                jQuery('#limit').click(changelimit);//RUN FUNCTION ON LIMIT CHANGE
                if ( document.location.href.indexOf('&limit') > -1 ) {//IF URL CONTAINS LINES LIMIT
                jQuery('#rerurn_items, #skip_items').hide()//HIDE PAGINATION
                jQuery('#rerurn_more_items, #skip_more_items').show()//SHOW LIMIT PAGINATION
                var checkval = jQuery('#limitcheck').attr('value');
                var currentvalskip = jQuery('.scippeditems').attr('value');
                jQuery('#skipforfcheck').attr('value', (parseInt(checkval)+parseInt(currentvalskip)));//NEXT BTN VALUE
                var currentforfaction = jQuery('#skipforfcheck').attr('value')
                jQuery('#skipbackcheck').attr('value',Math.ceil( ( (parseInt(currentforfaction)-parseInt(checkval) ) - parseInt(checkval) ) ) );//PREV BTN VALUE
                var pagescount = (jQuery('#skipforfcheck').attr('value'))/(jQuery('#limitcheck').attr('value'));
                if(pagescount >=5){jQuery('#skip_more_items, #limit').attr('disabled', 'disabled').css({'opacity':'0.6'});}//COUNT PAGES AND LOCK NEXT
                if( jQuery('#skipbackcheck').attr('value') <= 0 ){ jQuery('#skipbackcheck').attr('value', 0 );}//RETURN 0 AS A VALUE IF NEGATIVE
                jQuery('#skip_more_items').click(function(){//SUBMIT NEXT BTN
                    jQuery('#limitcheck').attr('checked', true);
                    jQuery('#skipforfcheck').attr('checked', true);
                    jQuery('#moredisplay').submit()
                });
                jQuery('#rerurn_more_items').click(function(){//SUBMIT PREV BTN
                    jQuery('#limitcheck').attr('checked', true);
                    jQuery('#skipbackcheck').attr('checked', true);
                    jQuery('#moredisplay').submit()
                });
                }
                function changelimit(){//LIMIT INCREASE STEP
                var elem = document.getElementById("limit");
                var currentval = elem.value;
                elem.value = parseInt(currentval) + 6;}//HOW MUCH
                var valuenumber = jQuery('#skip_items').val();
                if (valuenumber == 0){//HIDE PREV BTN IF NO PREV
                jQuery('#rerurn_more_items').attr('disabled', 'disabled').css({'opacity':'0.6'});
                }
                });
            </script>
    </form>

What i did try: copied script and put in in the pagination.js file and called a script on the top of the page like this

$document =& JFactory::getDocument();
$document->addScript("jquery/pagination.js");

but that doesnt work...Im new to jQuery so please dont bash me if im just stupid:L)

Talha Akbar · Accepted Answer · 2013-03-03 13:12:12Z

1

You need to wrap your code in:

$(document).ready( function() {
    // your code here 
});

answered Mar 3, 2013 at 13:12

Talha Akbar

10.1k7 gold badges42 silver badges62 bronze badges

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

1 Comment

Andrew Sekaev Over a year ago

I'v tryed this, and no luck:(

Dave · Accepted Answer · 2013-03-03 13:17:11Z

0

As Aspiring Aqib pointed out, you need to start your JQuery script with either

$(document).ready( function() {
    // your code here 
});

or

$(function() {
    // your code here 
});

This is basically saying, ' wait until the DOM has been fully created before executing the script inside that function.

answered Mar 3, 2013 at 13:17

Dave

3,0144 gold badges39 silver badges55 bronze badges

2 Comments

Andrew Sekaev Over a year ago

I'v tryed this, and no luck:( and i also tryes to swich Jquery with $ and no luck too...

Andrew Sekaev Over a year ago

Ok, i found my mistake, there was <script> tag in my script that i missed, but half of the script is still not working, it seems like it having problems reading values from elements...

lcn · Accepted Answer · 2013-04-13 19:24:15Z

0

Both Aspiring Aqib and Dave were right about wrapping your jQuery code in the $(function(){//code goes here}); block.

Yet one more common mistake is not loading jQuery library file and your own .js files in the correct order, which might be tricky to find out as there is no warning anywhere in your editor or browser. The jQuery library must precede all your own .js files.

answered Apr 13, 2013 at 19:24

lcn

2,31926 silver badges41 bronze badges

Collectives™ on Stack Overflow

transfer jQuery script to external file

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related