We Keep Coding

How do I append a query parameter to my URL using Javascript?

I am building a web app and I am using Firebase to store my user's data in Cloud Firestore. There is a page on my web app that allows users to view their documents from Cloud Firestore. I would like to add a query parameter to the end of my URL on view.html so I can take that query parameter value and use it to search for a document.
I have been searching online to find possible solutions. So far I have come across a few videos on the topic, but they haven't been going into the depth I have been needing. For example, this video shows how to add and get query parameters from a URL, but it only shows how to log those changes in the console. How would I make that my URL?
I've also be browsing Stackoverflow for solutions. This Stackoverflow post asks a similar question, however, many of the solutions in the answers causes view.html to reload on a loop. Why would this be, and if this is a possible solution, how would I stop this from happening.
How would I go about appending and fetching URL query parameters in Javascript?

You say you want to do this in javascript, so I assume the page itself is building/modifying a link to either place on the page or go to directly via javascript.
In javascript in the browser there is the URL object, which can build and decompose URLs
let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");
In any case, once you have a URL object you can access the parts of it to read and set the values.
Adding a query parameter uses the searchParams attribute of the URL, where you can add parameters with the .append method — and you don't have to worry about managing the ? and & … the method takes care of that for you.
thisPage.searchParams.append('yourKey', 'someValue');
This demonstrates it live on this page, adding search parameters and displaying the URL at each step:
let here = new URL(window.location.href);
console.log(here);
here.searchParams.append('firstKey', 'theValue');
console.log(here);
here.searchParams.append('key2', 'another');
console.log(here);

I have solved this issue in the simplest way. It slipped my mind that I could link to view.html by adding the search parameter to the URL. Here's what I did:
On index.html where I link to view.html, I created the function openViewer();. I added the parameter to the end of URL href.
function openViewer() {
window.location.href = `view.html?id={docId}`;
}
Then on view.html, I got the parameter using URLSearchParameters like so:
const thisPage = new URL(window.location.href);
var id = thisPage.searchParams.get('id');
console.log(id)
The new URL of the page is now "www.mysite.com/view.html?id=mydocid".

You can try to push state as so in the actual view.html
<script>
const thisPage = new URL(window.location.href);
window.history.pushState("id","id",thisPage);
</script>

URI encoding in ODataModel v2

I've created a SAPUI5 table widget and made sure that it works. Now, when clicking on a row, the detail view is loaded, but no data is present. The server exposes an entity Site with a primary key which is of type "string".
The client-side code is as follows (assume that oModel is ODataModel, sSiteCode is a string that may contain Cyrillic characters):
// sSiteCode may contain Cyrillic characters
var oKey = {
SiteCode: sSiteCode
};
var sPath = "/" + oModel.createKey("Sites", oKey);
this.getView().bindElement({path: sPath});
It turns out that, if sSiteCode = 'б' (i.e., contains Cyrillic characters), then a GET request will be sent (via batching) to the following URI:
http://<server>:<port>/odata/Sites('б')
However, the server is unable to parse this URI (and subsequently replies with a 404), as it doesn't know what encoding to use. I patched the method ODataModel.prototype._createRequestUrl as follows:
sNormalizedPath = this._normalizePath(sPath, oContext);
sNormalizedPath = encodeURI(sNormalizedPath); // my addition
Then it seems to work, for this particular case. I'm wondering if this is a bug or a feature, and what should I do next?
FYI, I'm using OpenUI5 1.32.11.

Instead of sending
http://<server>:<port>/odata/Sites('б')
The actual string sending to the server should be
http://<server>:<port>/odata/Sites(%27б%27)
Which is the result of the encodeURI() call. Since UI5 allows you to freely define the Models URL and its parameters you have to take care on the correct URI encoding (and all parameters).
So in my opinion this is not a bug but the down part of the possibility to configure the URI without "black-box" behaviour of UI5.

Servlet calling from window.showModalDialog(...)

