<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intro Into Vue3</title>
<style>
.box {
background-color: purple;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
{{greeting}}
<input v-model="greeting" />
</div>
<hr />
<div class="box" v-if="isVisible"></div>
<hr>
<script src="https://unpkg.com/vue#next"></script>
<script>
let app = Vue.createApp({
data: function () {
return {
greeting: "Hello Vude3",
isVisible: false,
};
},
});
app.mount("#app");
</script>
</body>
</html>
I am working on the tutorial of freecodecamp on yt regarding vu3
at the beginning conditional rendering is explained
in the data properties there is an variable "isVisible" set to false
the v-if is not working on the purple box though its set to false
Your problem is here:
<div id="app">
{{greeting}}
<input v-model="greeting" />
</div>
Since you mount vue on the app, id app.mount("#app");, Vue.js will only control the components within the div that declares this id, and your box-class div isn't within this div and so is not controlled by vue.
so change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intro Into Vue3</title>
<style>
.box {
background-color: purple;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
{{greeting}}
<input v-model="greeting" />
<hr />
<div class="box" v-if="isVisible"></div>
<hr>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script>
let app = Vue.createApp({
data: function () {
return {
greeting: "Hello Vude3",
isVisible: true,
};
},
});
app.mount("#app");
</script>
</body>
</html>
to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intro Into Vue3</title>
<style>
.box {
background-color: purple;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
{{greeting}}
<input v-model="greeting" />
<hr />
<div class="box" v-if="isVisible"></div>
<hr>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script>
let app = Vue.createApp({
data: function () {
return {
greeting: "Hello Vude3",
isVisible: true,
};
},
});
app.mount("#app");
</script>
</body>
</html>
and it will work
Related
I have 5 buttons. With Fetch, the api is fetched and written to the screen. I want the top 50 countries to be listed when I click on button 1. After that, when you press button number 2, the countries between 50-100 should appear on the screen. In this order, I want to remove 250 countries 50-50 when each button is clicked
const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button')
fetch('https://restcountries.com/v3.1/all')
.then(res=>res.json())
.then(data=>{
let card = "";
data.map(item=>{
card+=`
<div class="col-md-4">
<div class="card" >
<img height="300" src="${item.flags.png}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.name.common}</h5>
<p class="card-text">${item.capital}</p>
Go somewhere
</div>
</div>
</div>
`
})
row.innerHTML = card;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<section>
<div class="container mt-5">
<div class="row g-5"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
I'm trying to learn Bootstrap Grids, I think I did the correct use of Grids but my code isn't producing the result I expected in Chrome, although it looks correct in Codepen. My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Testando Grids</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- CSS -->
<style type="text/css">
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="red col-md-8">8</div>
<div class="blue col-md-4">4</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
What I expected (and what I get in Codepen):
What I've got:
your code is fine, but you have given a wrong bootstrap.min.css path , check your console, here is your updated code, view in full page
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="red col-md-8">8</div>
<div class="blue col-md-4">4</div>
</div>
</div>
i've already seen some user with the same problem:
Lightgallery not working
but i still can't get it to work, here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</li>
<li <a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</ul>
</div>
</div>
</body>
</html>
Can't figure out what i'm missing.
Thanks for any help
You haven't connect main file - lightgallery.js.
Connect it.
Can you please check this code and see if it does any help? Hope it does :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
<li ><a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
</ul>
</div>
</body>
</html>
I'm created a simple CSS with YUI Skin Builder, but, when I try to use it in my MVC project the color system is not correct
My skin is that: Skin, the spected button color is red, but, I just get a gray or blue button:
My cshtml code:
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>UniFlex</title>
<link href="#Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/pure-skin-min.css")" rel="stylesheet" />
</head>
<body>
<div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
<img src="#Url.Content("~/Imagens/logo.png")">
</div>
<div style="width:500px; margin-right:auto; margin-left:auto;">
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Usuario:</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Senha:</label>
<input id="password" type="password" placeholder="Password">
</div>
<button class="pure-button pure-button-primary">A Pure Button</button>
</fieldset>
</form>
</div>
</body>
</html>
What is wrong ?
Ok, I forgot to put the css name in body
<body class="pure-skin-mine">
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>UniFlex - Bradesco</title>
<link href="#Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/pure-skin-mine.css")" rel="stylesheet" />
</head>
<body class="pure-skin-mine">
<div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
<img src="#Url.Content("~/Imagens/bradesco-logo.png")">
</div>
...
Now it's work very well!
I have just started a new project in MVC4 using some code from an existing MVC3 project. I can force my form to ajax reload the specific DIV, but not using the normal submit method, only with the test doSomthing() javascript function. What am I missing?
To clarify: The first button does not work right, the second one does - but I don't want to do it that way.
VIEW
#using (Ajax.BeginForm("Method1", null,
new AjaxOptions { HttpMethod = "post", UpdateTargetId = "divPartial1" },
new { id = "form1" }))
{
<div class="data">
#Html.LabelFor(x => x.TotalSubmitted, new { #class = "total" })<div class="number total">#Html.FormatValue(Model.TotalSubmitted, "{0:n0}")</div>
...
</div>
<div class="details">
<div id="divPartial1">
#Html.Partial("ReportDashboardAppPartial")
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="k-button"><span class="k-icon k-i-search" /></button>
<button type="button" name="Save" value="Save" onclick="doSomething(); return false;"><span class="k-icon k-i-search" /></button>
</div>
}
<script type="text/javascript">
function doSomething() {
$.ajax({
url: '#Url.Action("Method1", "Controller")',
type: 'post',
data: $('form#form1').serialize(),
success: function (result) {
$('#divPartial1').html(result);
}
});
}
</script>
_Layout
#model BaseViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="#Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")" rel="stylesheet" type="text/css" />
#RenderSection("styles", false)
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js")"></script>
#RenderSection("scripts", false)
</head>
<body>
#Html.Partial("_AlertWindow")
<div id="wrapper">
<header>
<div id="logindisplay">
#Html.Partial("_LoginPartial")
</div>
<a href="#Url.Action("Index", "Home")">
<div id="logo"></div>
</a>
<div id="title">
<h1>Ha!</h1>
</div>
#(Html.Kendo().Menu().Name("Menu").BindTo("Main").SecurityTrimming(true))
</header>
<div id="main">
#RenderBody()
</div>
<footer>
<div id="version">#Html.ActionLink("Version " + #Model.CurrentVersion, "About", "Home")</div>
</footer>
</div>
#RenderSection("end_scripts", false)
</body>
</html>
I know this should work.
I had the same problem. The solution is to add a statement in _Layout.cshtml page.
#Scripts.Render("~/bundles/jqueryval")
The definition of ScriptBundle("~/bundles/jqueryval") as below
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));