I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.
Related
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>
This is webform1 code.I want to change the class of button after button click
i call the javascript function on button click...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="valid_try2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="JavaScript1.js"></script>
<link rel="stylesheet" href="StyleSheet1.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn" onclick="abc()">Button</button>
</div>
</form>
</body>
</html>
This is stylesheet file where i create class
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
This is javascript file
function abc() {
$("#btn").removeClass("xx");
$("#btn").addClass("yy");
}
Your button will trigger a form post (PostBack), so all the things you do with abc() will be lost.
But since your tag is asp.net you can do this:
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="xx" OnClick="Button1_Click" />
And then in code behind:
protected void Button1_Click(object sender, EventArgs e)
{
//change the class and do other stuff after the button click
Button1.CssClass = "yy";
}
If you mislabeled your question and you want a pure javascipt/css solution, add type="button" to the button and no form post will be performed.
Please Try below code snipped hope it will help.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").toggleClass('classB');
});
});
</script>
<style>
.classA{color:red;}
.classB{color:yellow;}
</style>
</head>
<body>
<h2 class="">Click the button to change the class</h2>
<p id="p1" class="classA">I will be changed when you pressed click me</p>
<button>Click me </button>
</body>
</html>
Everything looks OK. Just add JQuery reference to aspx file.
Before add the following line.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
I think you need something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="../js/jquery.js" type="text/javascript"></script>
<title></title>
<style>
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn">Button</button>
</div>
</form>
<script>
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var a = $(this).attr('class');
console.log(a);
if (a === 'xx') {
$(this).removeAttr('class');
$(this).addClass("yy");
} else {
$(this).removeAttr('class');
$(this).addClass("xx");
}
});
})
</script>
</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
Am struggling with proper syntax to change a link you go to onclick using javascript.
I have:
js:
function changeLink {
link = "page2.php";
document.getElementById('go').onclick= function() { location.href(link); };
}
html:
<button type="submit" name="submit1" style="width:100%;height:30px" onclick="changeLink();">Change Place To Go</button>
<div id="go" onclick="document.location.href='page1.php';">Click to go somewhere</div>
JS fiddle
Thanks for any suggestions!
Let's start with some common.js:
//<![CDATA[
var doc = document, bod = doc.body;
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Now let's do your main page, index.php:
//<![CDATA[
function direct(id, link){
E(id).onclick = function(){
location = link;
}
}
direct('button1', 'page1.php'); direct('button2', 'page1.php');
//]]>
HTML can look more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'common.css'; #import 'index.css';
</style>
</head>
<body class='njs'>
<div id='main'>
<input type='button' id='button1' value='button 1' />
<input type='button' id='button2' value='button 2' />
</div>
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='index.js'></script>
</body>
</html>
Your CSS on common.css:
body{
margin:0;
}
#main{
width:980px; margin:0 auto;
}
Your CSS on index.css:
#button1,#button2{
height:30px; width:300px;
}
Note:
You could use a CSS class instead of the comma separated ids. This is just to show you what the syntax should look like. You should know that onclick fires before form submission, therefore redirecting would happen before submission, so there is no point in using a submit button. There is really no point in having a form in your case, unless you can explain why. I would just use <a href='page1.php'>page 1</a>, and the like, so you don't even need to use JavaScript. You can use CSS to style a link into a button.
when i click on a button in parent window a pop up which is in hidden div tag must be displayed in the iframe that is loaded in the page....i dont understand where i have gone wrong so please help me out
<html>
<head>
<title>The iframe</title>
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
</head>
<body>
<div id="popup"style="visibility:hidden;"><strong><h1>POPUP</strong></h1>
<A
HREF="inframe.html"
onClick="return popup(this, 'notes')">click me</A>
</div>
<body>
</html>