Depending on cookie content - javascript

can somebody please give me a hint here. I'm new to dealing with web page cookies, in another view (using MVC) I created a cookie with some basic info. Depending on that info I want to change the web page language. The cookie itself is created with JavaScript. I know how to solve this by creating the cookie in the controller, but I don't know which method is the best. Regards.
<script type="text/javascript">
{
if (document.cookie.indexOf("Russian") >= 0) {
// load partial view here
//#{Html.RenderPartial("~/Views/Home/About_.cshtml");}
}
else if (document.cookie.indexOf("English") >= 0) {
// load partial view here
//#{Html.RenderPartial("~/Views/Home/About_Eng.cshtml");}
}
}
</script>

You don't want to do that in JavaScript. In your controller call Request.Cookies["TheNameOfYourCookie"] then check the collection for the key. You can set it in on your model or set in to the ViewBag. Then when rendering your page check the value there and render the section.

Related

Inject a Javsacript SDK to several selected pages

I have an ASP.NET web application and I want to inject a JavaScript SDK to several selected pages during the page load of one specific page(for example HomePage.aspx).
I was thinking of a method like this to call on Page_Load of HomePage.aspx
injectScript(list of selected pages, script){
for each page in selected pages{
page.embed(script)
}
}
But can we use Page.ClientScript.RegisterStartupScript() to register scripts for other pages while calling it from HomePage.aspx?
Is there any better way?
Update 1:
In nutshell, All these pages share a master page but adding this JavaScript SDK to master page will make the SDK available to all child pages. I want to have a way to toggle(on/off) this SDK in each page based on user input(saved in a database).
There are more than 30 aspx pages and adding a method to page_load in each page is not feasible.
Is there any simple way to do achieve this functionality?
In case if anyone wondering the same, here is the solution I came up; use the following method inside Page_Load of the master page.( You will have to populate the list with appropriate data-source)
private void EnableSDK()
{
List<string> pages = new List<string>(); //selected aspx page names(not class names)
foreach (string page in pages)
{
if (page == System.IO.Path.GetFileNameWithoutExtension(Page.AppRelativeVirtualPath))
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "somekey", "somescript", true);
}
}
}

Show an alert when image changes on website

I have a GitHub pages site with an image on it. I am trying to have the webpage show an alert whenever I push a change to the website.
My approach so far has been to implement an auto-refresh function:
setTimeout(function(){ location.reload(); }, 60000);
This will auto-update every minute, catching all of the changes that I make. However, I need to show an alert whenever the content of the page changes. It is important to keep in mind that the content will not change upon every refresh -- maybe only every 10 minutes (when I push changes).
I think the way to do this would be to store the name of the image and then look to see if the image name changes at every refresh -- and if the name did change, then show the alert. I have been reading about something called LocalStorage, but I'm not sure how to approach storing the name of a file -- I'm sort of new to JS/HTML.
Is using LocalStorage the best approach to this problem? What are other alternatives/simple ways to implement this on a GitHub page?
Thanks in advance.
If I clearly understand what you need to implement, I'd suggest you to read about MutationObserver in JavaScript. This class tracks all the changes, that are made to binded element. Here's the code and working demo:
<html>
<body>
<p>
Some content
</p>
</body>
<script>
// select the target node
var element = document.getElementsByTagName('p')[0];
// create an observer instance
var observer = new MutationObserver(function(mutations) {
alert("Some changes were made");
});
// configuration of the observer:
var config = { childList: true}; // ,subtree: true, characterData: true
// pass in the target node, as well as the observer options
observer.observe(element, config);
setInterval(function () { // here you can make your changes programatically
element.innerHTML += "New content";
}, 2000)
</script>
</html>
You can also use cookies, i.e. store in a cookie the last "version" of whatever - where "version" can be a string, a number etc.
This has the advantage that it also gets sent to the server, so you may generate the alert layout/code directly on the server.
Check https://github.com/js-cookie/js-cookie for a script simplifying this.
Another alternative is to implement on the server a script that responds whether the content changed. Something like http://foo.bar/changed?lastVer=XXXX which can return a JSON like {changed:true,message:'We have changed the change'}. You would retrieve this via ie. jQuery.getJSON() or vanilla XMLHttpRequest, and if it's the case show the message to the user and then reload the page. But this would require making a runnable server script somewhere.
A third option would be to load the page into, say, a hidden IFRAME, check if the image or content changed and if so transplant only the image - or a certain piece of content - to the main page without refreshing it. Or maybe refresh it. The idea is to load the page in an IFRAME and detect there if something has changed.

