My current bootstrap and vue versions:
"bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.3", "bootstrap-vue": "^2.23.1", "jquery": "^3.6.3", "popper.js": "^1.16.1", "vue": "^3.2.47",
My code:
<template>
<div>
<b-card no-body>
<b-tabs card>
<b-tab title="Tab 1" active>
<b-card-text>Tab contents 1</b-card-text>
</b-tab>
<b-tab title="Tab 2">
<b-card-text>Tab contents 2</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</div>
</template>
Hope everyone can help me. Thank you very much.
It just shows up like this:
enter image description here
Related
The Leaf documentation doesn't seem to be working for me I can't figure out why.
child.leaf
#extend("index"):
#export("hello"):
<p>Welcome to Vapor!</p>
#endexport
#endextend
index.leaf
<!-- Backend Projects -->
<div class="seciton-label">
<h3>#(.backendCollection.title)</h3>
</div>
#import("hello")
<!-- Backend Card -->
#for(card in .backendCollection.collection):
<div class="greeting-card">
<a href=#(card.url)>
<h3>#(card.title)</h3>
</a>
<p> #(card.description) </p>
</div>
#endfor
The following image is the result I get in localhost
Request result running the vapor server on localhost
Please help - I can't find solutions to this issue.
No response from forums.swift.org
Tried removing the import key
Removing quotes
I saw individuals using the following format in older versions of Vapor. This did not work for me either.
<!-- I tried the following format for the extend and export blocks -->
#extend("index") {
#export("hello") {
<p>Welcome to Vapor!</p>
}
}
I'm trying to be able to extend the leaf templates and understand why the html does not render.
This works and does something similar to what you want.
This is my 'template' (heavily simplified here), called Base.leaf:
<!DOCTYPE html>
<html>
<head>
<title>#(title)</title>
</head>
<body>
#import("body")
</body>
</html>
#extend("Build/Message")
</body>
</html>
The extend of Build/Message above behaves simply like an include.
Then I use it in a form called Login.leaf here:
#extend("Build/Base"):
#export("body"):
<form method="POST" action="/log-in">
<label for="email">Email</label>
<input type="text" name="email" required>
<label for="password">Password</label>
<input type="password" name="password" required>
<button class="btn-success">Log-in</button>
</form>
#endexport
#endextend
I then use the `Login.leaf' in a render such as:
let context = ["title": "Log in", "version": C.Msg.Version, "message": request.getMessage()]
return try await request.view.render("Form/Login", context)
I am using protractor 5.2.2. I have to locate a dropdown element by using its sting name.So i have tried with below code,but its not working.
element(by.xpath("//content[contains(string(), 'Learn more')]")).click();
or
element(by.xpath("//div[contains(string(), 'Learn more')]")).click();
The UI code is given below
<div jsname="YCbqLe">
<div jsaction="aLn7Wb:kbDuhe">
<div role="listbox" aria-expanded="false" class="Ej ljmwzf" jscontroller="YwHGTd" jsaction="click:cOuCgd(LgbsSe); keydown:I481le; keypress:Kr2w4b; mousedown:UX7yZ(LgbsSe),npT2md(preventDefault=true); mouseup:lbsD7e(LgbsSe); mouseleave:JywGue; touchstart:p6p2H(LgbsSe); touchmove:FwuNnf; touchend:yfqBxc(LgbsSe|preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd(LgbsSe); focus:AHmuwe; blur:O22p3e;b5SvAb:TvD9Pc;" jsshadow="" jsname="HvyTdb" aria-label="Add a button (optional)">
<div jsname="LgbsSe" role="presentation">
<div class="EI" jsname="d9BH4c" role="presentation">
<div class="Di LMgvRb y3" jsname="wQNmvb" jsaction="" data-value="" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="BOOK" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="ORDER" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="SHOP" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb bf" jsname="wQNmvb" jsaction="" data-value="LEARN_MORE" aria-selected="true" tabindex="0" role="option">
<div class="qm he" jsname="ksKsZd"></div>
<content class="u5 jh">
"Learn more"
</content>
</div>
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="SIGN_UP" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="GET_OFFER" aria-selected="false" tabindex="-1" role="option">
</div>
</div>
How can i select the the drop down text "Learn more" here, using the text 'Learn more'.Thanks in advance
you can also use the css locator as below
element(by.cssContainingText("content", "Learn more"))
or with Xpath
element(by.xpath("//*[text()='Learn more']")
Looks like the text have some space. You can copy the complete text between tags and use that in that above xpath or can try the below example
//content[normalize-space(text())='Learn more']
or you can try this css
element(by.css("div[data-value="LEARN_MORE"] content")
Try this xpath to locate the element. If click is not working out, probably this element does not have click action.
//content[contains(text(), '"Learn more"')]
You may try invoking the click action for either one of the below.
//div[#data-value="LEARN_MORE"]
or
//div[#data-value="LEARN_MORE"]/div
ngFor don't seem to work for me with ngfor when the flex direction is "row", I mean it works but it puts the items on top of each other instead of side by side
<FlexboxLayout class="itemWindow" *ngFor="let imageUrl of matchItems"
flexDirection="row">
<StackLayout class="inventoryImage">
<Image width= "80" height="80" stretch="aspectFill"
left="5" src="{{imageUrl}}" ></Image>
</StackLayout>
</FlexboxLayout >
What am I doing wrong ? is there another way to do it? I tried with DockLayout but same thing is happening.
I don't have your components so I used divs, but the idea is pretty much the same.
<div fxLayout="row"> <!-- extra container with row layout -->
<div class="itemWindow" *ngFor="let imageUrl of matchItems">
<div class="inventoryImage">
<div width= "80" height="80" stretch="aspectFill"
left="5">{{imageUrl}}</div>
</div>
</div>
</div>
I just added div tag before listItem and added *ngFor to it instead of FlexboxLayout. And it works
<FlexboxLayout flexDirection="row">
<div *ngFor="let filterItem of activityFilters">
<Label flexGrow="1" class="text-center" [text]="activityFilter[filterItem]"> </Label>
</div>
</FlexboxLayout>
I have no code to start off with, because I'm not advanced in JQuery and this seems like advanced stuff here. I know how to add classes, hide elements and other sorts of things but this is a new thing for me here. Here's the problem. I have content being served via php and mysql. The content will all share the same class and will be listed five per page. I need to have each of the same classes to have an extra class added to them to give it a unique class. An example of what the html looks like is below.
<div id="1" class="example"></div>
<div id="2" class="example"></div>
<div id="3" class="example"></div>
<div id="4" class="example"></div>
<div id="5" class="example"></div>
I need Jquery to do this to the html:
<div id="1" class="example ex1"></div>
<div id="2" class="example ex2"></div>
<div id="3" class="example ex3"></div>
<div id="4" class="example ex4"></div>
<div id="5" class="example ex5"></div>
It will not be practical to create scripts for the Id tag, because if I have a thousand Id's, then I will have to replicate the script a thousand times per id and more so as the list gets longer. This is only for javascript purposes so I want to keep it within javascript. If there is a way to accomplish this on the server side as well I'll take those suggestions as well. Thanks to all in advance for any help with this problem.
Now I finnaly understand what you want
this code is needed
// Wait on the document to be loaded
$(function(){
// get every element with the class example in an array and loop
// through it(each) with i as index
$(".example").each(function(i){
// add class ex with the index
// this is the element we are pointing at so a div
$(this).addClass("ex" + i);
});
});
but you could do this easily on server side when you loop through your array with 5 divs ;)
If I read your comments correctly, you have 5 items per page and the class will be ex1 ex2 ... ex5 respectively.
If so, here is the script:
var itemsPerPage = 5;
$(".example").each(function(){
var number = this.id % itemsPerPage;
if (number == 0) number = itemsPerPage;
$(this).addClass("ex"+ number);
});
Or short version:
var itemsPerPage = 5;
$('.example').each(function(){
$(this).addClass('ex'+ ((this.id % itemsPerPage) == 0 ? itemsPerPage : (this.id % itemsPerPage));
});
Or shortest version is EaterOfCorpses's answer if you don't care about the ID at all. Each method has its own pros and cons.
Example 1: Wrong ID order
<div id="6" class="example">
<div id="8" class="example">
<div id="7" class="example">
EaterOfCorpses's will generate
<div id="6" class="example ex0">
<div id="8" class="example ex1">
<div id="7" class="example ex2">
My script will generate
<div id="6" class="example ex1">
<div id="8" class="example ex3">
<div id="7" class="example ex2">
Example 2: random ID (EaterOfCorpses's pros)
<div id="15blahblah" class="example">
<div id="5" class="example">
<div id="10" class="example">
EaterOfCorpses's will generate
<div id="15blahblah" class="example ex0">
<div id="5" class="example ex1">
<div id="10" class="example ex2">
My script will generate same class and error at 15blahblah, which may be both good (to detect error in IDs) and bad (JS does not run for that particular record)
<div id="15blahlbah" class="example exNil">
<div id="5" class="example ex5">
<div id="10" class="example ex5">
Cool.
$(document).ready(function(){
jQuery.each($(".example"), function(){
$(this).addClass("x" + this.id);
});
});
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>