using ajax for change website language

271
June 03, 2017, at 9:34 PM

I Have very simple PHP html code for change my website language and I need to use Ajax to not-reload after select language but honestly I never used ajax before and I don't have any idea how to use that.

I google it and found some code but I fail.

HTML:

 <form action="" method="get">
      <input type="submit" value="per" id="per" name="per">
      <input type="submit" value="eng" id="eng" name="eng">
</form>

PHP :

function lang()
{
    $lang = 'per';
    if (isset($_GET['per']))
        return $lang = 'per';
    else
        return $lang = 'eng';
}

Ajax:

$.ajax({
    type: "GET",
    url: 'index.blade.php',
    data: {name: 'per'},
    success: function(data){
               alert(data);
               window.location.reload();
             }
    });

All Code's are at one page named

index.blade.php

php code working fine just need for ajax to not-reload page when I click buttons

Answer 1

I suggest studying a few tutorials on Ajax, I will try to briefly touch the subject here.

First of all, when doing Ajax, you basically call a web page or script (an actual url, not a function written in PHP). The result that you get (HTML, XML, CSS, JSON, JPG), you can use in your code, insert ii in the DOM, change the document, etc.

In my opinion, changing the language is a site-wide action that should probably be implemented as a normal call. Genearaly, if you change the language, then the whole page should be translated, from the top (title) to the last bit of text down before the closing body.

If you just need to change a small portion of the web page, please see the URL jQuery get

The page uses an example

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

that performs what you want, just change the url. Hope I helped a bit.

Answer 2

Try this:

html:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<form action="" >
    <button type="submit" id="button1">Click
    </button>
</form>
<script type="text/javascript" src="1.js"></script>
<!--<script type="text/javascript" src="2.js"></script>-->
</html>

js:

document.getElementById("button1").addEventListener("click",function(e){
    //alert("hello");
    e.preventDefault();  //a button's default behavior is to submit the form which this function prevents
        $.ajax({
        url:"example.php",
        success:function(result){
            alert(result);
            location.href=location.href; //here you can specify where you want to get your ajax call to redirect to.
        }
    })
    return false;
})

php file:

<?php
echo "Hello world";
?>

Hope this is what you are looking for!

READ ALSO
Angular2 ng2-accordian conflicting components error

Angular2 ng2-accordian conflicting components error

I am using angular2 to nest a sidebar component inside the admin componentThe sidebar menu is to be created with ng2-accordian

511
gitlab.com CI - build a NodeJS app using docker in docker

gitlab.com CI - build a NodeJS app using docker in docker

I'm currently facing a problem with the gitlabcom shared-runners

544
Sequelize one-to-many query (with include) produces Y is not associated to X

Sequelize one-to-many query (with include) produces Y is not associated to X

so i'm having problems with sequelize's one to many relationship, my associations are defined like this:

257
Meteor 1.5, johnny-five, serialport connect wrongly

Meteor 1.5, johnny-five, serialport connect wrongly

I need help with Meteor 15, johnny-five, serialport

390