I am calling another application context from window.showModalDialog but confused with following work. Same code to pass parameter within showModalDialg.
var myArguments = new Object();
myArguments.param1 = "Hello World :)";
window.showModalDialog("java2sTarget.html", myArguments, '');
and i can read these myArguments(parameters) in generated HTML using following code:
<script>
document.write(window.dialogArguments.param1);//Hello World :)
</script>
I can't use query string & i am sending myArguments(parameter) because i want to hide parameter from Application user.
Now i am calling servlet from showModalDialog(..)
onclick="window.showModelDialog('http://localhost:7778/app/servlet/test',myArguments,'');"
onclick="window.showModelDialog('http://localhost:7778/app/servlet/test',myArguments,'');"
But as per my knowledge
Servlet --> Servlet container --> HTML+JS+CSS
so JS will be available at last phase, but i want to use in first phase(Servlet).
Now, i need to make some Decision in servelt code based on myArguments(parameter).
is there any way to read these myArguments(parameters) in servlet code?

Pass it as a request parameter in the query string.
var queryString = "param1=" + encodeURIComponent("Hello World :)");
onclick="window.showModelDialog('http://localhost:7778/app/servlet/test?' + queryString, myArguments, '');"
No, there's no other alternative. The request URL is not visible in the modal dialog anyway.

As main objective is to hide query string from User to avoid misuse of those parameters.
I tried following work around.
Developers send hidden parameters to get relative information form source(e.g.:DataBase). And we also know that we can send hidden information in Window.showModalDialog using dialogArguments
Work Around:
(i) I got relative information from server one-step before calling Window.showModalDialog using jQuery.getJSON()
(ii) i used google-gson API at servlet side to convert JavaBeans into Json strings.Solution 1 Solution 2
(iii) Convert JSON into javascript object using jQuery.parseJSON
var args = jQuery.parseJSON(json);
window.showModalDialog("pages/"+args.pageName, args, '');
i used args.pageName to make things dynamic
Please suggest improvements in this work-around. Thanks

Convert many GET values to AJAX functionality

I have built a calendar in php. It currently can be controlled by GET values ​​from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values​​? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});

Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.

You can return a JSON string from the server and handle it with Ajax on the client side.

Using jQuery on a string containing HTML

I'm trying to make a field similar to the facebook share box where you can enter a url and it gives you data about the page, title, pictures, etc. I have set up a server side service to get the html from the page as a string and am trying to just get the page title. I tried this:
function getLinkData(link) {
link = '/Home/GetStringFromURL?url=' + link;
$.ajax({
url: link,
success: function (data) {
$('#result').html($(data).find('title').html());
$('#result').fadeIn('slow');
}
});
}
which doesn't work, however the following does:
$(data).appendTo('#result')
var title = $('#result').find('title').html();
$('#result').html(title);
$('#result').fadeIn('slow');
but I don't want to write all the HTML to the page as in some case it redirects and does all sorts of nasty things. Any ideas?
Thanks
Ben

Try using filter rather than find:
$('#result').html($(data).filter('title').html());

To do this with jQuery, .filter is what you need (as lonesomeday pointed out):
$("#result").text($(data).filter("title").text());
However do not insert the HTML of the foreign document into your page. This will leave your site open to XSS attacks.
As has been pointed out, this depends on the browser's innerHTML implementation, so it does not work consistently.
Even better is to do all the relevant HTML processing on the server. Sending only the relevant information to your JS will make the client code vastly simpler and faster. You can whitelist safe/desired tags/attributes without ever worrying about dangerous ish getting sent to your users. Processing the HTML on the server will not slow down your site. Your language already has excellent HTML parsers, why not use them?.

When you place an entire HTML document into a jQuery object, all but the content of the <body> gets stripped away.
If all you need is the content of the <title>, you could try a simple regex:
var title = /<title>([^<]+)<\/title>/.exec(dat)[ 1 ];
alert(title);
Or using .split():
var title = dat.split( '<title>' )[1].split( '</title>' )[0];
alert(title);

The alternative is to look for the title yourself. Fortunately, unlike most parse your own html questions, finding the title is very easy because it doesn;t allow any nested elements. Look in the string for something like <title>(.*)</title> and you should be set.
(yes yes yes I know never use regex on html, but this is an exceptionally simple case)