I am using Twitter Bootstrap 2 and jQuery. I have simple HTML button as follows:
<button type="button" onclick="Redirect(1,'');" class="btn btn-danger">Cancel</button>
In the head section I have a javascript function as follows:
function Redirect(id, push) {
if (id == 1) {
if (push == 1) {
window.location.href('../dashjs/dashboardjs.aspx?pushchart=1');
}
else {
window.location.href('../dashjs/dashboardjs.aspx');
}
return false;
}
}
For some reason, the function Redicect is never called in CHROME. This seems to be working in IE.
Any ideas of what might be the issue here.
The following are loaded in the head section:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="../Content/bootstrap-button.js"></script>
any help will be much appreciated.
window.location.href actually isn't a method.
Try:
window.location.href = '../dashjs/dashboardjs.aspx?pushchart=1';
http://www.w3schools.com/jsref/prop_loc_href.asp
<script type="text/javascript">
function Redirect(id, push) {
if (id == 1) {
window.location.href = 'http://www.google.com';
} else {
window.location.href = 'http://www.yahoo.com.com';
}
return false;
}
</script>
</head>
<body>
<button type="button" onclick= Redirect(1,''); class="btn btn-danger">Cancel</button>
</body>
Try that. you need to assign location using =
If you want to use your syntax try window.location.replace as a redirect
Related
I have this html site
<html>
<head>
<link rel="stylesheet" href="~/Content/index.css" />
<link rel="stylesheet" href="~/Scripts/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="~/Scripts/prototype.js"></script>
<script type="text/javascript" src="~/Scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="~/Scripts/Scale.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="~/Scripts/fancyBox/source/jquery.fancybox.pack.js"></script>
<title>Countries</title>
</head>
<body>
<div>
#foreach (var country in Model)
{
<a class="fancybox">
<div class="tooltip">
#using (Html.BeginForm("ChangeCulture", "Home", new { lang = country.Culture }))
{
<!-- onclick="zoomIn('#country.Culture')"-->
<input id="#country.Culture" class="#country.Sprite" type="image" name="submit" src="//" />
<span class="tooltiptext">#country.Country</span>
}
</div>
</a>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
afterShow : function() {
this.find("form").submit();
}
});
})
</script>
</body>
</html>
The bottom line is that the flags of countries with tooltips are displayed on the screen and by pressing it is necessary to change the language of the tooltips to the language used in the country. I did this, and now I need to increase the whole screen after receiving the picture with the flag, and then the language would change. I found the fancybox scripts, but after it is inserted, the form is not sent, the selected flag appears in the center, but nothing happens after that, what could be the problem? I have not written to asp and js before
After click on the image I got an error
Uncaught TypeError: this.find is not a function
at Object.afterShow (Index:119)
at Function.trigger (jquery.fancybox.pack.js:17)
at HTMLDivElement._afterZoomIn (jquery.fancybox.pack.js:33)
at HTMLDivElement.d.complete (jquery-latest.min.js:4)
at j (jquery-latest.min.js:2)
at Object.fireWith [as resolveWith] (jquery-latest.min.js:2)
at i (jquery-latest.min.js:4)
at m.fx.tick (jquery-latest.min.js:4)
My method
public ActionResult ChangeCulture(string lang)
{
var returnUrl = this.Request.UrlReferrer?.AbsolutePath;
var cookie = this.Request.Cookies["lang"];
if (cookie != null)
{
cookie.Value = lang;
}
else
{
cookie = new HttpCookie("lang")
{
HttpOnly = false,
Value = lang,
Expires = DateTime.Now.AddYears(1)
};
}
this.Response.Cookies.Add(cookie);
return this.Redirect(returnUrl ?? "Index");
}
You should user jquery selector
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
afterShow : function() {
$(".fancybox").submit();
}
});
})
The error is located in this statement:
this.find("form").submit();
You're trying to call find() method on plain JS object inside this wrapper, where the function belongs to a jQuery object. The correct way is using jQuery object like this:
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
afterShow : function() {
// alternative: use $(this).closest("form").submit();
$(this).find("form").submit();
}
});
});
</script>
Additionally your redirection method in controller action should be like below, since Controller.Redirect requires full path or URL for redirect to another page:
public ActionResult ChangeCulture(string lang)
{
var returnUrl = this.Request.UrlReferrer?.AbsolutePath;
// cookie settings here
if (string.IsNullOrEmpty(returnUrl))
{
return this.RedirectToAction("Index");
}
return this.Redirect(returnUrl);
}
The this in this.find("form") is not $(".fancybox") here.
Try using $('.fancybox form') instead.
I've added a web resource in the shape of a button onto a form in our CRM online instance. I've been debugging for a while now and I don't understand what I'm missing here.
Below is the web resource (I've omitted the javascript URL for obvious reasons)
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<button onclick="TriggerNPS()" class=".btn-default">
<i class="glyphicon glyphicon-check"></i>
Send NPS Now
</button>
<script src="Javascript URL" type="text/javascript"></script>
</body>
</html>
Javascript that the URL links to
function TriggerNPS() {
var NoTick = parent.Xrm.Page.getAttribute("ondemandnps").getValue();
if ((NoTick) ==null);
parent.Xrm.Page.getAttribute("ondemandnps").setValue("1");
parent.Xrm.Page.data.entity.save();
return
if ((NoTick) !=null)
parent.Xrm.Page.getAttribute("ondemandnps").setValue("0");
parent.Xrm.Page.data.entity.save();
return;
}
What I'm seeing is that if the field which this is looking at (tick box) contains data, then sure it strips the tic. However if the box is empty. I cannot get the script to add the check. Testing this in the console though the command does work. It runs over the lines and doesn't step out of them, but does nothing.
Any help will be appreciated.
Maybe try this:
function TriggerNPS() {
var NoTick = parent.Xrm.Page.getAttribute("ondemandnps").getValue();
if (NoTick == null) {
parent.Xrm.Page.getAttribute("ondemandnps").setValue(true);
}
else {
parent.Xrm.Page.getAttribute("ondemandnps").setValue(false);
}
parent.Xrm.Page.data.entity.save();
}
I seem to have this working except for the fact that once the link is clicked, the datepicker opens, then I select a date and all is good and well, then once I try to click the link again, the date picker does not open again.
What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
function test() {
var datePickerValue = null;
$("#d1").datepicker().datepicker("show").change(function ()
{
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
}
</script>
</head>
<body>
<div id="d1"></div>
test
</body>
</html>
Just add the show method before the datepicker() as like below:
$("#d1").show().unbind().datepicker().datepicker("show").change(function () {
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
This will fix your issue.
function test() {
$('#d1').datepicker({onSelect: function(){alert("You picked: " + $(this).val())})} );
}
Sorry if i am completely off the mark here but you might have more success if you use, jquery .on - http://api.jquery.com/on/
so add a id or class to your link:
<a class="clicky" href="#">test</a>
then call your function like this:
$("body").on("click", ".clicky", test);
I think this will solve your issue but I may be wrong
I'm trying to reuse a function i made, but with any help yet.
Here is my index.html.
<html>
<head>
<script src="jquery-1.5.1.js")" type="text/javascript"></script>
<script src="JqueryScript.js")" type="text/javascript"></script>
<script type="text/javascript">
//MYLIBRARY.init(['#button1']);
execute(['#button1']);
execute(['#button2']);
</script>
</head>
<body>
<button type="button" id="button1">Click Me!</button>
<button type="button" id="button2">Click Me!</button>
</body>
</html>
And here is my script.
function execute (Args){
_args = Args;
$(function() {
$(_args[0]).click(function() {
alert("hello " + _args[0]);
return false;
});
});
}
The problem is always triggers the second alert windows (#button2). How can i make it work with both alert windows?
My guess is that you are wondering why both buttons alert the same output.
Because _args is global. Thus the second invokation will overwrite _args.
Use var to make it local:
var _args = Args;
Your code could still be improved (see #Town's answer), but this should get you started.
You also have errors in your HTML
<script src="jquery-1.5.1.js")" type="text/javascript"></script>
<!-- ^^ -->
<script src="JqueryScript.js")" type="text/javascript"></script>
<!-- ^^ -->
What exactly are you trying to do?
From what I can see, you could achieve the same functionality as what you have with simply:
$(function() {
$('button').click(function() {
alert("hello #" + this.id);
});
});
Example
Looks like C to me :)
You'd be better off with
<script type="text/javascript">
$(function () {
execute('#button1');
execute('#button2');
}
function execute(buttonId)
{
$(buttonId).click(function () { alert('Hello ' + this.id); });
}
</script>
<script language="JavaScript">
function del_rcd(param)
{
if(confirm("Do you really want to delete it"))
{
window.location = 'controller/del_task_ctl.php?param='+param;
}
}
</script>
<script language="javascript">
function popup(id)
{
window.open("detail.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
<script language="javascript">
function popupcomp(id)
{
window.open("edit_task.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
<script language="javascript">
function popupclose(id)
{
window.open("close.php?qid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
Is JavaScript disabled in Firefox?
Just as a side-note. The "language" attribute is quite obsolete (See point 7). Instead write
<script type="text/javascript">
</script>
I just made this quick test under OSX Firefox and it just works:
<html>
<head>
<script type="text/javascript">
function del_rcd(param){
if(confirm("Do you really want to delete it"))
{
window.location = 'controller/del_task_ctl.php?param='+param;
}
}
function popup(id)
{
window.open("detail.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
function popupcomp(id)
{
window.open("edit_task.php?tid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
function popupclose(id)
{
window.open("close.php?qid="+id, "Preview","width=600,height=500,scrollbars=yes");
}
</script>
</head>
<body>
<input type="submit" Text="Click me" onclick="del_rcd('test')"/>
</body>
</html>
Additionally what I always recommend web devs is to install Firebug and optionally PageSpeed. This is a must especially when you deal with JavaScript. Firebug automatically shows you syntax or JavaScript runtime errors.
I am submitting a form to this script by calling these js function
but submit button only works in IE and on all other browsers Submit button is not working