This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 3 years, 3 months ago.

Jquery bottom load issue


  • nmaniac
    Participant

    Posts: 5
    Member Reply #548

    Hello everybody,

    On a form I have the following code:

    demo
    <script>
    $('#demobtn').click(function(){
    alert('hello');
    return false;
    });
    </script>

    All I want to do is to run a script when a button is clicked. The code above is not working. I have noticed that if I move the jquery load line from the bottom of the file to the top, then the code is working properly.

    But I want to keep the jquery.min.js file to the bottom of the page. Can you suggest something to this?

    Thanks,

    Nikos.

    • This topic was modified 3 years, 3 months ago by  nmaniac. Reason: Code not showing properly
    • This topic was modified 3 years, 3 months ago by  nmaniac. Reason: Uploaded a pic with the code
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4498
    Support Staff Reply #554

    Hi :),

    You should put your code under jquery document ready:

    $(document).ready(function(){
    	    $('#demobtn').click(function(){
    	        alert('hello');
    	    	return false;
    	    });	
    });

    Also please make sure that your page does not have any js error that can break your code. To debug your page you can use Chrom’s dev tools(CTRL+SHIFT+J).

    Thanks.

    • This reply was modified 3 years, 3 months ago by Sean Sean.
    • This reply was modified 3 years, 3 months ago by Sean Sean.
    • This reply was modified 3 years, 3 months ago by Sean Sean.
    • This reply was modified 3 years, 3 months ago by Sean Sean.
    • This reply was modified 3 years, 3 months ago by Sean Sean.

    nmaniac
    Participant

    Posts: 5
    Member Reply #573

    Thanks for the reply,

    I put my code under the ready function but still nothing. On the chrome console I can see that there is the error “Uncaught ReferenceError: $ is not defined” at the line that I call the .ready and the .click functions.

    I know that this is a problem of the order that .js files are included, but it’s the default order of the template. I send you a pic from the bottom of the page.

    And again, if I move the jquery.min.js from the bottom to the head of the page, then there is no problem and the code is executed fine.

    Thanks again.

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4498
    Support Staff Reply #588

    Hi,

    I suspect that your JS files are not being loaded properly. So you will need to check the JS files paths in the HTML output and make sure that full path is correct. To check this please launch the browser console(CTRL+SHIFT+J) and go to the HTML source code and check the JS files paths.

    If you need any further assistance please provide me in a private reply(below the reply form check “private reply”) a test link to your developing site.

    Thanks.

Tagged: 

You must be logged in to reply to this topic.