Halo everyone,
Cause I got a website which have many language and each language will have a subdirectory.
for example
1) sample.com/en
2) sample.com/jp
3) sample.com/zh
And the question is, I want the user stay on their curent page, when they change the language.
for example
sample.com/en/about-us (change to)
sample.com/jp/about-us
I have all the button for each language. Just want to use javascript to make each button will go to their own language with their current URL.
When I am in one language "about us" page, other language button link will turn to something like this.
US button > sample.com/en/about-us(base on current URL.)
Japan button> sample.com/jp/about-us (just change the country code with every other botton)
<input type="button" onclick="location.href=window.location.href.replace('en', 'el');" value="Greek" />
I found something like this, but with no luck.
Thanks everyone!!!!
To clean up the HTML, you can add a data attribute to each button for that button's language.
Then instead of using an inline event handler, you can delegate the event handler to the document itself. Then check for a data attribute for language. Then I'm splitting the current URL by the slash to get the page name. In my example, I'm logging the URL but you will want to location.href the URL instead.
var currentLocation = location.href.split("/");
let _page = (currentLocation.length == 4) ? "" : "/" + currentLocation[currentLocation.length-1];
document.addEventListener("click",function(e){
let btn = e.target;
if(btn.getAttribute("data-lang")){
_url = "/" + btn.getAttribute("data-lang") + _page;
console.log(_url)
//location.href = _url
}
});
<button data-lang="en">En</button>
<button data-lang="es">Es</button>
to redirect to another language, use the following code
<input type="button" onclick="window.location.href = window.location.href.replace('sample.com/en', 'sample.com/jp');" value="Greek" />
Related
I am new to this site, and I know almost nothing about programming, so this question may have a simple answer.
I want to have links in my site that are able to grab a part of the current URL address to complete the href and send me to the desired webpage.
For example, let’s say that the webpage in my site I am viewing is:
https://www.example.com/notes/note-1
And then I have links in the same page like these ones:
https://www.example.com/editor1
https://www.example.com/editor2
Is there a way (java or jquery) that I can grab the last part of the path name (/note-1) to dynamically add it to my html links so the new addresses become?:
https://www.example.com/editor1/note-1
https://www.example.com/editor2/note-1
Now, I don’t need a code that appends “note-1” to the href, but that appends the ending of the current path—whatever it maybe (“/note-2, /note-3, etc.) to the href.
Thanks for your help.
You could implement it like so:
const idx = location.href.lastIndexOf('/');
const lastPart = idx !== -1 ? location.href.slice(idx + 1): "";
document.querySelectorAll('a').forEach(a=>a.href+=lastPart);
In my view I have a checkbox input as follows:
<input type="checkbox" data-toggle="modal" data-target="#CheckItemsModal" id="#item.ItemId" onclick="location.href = '#Url.Action("CheckedItem", "List", new { id = item.ItemId })'; Checked(this.id)" />
I am trying to have a modal confirmation on the checking and un-checking of the checkbox however this means that my URL action would need to be moved to the modal's button while still preserving the id = item.ItemId so my plan is to us javascript to do this however I am not sure how to assign the onclick event of the modal button properly.
This is what I have so far (The error it's throwing is that checkId inside the url action does not exist in the current context):
function Checked(checkId) {
if ($(checkId).Checked == true) {
$(modalButton).setAttribute('onclick','location.href = '#Url.Action("CheckedItem", "List", new { id = checkId })'')
}
}
Any help would be much appreciated.
C# is run on the server and JavaScript in the browser. Your URL.Action is executed on the server where the checkId variable does not exist. You need to generate the url from pure JavaScript in the onclick method or generate links using Url.Action for all checkboxes in advance.
Another option is to use string replace in the JavaScript onclick method. For example:
location.href = '#Url.Action("CheckedItem", "List", new { id = "_REPLACE_ID_" })'.replace( "_REPLACE_ID_", checkId);
Look at the generated HTML source to see what happens.
You also need to be careful about your quotes. In your code you have invalid JavaScript with multiple consecutive single quotes at the end.
There is a function called "dictionary link" in Anki as the manual explains:
Dictionary Links
You can also use field replacement to create dictionary links.
Imagine you’re studying a language and your favourite online dictionary allows you to search for text using a web URL like:
http://example.com/search?q=myword
You could add an automatic link by doing the following in your template:
{{myword}}
check in dictionary
The template above would allow you to search for each note’s expression by clicking on the link while reviewing.
I am now learning HTML + CSS + Javascript from scratch, I'd like to add a similar tool in my own practice website.
I want to copy the text content (the word that I want to check in the dictionary) of an element, add it to the end of the url. When I click the link the corresponding dictionary page will show up.
For example:
<span id="search">entry</span>
copy "entry" and add it to the end of
<a id="dictionary" href="http://example.com/search?q=">link</a>
Since I am a complete beginner, I haven't learned jQuery or other tools yet. Is it possible to do this only by HTML and Javascript?
const search = document.getElementById("search");
const link = document.getElementById("dictionary");
link.href = `http://example.com/search?q=${search.innerText}`;
You have to assing new href property to link by getting innerText of search element
Did you try to use these apex:
<a href=`http://example.com/search?q=${myword}`>check in dictionary</a>
Otherwise you have to build the link by js script and then assign to a element:
let link = 'http://example.com/search?q=' + customParam
// Fetch the tag <a>
let hrefElement = document.getElementById('#idElement');
// Change the href param with your link
hrefElement.href = link;
Try this link and try to work around
function clicks(){
var foo = document.getElementById("dictionary").id
$("a").attr("href", "http://example.com/"+foo+"?q=")
}
document.getElementById("myLink").href = customLink will set your link to your a element
//get input element
var inputElement = document.getElementById('param-input');
// add event to listen every time a letter is introduced
inputElement.addEventListener("keyup", composeUrl);
function composeUrl() {
// get value from input
var param = inputElement.value;
// compose url
var customLink = "http://example.com/search?q=" + param
//set href
document.getElementById("myLink").href = customLink
//get href
var result = document.getElementById("myLink").href;
//print link in a div
document.getElementById("demoLink").innerHTML = result.toString()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="param-input" />
<a id="myLink" />
<div id="demoLink"> url composed </div>
I have created a dyanmic button in Java script with the following code:
var pathname = window.location.pathname;
var html = '<div id="gmSomeID"><form action="https://apples.com/active/index?u='+pathname+'"><input id="tapButton" type="submit" value="TAP" /></form></div>'
That should pass direct someone to the link mentioned above with pathname appended.
When I paste this URL in myself manually this works. However, each time I click this link, the URL is truncated to just:
https://apples.com/active/index?
For reference:
Original URL: https://apples.com/class/1/info
Pathname: /class/1/info
Why would JavaScript / Browser be truncating a link like this?
I thought about this, and had another idea:
Try putting the u parameter as a hidden input instead of action.
var html = '<div id="gmSomeID"><form action="https://apples.com/active/index"><input type="hidden" name="u" value="'+pathname+'"/><input id="tapButton" type="submit" value="TAP" /></form></div>'
I think that GET input values always override the values in the query string of the action parameter.
See also: submitting a GET form with query string params and hidden params disappear
Not sure if this is causing your problem, but every time you construct parameters of a URL, you should URL-encode the values.
So, to be correct, the code should look like this:
var pathname = window.location.pathname;
var html = '<div id="gmSomeID"><form action="https://apples.com/active/index?u='+encodeURIComponent(pathname)+'"><input id="tapButton" type="submit" value="TAP" /></form></div>'
I am trying unsuccessfully to get a handle on the text input into a textarea which is contained inside an xe:dialog. The xe:dialog "pops up" after a button on the XPage is pressed. Here is my code:
<xe:dialog id="InputDialog5">
<xe:this.title>"Input Dialog</xe:this.title>
<xp:panel>
<xp:inputTextarea id="InputTextBox5" value="#{document1.InputTextBox5}"
cols="60" rows="4"></xp:inputTextarea>
</xp:panel>
<xe:dialogButtonBar id="dialogButtonBar15">
<xp:button value="OK" id="button37">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="true">
<xp:this.action><![CDATA[#{javascript:
var request = facesContext.getExternalContext().getRequest();
var header = request.getHeader("Cookie");
var inputVal = #Middle(header,"InputTextBox5=",";")
setJobReferenceStatus(40,inputVal);
var redirect = "window.location='"+applicationScope.get("redirect")+"'";
facesContext.getViewRoot().postScript(redirect);}]]></xp:this.action>
<xp:this.script><![CDATA[
var inputvalue = document.getElementById("InputTextBox5").value;
alert("inputvalue = " + inputvalue);
dojo.cookie("InputTextBox5", inputvalue, { expires: 1 });
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xe:dialogButtonBar>
</xe:dialog>
My idea is to get the value of the textarea, add it to a dojo cookie, retrieve the cookie value using SSJS and then pass the value to an SSJS function. However the code fails already at the stage of getting the textarea value. The line "alert("inputvalue = " + inputvalue);" is not executed and the dialog box remains "frozen". Any idea on how I can resolve this problem?
In order to get a handle on the text field from client side Javascript you have to know the XPages generated client id. So do this instead to calculate the id inside your CSJS:
<xp:this.script><![CDATA[
var inputvalue = document.getElementById("#{id:InputTextBox5}").value;
alert("inputvalue = " + inputvalue);
dojo.cookie("InputTextBox5", inputvalue, { expires: 1 });
]]></xp:this.script>
at a quick look I can already see two major obstacles:
a) document.getElementById(..) probably won't do (in fact I never really tried). I use XSP.getElementById(..) or dojo.byId(..) instead
b) your textarea will never ever have the same id at runtime that it has at design time. Just use your browser's sourcecode viewer, and you will see what I mean. Therefor we have to instructions to calculate the resulting ids for us like this:
dojo.byId("#{id:InputTextBox5}")
this then will be translated into the client object's final id so that your client side script code can find it.
Didn't look at the rest of your code, so I can't tell if there are more potential problems in there