i need to display an image only after a button click in asp.net mvc2
but i am getting it even before click as well as after click
can someone give me a solution as to why this is happenning??
Try something on the lines of:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<button>Show it</button>
<img src="url" style="display: none" />
<script>
$("button").click(function () {
$("img").show("slow");
});
</script>
</body>
</html>
http://api.jquery.com/show/
Related
I just want to click over the iframe or visit the iframe content on/after button click.
Please provide me a javascript code.
I have tried
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<iframe id="frm" src="https://example.com"></iframe>
<button id="btn">Click Here</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
$("#btn").on('click', function() {
window.location.href=this.frm;
});
</script>
</body>
</html>
Can I get an array that contains references to the fields in a form (like input, textarea, etc.) and in my code run a function on them, like addClass()?
To explain what I want to do - after the user submits the form (and invokes the submit() function in the controller) I want to add a red border color on the invalid input.
ng-class="{'has-error':form.input.$invalid}"
But this isn't working
You can add a condition on your input like ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.val={};
});
.has-error{
border-color:red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="angular.js#1.5.x" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="Hazmat" ng-model="val.type" required ng-class="{'has-error':myForm.$submitted&&myForm.Hazmat.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.Hazmat.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
I created a test project of MVC3,and the project has only one layout of razor.
In the Layout I use a jquery to create dynamic menus,I just want get the effect is when i clicked these menu ,it should return different partial views in the body segment,and the layout menu should remember the menu state i clicked on the layout page.
But the result is ,when i click the menus everytime ,the layout will render again,and the menu state will restore ,how to resolve the problem?
This is my code !!! Can anybody help me?Thanks!!!
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".sidebar1 dl dd").hide();
$(".sidebar1 dl dt").click(function () {
$(".sidebar1 dl dd").not($(this).next()).hide();
$(this).next().slideToggle(500);
});
});
</script>
</head>
<body>
<div class="container">
<div class="header"><img src="/Content/images/logo.png" alt="logo" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
<!-- end .header --></div>
<div class="sidebar1">
<dl class="nav">
<dt>aaaaa</dt>
<dd>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</dd>
<dt>aaaaa</dt>
<dd>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</dd>
</dl>
</div>
<div class="content">
#RenderBody()
</div>
</body>
</html>
you can specify the layout used on each page if needed.
If you dont want a layout just set it to null.
Put this at the top of the page:
#{
layout = null
}
user,
where you have:
<div class="content">
you need to change that to:
<div id="content">
you then need to target your partial views to update that div. This means that your controller actions should return PartialView(), rather than View(). Also, without worrying about any of the aforementioned, you could simply try changing your click function to:
$(function () {
$(".sidebar1 dl dd").hide();
$(".sidebar1 dl dt").click(function (e) {
$(".sidebar1 dl dd").not($(this).next()).hide();
$(this).next().slideToggle(500);
e.preventDefault();
return false;
});
});
there could be more required as you don't show the ajax code but I'm willing to bet that if you have followed standards in your ajax calls, then this will all resolve itself with the changes mentioned.
This is one of two scripts I'm having problems with involving the fb:friend-selector. It's a facebook iframe application but no matter what I try, in ie6 the height is around 150px which gives scrollbars. By adding 1px borders it would seem that in other browsers where it does actually work, there is an initial height of around 150px whci hresizes as the friends list gets populated. In IE6 this never happens.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<?=$_GET[friend_sel];?>
<fb:serverfbml style="width: 500px; height:20px; border:1px solid red">
<script type="text/fbml">
<form id="addform" action="http://www.keywordintellect.com/facebook/iframeexample/serverfbml.php?<?=fbvars?>">
<fb:fbml>
<fb:friend-selector uid="<?=$user_id?>" name="newuid" idname="friend_sel" style="height: 700px"></fb:friend-selector>
</fb:fbml>
<input type="submit" value="Submit"/>
</form>
</script>
</fb:serverfbml>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init("<?php echo $appapikey ?>", "xd_receiver.htm",null);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Have you tried to set up your applicaion IFrame Size to Resizable?
if you don't go to your application ->edit setting->canvas->canvas setting->IFrame Size
the check Resizable.