JS not working on my module

[seventhemestudio]

Hi,

 

I'm creating a module for prestashop, and almost everything is working, the only thing that is not is JS.

 

I've added the js file using the header hook like the documentation:

public function hookHeader()
{        
    Tools::addJS($this->_path.'js/ctmdtivalidation.js');
    Tools::addCSS($this->_path.'css/ctmdtivalidation.css', 'all');
}

And the file is added to the header, below the jquery, but when i run the code, that needs to send a form data by ajax it's not working, it just reload the page.

 

The code is this:

jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        alert('submit');

        var dados = jQuery( this ).serialize();

        $("#validaform").hide("slow");
        $("#confirmaform").show("slow");

        jQuery.ajax({
            type: "GET",
            url: "processa.php",
            data: dados,
            success: function( data )
            {
                alert( data );
            }
        });
        
        return false;
    });
});

I've tried to just run and alert() when the form is submited, but it still not working.

 

Do you have any ideia of what could be wrong?

 

Thank you very much

[razaro]

Few things to add not sure if it would help. 

 

First you can use $this->context->controller instead  Tools:: which is deprecated.

$this->context->controller->addCSS()
$this->context->controller->addJS()

and about your code try first this change

jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(e){
        e.preventDefault();

Then also check if 

 url: "processa.php",

right url, maybe it should be full path. Check in browsers developers tools, Network tab and see it is called correctly.

[seventhemestudio]

Hi,

 

I'm creating a module for prestashop, and almost everything is working, the only thing that is not is JS.

 

I've added the js file using the header hook like the documentation:

public function hookHeader()
{        
    Tools::addJS($this->_path.'js/ctmdtivalidation.js');
    Tools::addCSS($this->_path.'css/ctmdtivalidation.css', 'all');
}

And the file is added to the header, below the jquery, but when i run the code, that needs to send a form data by ajax it's not working, it just reload the page.

 

The code is this:

jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        alert('submit');

        var dados = jQuery( this ).serialize();

        $("#validaform").hide("slow");
        $("#confirmaform").show("slow");

        jQuery.ajax({
            type: "GET",
            url: "processa.php",
            data: dados,
            success: function( data )
            {
                alert( data );
            }
        });
        
        return false;
    });
});

I've tried to just run and alert() when the form is submited, but it still not working.

 

Do you have any ideia of what could be wrong?

 

Thank you very much

 

Thanks for your answer,

 

It's not working yet, well my module is a phone verification, so i've created a modal window which opens on CreateAccountTop hook, so it locks the create account screen until the user validate his cellphone.

 

Well everything is working fine but when the user click on form submit it just redirects the user to the first step when he should enters his email, the first authentication.php

 

I've created this form

public function hookCreateAccountTop($params)
{
    $this->_html = "            
        <div class='fundo'>
            <div class='modal'>
                <h1>Confirme o seu celular</h1>
                <hr>
                <div id='validaform'>
                    <p class='info-txt'>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
                    <div class='mod-wrapper'>
                        <div class='mod-left'>
                            <form action='authentication.php' method='get' id='formvalidar'>
                                <p class='form-label'><strong>Informe seu Celular</strong></p>
                                <input type='text'class='cellphone' name='celular' required placeholder='(xx) xxxxx-xxxx'>
                                <div class='labels'>
                                    <p class='form-label'><strong>Como você deseja receber o código?</strong></p>
                                    <label class='radio'>
                                      <input type='radio' name='fb' value='small' />
                                      <img src='".$this->_path."images/SMS.jpg'>
                                    </label>
                                    <label class='radio'>
                                      <input type='radio' name='fb' value='small' />
                                      <img src='".$this->_path."images/chamada.jpg'>
                                    </label>
                                </div>
                                <div class='btnsubmit'>
                                    <input type='button' id='validabtn' class='submit-button' value='Validar Celular'>
                                </div>
                            </form>
                        </div>
                        <div class='mod-right'>
                            <img src='".$this->_path."images/mobile-phone.png'>
                        </div>
                    </div>
                </div>
                <div id='confirmaform'>
                    <p><strong>Confirme os dados enviados para o seu celular:</strong></p>
                </div>
                <div class='footer-notes'><br><br>
                    <p>This are the footer notes </p>
                </div>
            </div>
        </div>
    ";
    return $this->_html;
}

The javascript function

$( document ).ready(function() {
    $(document).on('click', '#validabtn', function(e){
        alert('clicked');
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: baseDir + 'module/ctmdtivalidation/valida.php',
            data : {
            //required parameters
                ajax: 1 ,
                cel : '5511995388230'
            },
            dataType: 'json',
            success : function(json){
                // check the page response
                console.log(json);
            };
        });
    });
});

I've created an alert() on the javascript code just to check if the js is working, but it doesn't, i don't know what is happening :/

[razaro]

Try few more things. debug mode is enabled right ?

 

in ajax add also after success callback, error one also 

    error: function (request, status, error) {

        alert(request.responseText);

    }

 

 

And like I mentioned , try to fallow that click and call in Networking tab in dev tools of your browser. Maybe there is error in valida.php.

[seventhemestudio]

Try few more things. debug mode is enabled right ?

 

in ajax add also after success callback, error one also 

    error: function (request, status, error) {

        alert(request.responseText);

    }

 

 

And like I mentioned , try to fallow that click and call in Networking tab in dev tools of your browser. Maybe there is error in valida.php.

 

 

i've tried enable the debug mode, and tried to insert the error function, but it doesn't works, it looks like i've just hit the back button of the firefox.

 

I've zipped my module files and uploaded here if you want to see it working, it was developed for prestashop 1.4 version because this is the version that my client is using, i'm totally newbie on Prestashp, in fact i'm WordPress developer, i just accept this job because this client is a friend of mine.

 

I've read all the documentation and it looks like right, if you wants to see it working.

 

Thank you very much for the help, really

ctmdtivalidation.zip