Javascript + Ajax not returning as expected

Asked

Viewed 150 times

3

I am trying to send the data of this page to the server, but Js does not return the variable Message...

Link

I know little about JS and would like to know somehow call the variable as soon as the server receives the data.

javascript ajax json

  • Hello Tonielto, include as much code as possible and relevant to your question, only so we can help you.

  • Strip the button function and tag form at the event <form onsubmit="EnviarNewsLetter();return false;">. If it doesn’t work, do as Gerep said, add the code where the problem is so we can better identify.

  • Kadu, it only returns the message via the browser console, in case I would like the message to be transmitted via a pop-up or the bottom of the JS to work. The code is in the link, it is hosted on the server.

  • Take a look at this question/answer: http://answall.com/q/6626/129 However you can explain here if you want to send the name and mail also via AJAX or if you want to do the form Submit?

  • What I want is to send the "Name" and "e-mail" to the database, in the code of the link this happens as you can see, but it does not return any message "Thanks for registering"... (Message that is declared in var Message="..."

  • Dude, do you have access to the site URL on . aspx ? Your button is with submit. Exchange for button, if it does not automatically redirect your site to itself and you will not see the return of the function. Now... what has this URL in . aspx ? I tried here, but you wouldn’t let me in...

Show 1 more comment

2 answers

1


Enable server-side CORS... (http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api)

If you add an error in your ajax, you will notice that it falls there.

$.ajax({
    type: "GET",
    url:  strUrl,
    crossDomain: true,
    dataType: 'jsonp',
    beforeSend: function (xhr) {
       xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    },
    success: function(data)
    {
        if (data == "Realizado com sucesso.")
        {
            var Mensagem = "Obrigado por se cadastrar na BILLABONG!";

            $("#divNewsLetterContainer").html("");
            $("#divNewsLetterContainer").append("<span class='spnMensagemNewletter'>" + Mensagem + "</span>");
        }
        else
        {
            alert(data);
        }
    },
    error: function(data) {
        alert('Ocorreu um erro, olhe o console');
        console.log(data);
    }
});

Add an action to your form:

   <form action="javascript:void(0);" id="divNewsLetterContainer" class="newsletter" onsubmit="EnviarNewsLetter();">
        <input type="text" class="fitext" name="nome" id="nome" size="20" value="" placeholder="name" required="">
        <input type="email" name="email" id="email" size="20" value="" placeholder="[email protected]" required="">
        <input type="submit" id="btw-ok" value="assinar" class="btw-ok">
   </form>

  • I don’t have access to enable Cors on the server. I noticed that the error happens, in this specific case, access is limited when the subject is server. So I am sending only the data to the database and would like to display a screen in kind of pop-up for the user.

  • So I advise you to use a server-side language (Asp.net, java, php) to do this. In this case your javascript will call a function in the domain itself, avoiding cross Omain and the language makes the request to the external server.

0

It seems to me that your problem lies in the variables:

var strNome = $("#nome").attr("value");
var strEmail = $("#email").attr("value");

Exchange for:

var strNome = $("#nome").val();
var strEmail = $("#email").val();

The way it is, they are being sent "empty", and so does not return anything in Ajax.

Also change your form, adding a onsubmit, in this way:

<form id="divNewsLetterContainer" class="newsletter" onsubmit="return EnviarNewsLetter()">
     <input type="text" class="fitext" name="nome" id="nome" size="20" value="" placeholder="name" required/>
     <input type="email" name="email" id="email" size="20" value="" placeholder="[email protected]" required/>
     <input type="submit" id="btw-ok" value="assinar" class="btw-ok">
</form>

And in the script, add return false; after Ajax (this prevents the page from being reloaded):

$.ajax({
...
});
return false;

Something else... where there’s :

if (data == "Realizado com sucesso."){
...
}

Maybe you should use:

if (data.indexOf("Realizado com sucesso.") != -1){
...
}

Unless the return of the variable data is a string EXACTLY equal to "Successfully executed." (without HTML tags etc).

Browser other questions tagged javascript ajax json

You are not signed in. Login or sign up in order to post.