Develop Reference

How to modify image.OnClick in share layout.cshtml from another view in ASP.NET MVC?

I have declare an image in _Layout.cshtml inside the Shared folder.
<img src="~Content/icons/btnBack.png onclick="ImageClick"/>
I would like to navigate to different page base on the javascript function trigger from different view. For example, when I clicked the btnBack.png in history.cshtml, I want it to redirect to home.cshtml. When I clicked the btnBack.png in historyDetails.cshtml, I want it to redirect to history.cshtml. How can I achieve that? Should I put the javascript function in just _Layout.cshtml or every view page?

If you want to do a browser back action, You could use https://www.w3schools.com/jsref/met_his_back.asp
<img src="~Content/icons/btnBack.png" onclick="window.history.back();" />
But I suggest that you put specific links to those back buttons and not control the redirect via js. You could simply use the html link tag;
<!-- Specify the Action and Controller name in Url.Action function -->
<a style="text-decoration:none;" href="#Url.Action("Index","ControllerName")">
<img src="~Content/icons/btnBack.png" />
</a>
Another option is to use window.location.href and window.location.replace; https://www.w3schools.com/howto/howto_js_redirect_webpage.asp
<img src="~Content/icons/btnBack.png" onclick="goSomewhere();" />
<script>
function goSomewhere(){
window.location.href = "http://www.google.com";
// window.location.replace("http://www.google.com");
}
</script>

How to make both href and jquery click event work

I have a reporting function answerCardInnerLinkReportingCall which gets invoked on click on <a> tag inside a specific div. I use event.preventDefault(); to override the default click behavior.
Currently I am redirecting the user to the target url in the reporting function after sending all the reporting parameters using window.open('http://stackoverflow.com/', '_blank'); method.
jQuery(document).on('click','#answerCard a', function(event) {
event.preventDefault();
answerCardInnerLinkReportingCall(this);
});
If I use onclick function in the tag I would have returned true and it would make href work without me redirecting the user manually but is it possible to do the same in click handler? I can't use onclick since I dont have control over the html data.
I wanted to check if there is a better way of implementing this?
Edit1: Adding sample HTML
<div class="answer" style="display: block;">
<div class="well">
<div id="answerCard" answercardid="check_phone_acard">
<h3 id="answerTitle">check your phone</h3>
<div><ol class="answerSteps"><li>Go to <a title="Link opens in a new window" href="https://test.com" target="_blank">Check phone</a>. If prompted, log in.</li></ol></div>
<label id="seeMoreAnswer">Displaying 1 of 1 steps. </label></div>
<!-- Utility Section -->
<div class="util">
<span class="pull-left"><a id="viewFull" href="/test.jsp?sid=52345">View full article ?</a></span>
<span class="pull-right">
</div>
</div>
</div>
</div>

I guess you dont need to use any 'event.preventDefault();' if you want to use links native functionality after the script executed.
try like this
jQuery(document).on('click','#answerCard a', function(event) {
//event.preventDefault();
alert('script running');
answerCardInnerLinkReportingCall(this);
});
also created JS Fiddle. check it out.

You can use javascript's:
window.location.href = 'http://url.here.com';
To tell the browser to navigate to a page. Hope it helps.
Other way can be of returning true or false from answerCardInnerLinkReportingCall and depending on that call or dont call event.PreventDefault();

Try something like this:
$('#answerCard a').click(function(event) {
var loc = $(this).attr('href');
event.preventDefault();
answerCardInnerLinkReportingCall(loc, this);
});
function answerCardInnerLinkReportingCall(loc, that){
// your code to do stuff here
window.open(loc, '_blank');
}
See this demo fiddle

data-content not working when clicked

There is a javascript and jquery for which I need your help:
$(document).ready(function ()
{
$( '.website' ).popover(
{
'trigger' : 'click',
'placement' : 'right'
});
});
HTML:
<a href="javascript:void(0)" data-content="www.google.com" class="website" >
Google Website
</a>
When I click on the "Google Website", it displays "www.google.com". But what I want is, when I click on "www.google.com", this URL show open in a new tab also.
What if there is 2 different website like "google.com"; and "yahoo.com"; in the same data-content, so that when clicked on anyone, it should redirect to respective page
How do I do it?

I've made some changes in the code, to keep more than on one link in a data-content, you can try it:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
<a href="javascript:void(0)" data-content='http://www.google.com,http://www.yahoo.com' class="website" >
Websites
</a>
And change your javascript like this:-
$('.website').click(function(e){
e.preventDefault();
var dataContents = $(e.target).attr('data-content').split(",");
for(var i=0; i<dataContents.length;i++){
window.open(dataContents[i], '_blank');
}
})
And if popup is blocked in your browser, you've to unblock that.
I'm trying to open the second window also in a tab rather than in a new window.

Try this:-
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank')
})
Also make some change in the html:-
<a href="javascript:void(0)" data-content="http://www.google.com" class="website" >
Google Website
</a>
You can also add another data-content in the html, and then also it'll work fine.
<a href="javascript:void(0)" data-content="www.yahoo.com" class="website" >
Yahoo Website
</a>

Fix your data-content attribute to include http://, otherwise it will open relative to the current url:
<a href data-content="http://www.google.com" class="website">
Google Website
</a>
and keep user Indra's code:
$('.website').click(function(e){
e.preventDefault();
window.open($(e.target).attr('data-content'), '_blank');
});
JSFiddle Example
http://jsfiddle.net/BM7Tc/

why window.open() opens in the same window?

I write following code`
Holiday
<script>
a.popup.click(function(event)
{
event.preventDefault();
window.open($(this).attr('href'));
});
</script>
It'll open b.html in a new window, but opens in the same, why?
I include JQuery like this`
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
Which is the latest version? Can it be a reason?

a.popup.click will throw an error because a is not defined.
You are trying to use the jQuery click method, so you need to create a jQuery object that references the element you are trying to select.
jQuery("a.popup").click(your_function)

You can achieve opening in a different tab functionality in your case by simply specifying target="_blank" for your anchor tag as
<a href="b.html" target="_blank" class="popup" >
Holiday
</a>

You please try using the following code, it works, and you can choose your title and set different parameters that are suitable for you:
$(document).ready(function(event) {
$('a.popup').on('click', function(event) {
var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
event.preventDefault();
window.open($(this).attr('href'), "Title", params);
});
});

Just change this part
<a href="b.html" target="_blank" class="popup" >
jsFiddle

Display href link into div

I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.

I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo

In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)

$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});

We can use an iframe to display the link in the <a> tag.
Here's a fiddle

Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});