Pass a URL variable to Javascript function using ASP.NET? - javascript

Basically, I'm trying to get ASP.NET to grab a variable out of the URL and use it to start a javascript function.
The user is viewing an online catalog (built with turn.js, a plugin for jquery), and when a page is clicked, it goes to a webpage with all the products from that catalog page on it. There's a link there back to catalog, but when you go back the catalog starts back at page 1. If I have the link include the page number in the URL (i.e. website.com/catalog.aspx?page=4) when you go back, I believe I can grab that out of the URL and use it to have the catalog turn to that page when it loads.
I usually stick to PHP, so I'm a bit lost here. I just need to write a little code snippet that will grab the page number and fire a javascript function using the number. Is this possible?
EDIT: Code:
Here's what I've got in javascript:
function changePage (pagenumber) {
$("#flipbook").turn("page", pagenumber);
}
The page itself is run by NetworkSolutions, so I can't give you any of the actual code from the webpage. What I came up with so far from looking around the web is this (I hope I'm not doing this completely wrong):
<script runat="server">
void Page_Load (object sender, EventArgs e) {
var pagenumber = Response.QueryString['page'];
}
</script>
I'm not sure if I'm getting the variable correctly, or even what to do with it after that to fire the javascript function. Thanks for any help given!

If I understand well your question, you want to grab the page number in the querystring using javascript, if that's correct, would this help?
How can I get query string values in JavaScript?

Im using this plugin
Example:
To get the document params:
var value = $(document).getUrlParam("paramName");
To get the params of a html-attribut (uses src attribute)
var value = $('#imgLink').getUrlParam("paramName");
it works for me. Thanks the author.

you can use server tags as below
function changePage (pagenumber) {
$("#flipbook").turn("page", <%= Request.QueryString['page'] %>);
}

Related

How to capture / check all URL's with double slashes (//) and correct them (JQuery?)

