Open a tab with a URL when link clicked - c#

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.

Related

I just want to change the URL on Runtime?

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>

Link Dynamic URL to div in Umbraco

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;
});
});

Can't Use PageMethod (ajax in C# .net)

I try to use PageMethod in asp.net.
First I add script Manager to my aspx page:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
I wrote onClick method on JS:
function TryAJAX() {
PageMethods.TryA( onSucess, onError);
function onSucess(result) {
alert('good.');
}
function onError(result) {
alert('Something wrong.');
}
}
and in the code behind:
[WebMethod]
public static String TryA()
{
return "JSON CHECK";
}
and I always get the message 'something wrong' . althouth that in debugger I see it's enter to the methood 'TryA'.
What is the problem?
thanks!!
i know this is not the exact path you were looking to take for a solution, but I think it is a WAY better option, so here's my 2 cents...
your button in html
<input type="button" id="myStupidButton" value="Click Me Yo" />
you javascript- I am going to use jQuery too , if that is really a problem I can give you a pure js option:
<script>
$(function(){
$(document).on('click', '#myStupidButton', function(){
$.ajax({
type: "POST",
url: "Mypage.aspx/TryA",
success: function(data){
// parse asp.net's response
data = $.parseJson(data);
//asp.net wraps all json into json like this "d" : "yourresponse"
alert(data.d);
}
});
});

Is there a way to keep a jQuery selected tab, after the page is refreshed?

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);
});
});
});

Open jQuery UI Dialog from Code Behind

I am kind of new with jQuery and JavaScript, and I ran into a problem.
I am having some problems to open the jQuery UI Dialog Box from my ButtonField within the Gridview:
<asp:ButtonField ButtonType="link" Text="Modify Deadline" Visible="true" runat="server" CommandName="modifyDeadline" ControlStyle-CssClass="button" ItemStyle-CssClass="sliderPopupOpener"/>
At first I tried to give a class to the above and named it sliderPopupOpener, and make it open the jQuery Popup when clicked as below:
$(".sliderPopupOpener").click(function () {
$("#sliderPopup").dialog("open");
});
However, this was not working because of the postback, apart from that, it also does not work with my approach. Since I would like to get some data from the database before showing the jQuery UI Dialog. So I think the best approach is to call the Dialog function from the Code Behind.
How can I do this?
I tried this approach, but it did not work, I am not sure if I am doing something wrong.
if (e.CommandName == "modifyDeadline")
{
string sliderPopupFunction = #" <script type=""text/javascript"">
$(function () {
jQuery(function () {
$(""#sliderPopup"").dialog(""open"");
}
});
</script>";
ClientScript.RegisterStartupScript(typeof(Page), "key", sliderPopupFunction);
}
Is the above possible? If so, what am I doing wrong?
EDIT:
I noticed everyone is giving their answers with a way around this, rather than telling me whether this is possible just by calling the jQuery function from the Code Behind. Although I appreciate other solutions, I would appreciate if I could get this to work, with the least effort possible, through the code behind, since I have everything ready that way.
Instead of directly bind the click event handler, you should try delegated events using live (deprecated since jquery 1.7) or on.
That way, you should change this :
$(".sliderPopupOpener").click(function () {
$("#sliderPopup").dialog("open");
});
Into something like this :
$(body).on("click", ".sliderPopupOpener", function(){
$("#sliderPopup").dialog("open");
});
alternative
If the code-behind approach is more suitable for you, you should try calling the method directly in your script, i.e, change this :
string sliderPopupFunction = #" <script type=""text/javascript"">
$(function () {
jQuery(function () {
$(""#sliderPopup"").dialog(""open"");
}
});
</script>";
into simply this :
string sliderPopupFunction = #" <script type=""text/javascript"">
$(""#sliderPopup"").dialog(""open"");
</script>";
Also, if your sliderPopup is a server-side control, you should replace the #sliderPopup with the client Id generated by ASP .NET (using sliderPopup.ClientID).
Another thing to consider is if your sliderPopup located inside the update panel, you should try re-initialize the Jquery UI dialog first, something like this :
$("#sliderPopup").dialog().dialog("open");
Just Replace the <asp:ButtonField with <asp:TemplateField the write whatever you want:
<asp:TemplateField>
<ItemTemplate>
<input type="button" onclick='jsFunctionThatShowsTheDialog()'/>
</ItemTemplate>
</asp:TemplateField>
I think in this situation it would be better for you to use a plain old <input type="button/> button and use ajax to perform your call to the server, and then with the returned data append it to your html and use the dialog. Ajax will perform your code behind without posting back your entire page.
EDIT: here is an example I did a while ago
//declaring the web method annotation allows this method to be accessed by ajax calls
//scriptmethod tells this method to take the data that we're returning, and encode it as a json so we can use it in javascript
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<Person> getPeople() {
List<Person> people = null;
using (testDataEntities context = new testDataEntities()) {
people = context.People.ToList();
}
return people;
}
$(document).ready(function () {
$("#getPeople").click(function () {
$.ajax({
type: "POST",
data: {},
url: "Default.aspx/getPeople", //getPeople is the name of the method
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var data = msg.d;
var $table = $("<table></table>");
$.each(data,function(){
$table.append("<tr><td>"+this.MyProperty+"</td></tr>")
});
$table.dialog();
}
});
});
});

Categories

Resources