load a view in a div with jquery

I'm trying this (Using Jquery in Codeignitor app to update div every 10 seconds), it is working but it shows my whole view in my div
I work with hooks and I have a masterview where I load other views in it...
When I load my controller in to my div, it shows my masterview in my div with the view I request in my controller.
How can I just show the requested view without my masterview? Can you help me?
thnx Cheers
A quick solution that I've used in CI is to implement a check in the controller to see whether this is an AJAX request. If so, I load the view with data into a variable and return it to the browser as a chunk of html.
if($this->input->is_ajax_request())
{
$view_result = $this->load->view('child_view_for_div', $data,true);
echo($view_result);
}
else
{
//Return view with master template
}

How to write a Google Content Experiment that disables a stylesheet?

I am currently trying to setup a Client Side Experiment without Redirects as opposed to the default Content Experiment A/B testing. All I want to do is for half my visitors disable one of two existing stylesheets on a page.
To me it doesn't make sense to do this the default A/B way because then I would have to setup a second page with the stylesheet disabled for every page on my site.
There is also Running a Server-side Experiment but to me that is too heavy handed for something I think should be somewhat simple.
I have the js all setup, I just need to be able to tell the page that when there is a given variation disable the stylesheet or don't render the stylesheet before the DOM loads.
One thing I considered is, given a certain variation, redirect to the same page but append a url query parameter like &stylesheet_disabled=true then I would simply not render the stylesheet on the server side but when I briefly looked at that I ran into a redirect loop but perhaps someone has a better way to write the js.
Any help greatly appreciated.
You could do something like this:
<head>
...
<script>
if (cxApi.chooseVariation() != 1) { // not in the experiment
document.write('<link href="... />'); // add the stylesheet
}
</script>
...
Only use document.write while the page is still being loaded.
This is all client-side, so no need for redirects and extra server work.
Here is how I did it:
<head>
<script src="//www.google-analytics.com/cx/api.js?experiment=EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the visitor.
var chosenVariation = cxApi.chooseVariation();
function redirectVariation($variation) {
var url = window.location.href;
if ($variation === 1) {
var queryString = document.location.search;
if (queryString.indexOf("stylesheet_disabled=true") == -1) {
if (Boolean(queryString)) {
url += "&stylesheet_disabled=true";
} else {
url += "?stylesheet_disabled=true";
}
window.location.href = url;
}
}
}
redirectVariation(chosenVariation);
</script>
This is only setup for one different variation but could easily be modified for more. Then you just have your application on the server side detect the presence of the querystring parameter and execute whatever logic you like, in my case not displaying a stylesheet.
Theoretically this could be used to do any kind of server side logic with GA Content Experiment Client Side Redirects. Hopefully this helps someone else.

Using Bookmarks with jQuery Address

I am using jQuery's Address plugin (website) to enable the back/forward buttons on my website. I would REALLY like to also have the ability for people to bookmark pages and to copy the address from the address bar and share it with friends.
Address claims it can do this, so then what am I doing wrong.
My code is
function BackButton() {
$.address.change(function(event) {
// do something depending on the event.value property, e.g.
// $('#content').load(event.value + '.xml');
});
$('a').click(function() {
$.address.value($(this).attr('href').replace(/^#/, ''));
});
}
BackButton() is then called on every AJAX pageload to ensure it works with the pages loaded by ajax.
Thanks for your help
looks like you copied directly from the example at the plugin's website. your address.change function does nothing, there are only two commented lines in there.
So I used
if ( $.address.value() !== "\/" ) {
window.location = "http://www.domainname.com/" + $.address.value()
}
to redirect the user to the correct page.
So is this correct? Or are their problems with it?
What would be the benefits of using the $.address.init function of jQuery.Address?
Also this forces them to wait until the page (&javascript) is loaded to see any content. comments?

Categories

Resources