At the moment we've got a big problem (temporarily)!
In our shop we're using a 3rd party solution for promoting and searching for products.
We have around 3600 products which got harvested in the wrong way - the base-url had an extra forward slash (www.sceneryworkshop.nl//) so now all products are called the wrong way and end-up in nomansland. We started a new data-sync, but it takes a lot of time to get in sync.
So I'm looking for a temporarily solution, even if it's dirty!
I don't have access to .htaccess or other server components. The shop runs on a closed-source platform (Lightspeed HQ) which is based on TWIG.
Anyone who knows how to change or redirect to the correct url? Javascript maybe?
The sources are located and called from a lot of places, so the only solution would be a global function that checks and corrects the url's.
I really hope someone has an answer for me :-)
Hi i have a solution assuming that jquery is loaded after the dom is rendered
$(document).ready(function() {
$('a').each(function() {
$split = $(this).attr('href').split('com//');
$(this).attr('href', $split[0] + 'com/' + $split[1]);
console.log($(this).attr('href'));
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jquery
Java
J
Note:
If you like to test the link in the snipped; hold ctrl and click on the link.
Update
Ok. i have read your comment and try some stuff in the inspector from your website. The following solution works!
$('body a[href^="https://www.google.com//"]').each(function() {
$x = $(this).attr('href').replace('com//', 'com/');
$(this).attr('href', $x)
console.log($x);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jquery
Java
J
What i do here is simple, first i search every a element witch contains the following url: https://www.sceneryworkshop.nl//. then replace them with the correct url.

Get a substring from url jquery

I am working a one-page website that uses Jquery and ajax. Because it is a one page website, its url is always something like mydomain.com/#contact. Now I have successfully made an ajax call and want to refresh the page and scroll to a particular section of the page with a different id say, mydomain.com/#home. In order to do this, I will have to get the current url using document.URL (let's say it returns mydomain.com/#contact), then I remove /#contact and replace it with /#home.
I know I can replace /#contact with /#home by simply concatenating it with + but I don't know the Jquery function (if any) to remove the /#contact.
Thanks so much for any help
Simply set the hash, you don't need to evaluate the existing URL:
window.location.hash = "Home";

obtain url paramethers from a page called with JQuery's load() function

I have seen this question before but I haven't found a working solution.
The question is quite easy.
If I call a page like this.
div.load('page?foo=bar');
I want to be able to retrieve foo in some way an use it in a javascript called by page. But I only manage to obtain the paramethers of the parents url.
I know I can declare variables in the parents javascript code but that is not my preffered way.
So I really hope someone has a solution to this problem.
♥ you guys
You could use something like this to parse the URI:
http://blog.stevenlevithan.com/archives/parseuri
Then you can access the parameters easily from the parent page:
// Set the link that we want to load/examine
var link = 'page?foo=bar';
// Load the link content (as per your code)
div.load(link);
// Grab whatever variables we want from the link
var uri = parseUri(link);
var foo = uri.queryKey.hasOwnProperty('foo') ? uri.queryKey.foo : false;
alert(foo);
EDIT:
As bfavaretto already commented, the content loaded in via AJAX is just a string. It's not a page that will be aware of its URI.
However, if you really want the loaded content to be able to access its URI, just make it available in the content itself. For example:
$('#my_div').load('page?foo=bar)
And in the content of "page?foo=bar":
<div class="container" data-page-uri="{{ insert uri here with php, ruby, whatever }}">
<!-- my page content -->
</div>
Now in your loaded content, you can determine the URI by finding the relevant div with the "data-page-uri" data attribute. Once you have the link, you said that you know how to grab the parameters from it...
Hope that helps.
I think you have two solutions. One, if page has a hidden div, with the data needed, the second one, probably the ajax response object has the caller url. You should study the response xhr object.

How do I send a string from code behind to a variable in javascript, on page load?

I want to send a string I built using the StringBuilder to the HTML page, which then I want to use in my JavaScript code.
Right now here's what I am doing:
On the client side:
<div id="data">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
In my JS block:
var data = $("#data").html();
In the code behind:
Literal1.Text = strXml.ToString();
The thing is, this data can be seen by going through the source of the data div, which I dont want to allow.
I want this string as soon as the page loads, so I guess making an AJAX call after the page has loaded to the server is out of the way.
Any smoother way ?
It's a .NET rookie here.. :)
you can save your string in an HiddenField then read its value using javascript something like this
<asp:HiddenField runat="server" ID="MyHidden">
in code behind
MyHidden.Value = strXml.ToString();
javascript
var data = $('#<%=MyHidden.ClientID%>').val();
or you can define strXml as protected variable and use it inside .aspx like that
public class _MyPage:Page
{
Protected String strXml;
private void Page_Load(Object sender,EventArgs e)
{
StringBuilder mystrBuilder = new StringBuilder();
//append some text to mystrBuilder
strXml = mystrBuilder.ToString();
}
}
javascript code will like this
var data = '<%=strXml%>';
Your approach looks fine to me, the alternative is to use a hidden input:
<input type="hidden" runat="server" id="data" />
In code behind:
this.data.Value = strXml;
In JavaScript:
var data = $("#data").val();
Like the div however you will be able to see the value submitted in the source for the page, however if I understand your requirement correctly this is unavoidable by the very requirement of being able to access this data in JavaScript - the best you can obfuscate this data, however someone sufficiently determined enough will be able to inspect and see this data whatever method you choose.
If the data is not sensitive then go ahead and place it in a hidden field on the form and don't worry about it. If the data is sensitive and the user isn't meant to see it then you should probably refactor your page so that the processing is done on the server and only the parts that are meant to be visible are ever present in the browser.
There are some other ways of putting the content in the page, like hidden fields and data islands, but they are all still as visible in the page source.
You could obfuscate the data to make it harder to read, but it's still easy to pause the script where it uses the data after unscrambling it, and the data is still visible.
So, if you want the data available immediately when the page loads, it needs to be included in the page, and it will be possible for the user to see it.

Data processing in HTML without server code (using just Javascript)

I was just wondering whether there is some way to do this:
I have a form in a web page, after the user submits the form, the page is redirected to another static HTML page.
Is there any way to manipulate the data in the second HTML page without the help of any server code?
I mean can I display the form data that the user submitted in the second page?
Of course there should be a navigation, not some Ajax code to load the second page (using which it would be easy to manipulate the data).
You can use a <form> with GET method to go to another static HTML page with some query parameters and then grab those parameters with JavaScript:
First page:
<form method="GET" action="page2.html">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit"/>
</form>
Second page:
<script type="text/javascript">
function getParams() {
function decode(s) {
return decodeURIComponent(s).split(/\+/).join(" ");
}
var params = {};
document.location.search.replace(
/\??(?:([^=]+)=([^&]*)&?)/g,
function () {
params[decode(arguments[1])] = decode(arguments[2]);
});
return params;
}
var params = getParams();
alert("value1=" + params.value1);
alert("value2=" + params.value2);
// or massage the DOM with these values
</script>
You can access the pages GET parameters from JavaScript (window.location.search, which you still need to parse), and use this to pass some veriables to the static page.
(I suppose there is no way to get to POST content.)
You can also read and set the values of cookies from JavaScript.
If you are within a frameset where a "parent" page always sticks around you could potentially also store information in there (also cross-frame-scripting is tricky and I would try to avoid that).
If you have the first page submit the form with a GET action you'll get a URL that looks like:
http://tempuri.org/Page2.html?param1=value1&param2=value2
You could then use JavaScript on Page2.html that reads the query string parameters and displays them on the page.
If you send the form that through GET, yes, you can grab that info from js.
There is a jQuery plugin that does that, but if you want, you can roll your own, its not so complicated.
Just get the location.href and splits it using "?"
then, split again using "&"
Now, for each value, split with "=". Then you'll have a array with the name of the query, and the value of it.
edit: google for javascript get querystring to find dozens of implementations.

Categories

Resources