how to show/hide the single element when coming from different pages? - javascript

I have 2 pages name "A" & "B", both pages have a link which will open the same page "X".
But page "X" will show/hide some components as per from which page its coming.
On page "X", I want to show/hide my buttons on page named "X".
If I come from "Page A" > they should be visible.
And If I come from "Page B" > they should not be visible.
==========================================
I am taking approach for doing this is by passing variable/value in URL on page A and B.
HTML code page A:-
<a data-fancybox-type="iframe" class="various marginLeft10 button" href="/Provision/Summary/MC-IT0401-ATUTEJA?abc">View Summary</a>
HTML code page B:-
<a class="marginLeft50 button" href="/Provision/Summary/MC-IT0401-ATUTEJA?xyz">Confirm & Proceed</a>
Page X Code=
<div class="marginTop50 marginBottom valignBottom" role="button" id="summaryButtons">
<input type="button" class="active" value="Back" id="stepSummaryBack">
<input type="button" class="bigButton marginLeft50" value="Ready for Diagnostic" id="stepSummaryConfirm">
</div>
This Particular Div should show/hide as per navigation from page "A" or "B".
I am not sure now how to confirm the URL along with the variables (?abc and ?xyz) I am passing in the "href" using jquery.
Please suggest.
And let me know if anything is not clear or need more details.

So in the onload event could you just do.
var URL = window.document.URL.toString();
var vars = URL.split("?");
then your variable should be vars[1];

I would suggest handling the show/hide decision while rendering Page X, not with javascript once it has already loaded. You don't need to use query params in your url (?abc and ?xyz). Access the HTTP_REFERER from the Page X request in your controller to see whether the request came from /page_a or /page_b, then use that information while rendering Page X to determine whether or not to include the buttons.

Related

When a link is clicked, I want to show a value/price on the next page

I have this code on page 1. All a tags have the same link. If the user clicks on one link, the next page 2 is loaded. I want to display the price of that id specific to that link to show on page 2.
example: If the user clicks a link with id="saloon_price", the price on page 2 should appear Saloon: £50.
If the user clicks the link with id="mpv_price", the price on page 2 should appear MPV: £70.
Please help me to achieve this on page 2.
I am very new to coding. And using Javascript. Kindly help me with a simpler solution. Thanks
<a id="saloon_price" href="/quotes/details"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details">Estate: £60</a>
<a id="mpv_price" href="/quotes/details">MPV: £70</a>
In the web, we pass values mainly using the URL, and read them again in the loaded page.
<a id="saloon_price" href="/quotes/details?label=Saloon&value=£50"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details?label=Estate&value=£60">Estate: £60</a>
<a id="mpv_price" href="/quotes/details?label=MPV&value=£70">MPV: £70</a>
And read this post for more details:
How to get the value from the GET parameters?
You will propably need to use PHP or other server-side languages. You can do this easily with forms. But you will need to run this on some kind of server.
This will echo (type to document) the value of value attribute on the button...
index.php:
<form action="/quotes/details.php" method="post">
<button type="submit" name="price" value="£50" id="saloon_price"> Saloon: £50 </button>
...other buttons...
</form>
/quotes/details.php:
...
<?php
$price = $_POST["price"];
echo "MPV: " . $price;
?>
...
You can use method="get" and $_GET["price"] if you want to see these values in url.

How to add a new webpage to ASP.NET MVC

Right now I am making a MVC that has a default page that loads up. From this page, the user can press a button to go to the next page. So far, I have made the first page work and a button that goes to a specified URL for the second page. The only issue I am having is making the view that I want to correspond to the second page have the correct URL.
Here is the code for my button link to the next URL
<input type="button" value="Create" onclick="location.href='#Url.Action("IndexA", "HomeController")'" />
I guess my question is how do I make my view have the specified URL that I want so it can be accessed?
I used something like this in my own project.
#if (Request.UrlReferrer != null && Request.UrlReferrer.Host == Request.Url.Host)
{
<a href="#Request.UrlReferrer" class="dbtn btn-11">
<i class="fa fa-undo"></i>
#Resources._Action_Back
</a>
}
only came from within the domain that was published I said let the button appear.
there is something like add controller in default settings controller name + controller. So just write the name there.
I had to put "home" in the URL.Action instead of "HomeController"
Please see this photo.
https://ibb.co/4SS5nYh
You add a new controller and a new view for that new page (also a model). I have called mine Test.
Then in the button. you call them with url action.
<input type="button" value="Create" onclick="location.href='#Url.Action("Index", "Test")'" />

