I am building a site using Umbraco and I have a div that currently has a link inside it. The current code is:
<div class="callout col-sm-4 leftCtaLink">
<p>#CurrentPage.leftDescription</p>
<a class="primary-bg" href="#CurrentPage.leftCtaLink"><img class="svg-inject" src="#Umbraco.Media(CurrentPage.leftIcon).umbracoFile" alt="Icon" />#CurrentPage.leftCtaText</a>
</div>
This works and only the bottom half of the callout links to the correct page. The client wants the whole div to be linkable now though, so I thought I'd do this with jQuery. Here is that:
<script type="text/javascript">
$(document).ready(function () {
$(".leftCtaLink").click( function() {
window.location=$(this).find("a").attr("#CurrentPage.leftCtaLink");
return false;
});
});
</script>
The issue is, that when the div is clicked on, it takes me to the website's url with /undefined at the end of it. Can anyone tell me what I need to change in the JS to have it use the correct URL that was input in the CMS?
Change to attr("href").
$(document).ready(function () {
$(".leftCtaLink").click( function() {
window.location=$(this).find("a").attr("href");
return false;
});
});
Related
I am having anchor tag referring to a url i.e
<a taget='_blank' href='http://localhost:4850/en/abc.xml'>
I just want on runtime after clicking on this hyperlink the website will go to
http://localhost:4850/abc.xml
instead of
http://localhost:4850/en/abc.xml
i.e the "en" from the url is removed.
I am having a .Net Application
Assume that your anchor tag with id is like
<a taget='_blank' id="url" href='http://localhost:4850/en/abc.xml'>
Using javascript, on clicking your anchor tag
$('#url').click(function(e){
e.preventDefault();
window.location.href = 'http://localhost:4850/abc.xml';
});
It will redirect you to respected url.
Try this:-
Your anchor tag is like this:-
<a taget='_blank' href='http://localhost:4850/en/abc.xml' id="anc1">Test</a>
Use this script
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a[ID$='anc1']").click(function () {
var url = $(this).attr("href");
var newurl = url.replace("/en", "");
$(this).attr("href", newurl);
});
});
</script>
I have a screen that uses jQuery tabs and was wondering if somehow I can keep the selected tab after a refresh of the page (JS .reload();)?
Any guidance appreciated.
https://github.com/carhartl/jquery-cookie
or
http://code.google.com/p/cookies/downloads/detail?name=jquery.cookies.2.2.0.js.zip&can=2&q=
Example for jquery.cookies.2.2.0.js
$(document).ready(function () {
var initialTabIndex = 0;
var jCookies = jQuery.cookies;
//alert('getting ' + jCookies.get("currentTab"));
if(jCookies.get("currentTab") != null){
initialTabIndex = jCookies.get("currentTab");
}
$('#tabs').tabs({
activate : function(e, ui) {
//alert('setting ' + ui.newTab.index());
jCookies.set("currentTab", ui.newTab.index().toString());
},
active : initialTabIndex
});
});
While the previous answer using cookies will certainly work, it is probably not the ideal solution given peoples aversions to accepting cookies. (it also means you would need to show a disclaimer on your site stating you use cookies, at least to EU visitors). I'd recommend avoiding using cookies where possible so your site remains functional if cookies are disabled/rejected.
A better way is to use the "hash" on the end of a URL.
Modify your tab links as follows:
<div id="UITabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="Tab1"></div>
<div id="Tab2"></div>
<div id="Tab3"></div>
</div>
Then in your head, add the following javascript to ensure the hash is set when changing tabs, and get the hash on pageload and display the required tab:
$(document).ready(function () {
$(function () {
$("#UITabs").tabs();
$("#UITabs").bind("tabsshow", function (event, ui) {
location.hash = ui.newTab.find('a.ui-tabs-anchor').attr('href');
});
$(window).bind('hashchange', function (e) {
$("#UITabs").tabs("select", location.hash);
});
});
});
I want to open a new tab in the same browser when the 'Terms and Conditions' link is clicked which should return the URL: http://localH:30321/OrchardLocal/TermsAndConditions
So Far I have:
<p>Accept the <span class="big-red">Terms and Conditions</span></p>
<script>
function newwin() {
window.open("~/TermsAndConditions");
}
</script>
This actually opens 2 new tabs in the same browser.
http://localH:30321/OrchardLocal/Users/Account/~/TermsAndConditions
which throws a page cannot be found for obvious reasons
ad then the second tab shows the home page:
http://localH:30321/OrchardLocal/
Tried removing the href and one of the ~/...cant seem to get it...any help guys?
thanks
First of all sorry for the wrong answer:
As you want to open the url in new tab of same browser Which is not possible.It all depends on the browser settings.
http://forums.asp.net/t/1902352.aspx
Open a URL in a new tab (and not a new window) using JavaScript
IF browser setting are default(tested for FF)
this will work Open new tab in same browser window
function openinnewTab() {
var win = window.open("~/TermsAndConditions", '_blank');
win.focus();
}
try this
function newwin(e) {
e.preventDefault();
window.open("/TermsAndConditions", '_blank');
}
by the way you cant use directly "~" in javascript..if you want to use server code like this
function newwin(e) {
e.preventDefault();
window.open('<%= ResolveUrl("~/TermsAndConditions") %>', '_blank');
}
EDIT
<p>Accept the <span class="big-red">Terms and Conditions</span></p>
JS
function newwin(e) {
window.open('<%= ResolveUrl("~/TermsAndConditions") %>', '_blank');
}
or
function newwin(e) {
window.open("/TermsAndConditions", '_blank');
}
OR pure asp.net code
<p>Accept the <a runat="server" href="~/TermsAndConditions" target="_blank" > <span class="big-red">Terms and Conditions</span></a></p>
you have to add runat="server" attribute
<a href='JavaScript:newwin('<%=ResolveClientUrl("~/OrchardLocal/TermsAndConditions")%>');' >
and
<script>
function newwin(url) {
window.open(url,'_blank');
}
</script>
One tab is for your href and the other for your onclick. sajad-lfc gave the rigth answer.
Try the following piece of code
<p>Accept the <span class="big-red">Terms and Conditions</span></p>
<script>
$("span.big-red").on("click", function () {
window.open('www.yourdomain.com', '_blank');
});
</script>
This is working perfectly hopefully works for you.
.aspx
-----------------------
<head>
<script type="text/javascript">
>> $(document).ready(function () {
$(".cssBtns").click(function () {
// call aspx.cs method generateInfo(this.id,this.className)
});
});
</script>
</head>
<body>
</body>
.aspx.cs
-----------------------
public void generateInfo(int btnId, string className){
print:// css button id:---
css button class:----
}
how can i call generateInfo method which is aspx.cs page by using java script/JQuery. and which is the best way.
You can use $.ajax(), $.post(), $.get() or $.getJSON() for doing this.
$(".cssBtns").click(function () {
$.ajax({
url : 'aspx function path here'
});
});
See the link below for more reference.
how to call an ASP.NET c# method using javascript
http://api.jquery.com/jQuery.ajax/
Quick question.
I have a Ajax.Action link intended to upload the next section of a form asynchronously.
#Ajax.ActionLink("Next" , "matches",null, new AjaxOptions {UpdateTargetId = "placeholder", InsertionMode = InsertionMode.InsertAfter,HttpMethod = "GET"}, new { #class = "button" })
I've applied my "button" class to it, which gives it the appearance of a big button.
I'm looking to attach a JQuery .click event to the above AjaxAction link triggering a function that will hide the previous form. I'm using the JQuery below to do so:
<script>
$(document).ready(function () {
$(this).closest("a.button").click(function () {
$("form.common").hide();
});
});
</script>
This is not working for me. The Ajax.ActionLink works fine, just not the Jquery. Below is rough breakdown of my page.
<form class="common"> (this form needs to hide)
//lots of inputs
<ActionLink class="button>
</form>
<div id="placeholder">
(this is where the new form will be inserted)
</div>
I'm new to C# and JavaScript/JQuery, so I'm hoping someone can point me in the right direction here.
Rather than using any special events with jQuery, you could call a JS method in the beginning of ajax request performed by ajax link.
Add OnBegin property in your link AjaxOptions and assign a JS function into it and do the logic in that JS function
Ajax Link
new AjaxOptions { OnBegin = "OnBegin" ... }
JS
function OnBegin() {
$("form.common").hide();
}
Hope this will help !!
Try to target your element directly instead of using closest. If you can also use the buttons id or assign a more descriptive class.
$("a.action_button").click(function () {
$("form.common").hide();
});