How to update css style from one page to another in JavaScript

I have two pages: index.php and app.php
on first page (index.php) are placed elements for which I want to change css style value like font size. so on first page is located: .options-parameters-inputelement.
on the second page (app.php) is my options panel with inputs where i can input font size value for the desired element. in this case input is textarea #heretype
please see the code:
<div id="one">
<div class="options-parameters-input">
This is testing
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
<tr>
<td>Type font size</td>
<td><textarea id="heretype"></textarea></td>
</tr>
</table>
$("#heretype").on("keyup",both);
function both(){
$(".options-parameters-input").css("fontSize", this.value + "px");
}
jsfiddle example: http://jsfiddle.net/gxTuG/106/
My problem is how to transfer new css style value from one page (app.php) to another (index.php) ? because inputs are located in app.php page while desired elements are in index.php.
I hope you can help me
Thank you
You can achieve two ways:
Server side:
You can stored the value in database(permanent). Then next page you can apply in css.
Client side:
You can stored the value in query parameter, cookie or local storage(temporary). Then next page you can apply in css.
As James Monger said, this isn't directly possible. However you can save the changes via PHP (to session or to database). Then when the user opens index.php a different <style>...</style> will be generated based on the saved setting. The setting can be saved by using a form or an ajax call (more complicated).
You can also write to a cookie directly from JavaScript and read it on another page
You can't update css of one page using javascript code from another page. Although what you could do is have an identifier to be shared between the pages. That could be lets say a url param saying index.php?fontsize=10 and app.php?fontsize=10.
Then you can get the value of the param fontsize in your code on either pages and set it to the desired value and pass it around using javaScript.
You can have a default value for the fontsize at starting of the app or have a check saying if param fontsize exists or not in your javaScript code.
Follow this answer of mine.
Alternatively you can make use of localStorage -> Window.localStorage() or cookies -> Document.cookie().
I would suggest going by either the URL param method or setting a localStorage object fontSize and update it whenever needed if you don't want to go with server side code and push the value of fontsize in db.

Switching between pages on selecting the radio button without redirect or submit

i am a bee on PHP and i want a solution to switch between two pages on when selecting a radio button with out submit the page or redirecting the page ?
Which one is the more appropriate way
javascript or
php ?
Please help me with a suitable example.Thank you.
Trythis:
you can simple call a link , if you don't have a container in that page to load the new page when radio button is pressed .
You have no option that link the radio with page link ,
But , if you want to load the content of that page inside you php page without redirecting ot post then ur ultimate friend is JQuery and Ajax.
You can handle this with Jquery / Javascript in better way:
Try this:
$("#example").change(function(){
window.location="http://www.example.com/";
});
$("#wiki").change(function(){
window.location="http://www.wikipedia.org/";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="example"> Example Side <br/>
<input type="radio" id="wiki"> Wikipedia Side

Jquery load url underground

I have this code
<div class="wrap-box-video" id="31">
<div class="addfav">
</div>
<img src="/etc.jpg" />
</div>
and with this code
$(document).ready(function(){
$("div.addfav").click(function(e){
window.location = "?wpfpaction=add&postid=" + $(this).parents(".wrap-box-video").attr("id");
});
});
i want to load the ?wpfpaction=add&postid=31 (in this exemple) but not to show in the url tab i want this to be underground. if i'm on exemple.com page and i click the addfav div i want the exemple.com to be the same but the script to work.
If you're talking about changing what text appears in the browser tab, you can alter the title element of the HTML rendered at you ?wpfaction endpoint.
If you want to change what the actual URL that appears in the URL bar, see Modify the URL without reloading the page

Categories