I am using dojo 1.5. I am creating a sample wizard. Below is code
<div class="floater">
<p>This example shows a wizard with customized button labels.</p>
<div id="wizard1" dojoType="dojox.widget.Wizard" hideDisabled="true" previousButtonLabel="test" nextButtonLabel="Go on" doneButtonLabel="Finish">
<div dojoType="dojox.widget.WizardPane" >
// Here some html form , User has to fill all information
</div>
<div dojoType="dojox.widget.WizardPane">
<h1>Tab 2</h1>
</div>
<div dojoType="dojox.widget.WizardPane">
<h1>Tab 3</h1>
You won't be able to come back, but you can finish now...
</div>
<div dojoType="dojox.widget.WizardPane" >
<h1>Tab 4</h1>
... and now you can't go back.
</div>
<div dojoType="dojox.widget.WizardPane" doneFunction="done" >
<h1>Tab 5</h1>
... and now you can finish up.
</div>
</div>
</div>
I want to hide next button which has label "Go on" for first pane of wizard til user fill all information from first pane. So can you please suggest how to disabled "Next" button from wizard when it was initially loaded.
I don't know exactly what the best way to do this is. If you use dijit.form.Form, you can use its onValidStateChange method, and toggle the button enabled/disabled there.
var toggleWizardButton = function(valid) {
dijit.byId("theWizard").nextButton.set("disabled",!valid);
//if(valid) { /* enable "Go on" button here.. */ }
//else { /* opposite.. */ }
};
var form = dijit.byId("theFormInWizardPane1"),
wiz1 = dijit.byId("theWizard");
dojo.connect(form, "onValidStateChange", toggleWizardButton);
wiz1.nextButton.set("disabled",true); // button disabled by default
Example fiddle: http://jsfiddle.net/VQM2k/1/
An alternative, possibly better way, is to just use the WizardPane's passFunction, which when returning false, will prevent the wizard from moving forward. In it, you can get the form and check whether it is valid or not (kind of like your other question :) ).
<div dojoType="dojox.widget.WizardPane" passfunction="passfunction" >
// Here some html form , User has to fill all information<br/><br/>
<form id="myForm" dojoType="dijit.form.Form">
Name: <input dojoType="dijit.form.ValidationTextBox" required="true" />
</form>
</div>
The passfunction can simply be something like this:
var passfunction = function() {
var form = dijit.byId("myForm");
return form && form.validate();
};
Fiddle: http://jsfiddle.net/VQM2k/
Related
Either 1 button clicked, getting 3 trigger actions. Not sure why it calls 3 times instead of getting the value of a clicked button.
if clicked the first button, it has to click only that button and get the title as "Test 1". But, it calls all 3 buttons at the same time.
$('.listing .btn.apply').click(function(){
let getTestName = $(this).parent().find('h1').text();
console.log('getTestName: ', getTestName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"wrapper">
<div class="listing">
<h1>Test 1</h1>
Apply
</div>
<div class="listing">
<h1>Test 2</h1>
Apply
</div>
<div class="listing">
<h1>Test 3</h1>
Apply
</div>
</div>
Try this:
$('.listing .btn.apply').click(function(evt){
let getTestName = $(evt.target).parent().find('h1').text();
console.log('getTestName: ', getTestName); });
Explanation:
Your code doesn't specify which element will receive the event click, so jquery propagated to all elements with the same selector, you restrict to the "target" element which is clicked
For a project i'm working on the users that are logged in with enough priveledge to post a new news item are able to see a button to add news items. I would like to show these news item with 'switching styles' (for the lack of a better word). I'm pulling the data from a database where the user submits it through a form on a seperate page. Then i'm requesting all of the news items back on the home page where it lists them as a 'news feed'. The feed fetches like a charm and can be seen here : http://prntscr.com/et39yp
I would like to make the second, fourth, sixth, etc have the first-image or first-video list on the left, like so : http://prntscr.com/et3akw
Is there an easy way of doing this?
#{
var db = Database.Open("Default");
var fetchRows = "SELECT * FROM Articles";
db.Execute(fetchRows);
var articles = db.Query("SELECT articleTitle, articleText, articleVideoUrl, articleImage FROM Articles ORDER BY id DESC");
var articleTitle = db.Query("SELECT articleTitle FROM Articles");
string lorem = "";
}
<div class="Articles">
<h2>Nieuws Feed</h2>
#foreach (var title in articles)
{
<div class="article">
#{
string text = title.articleText;
string firstLetters = new string(text.Take(50).ToArray());
<div class="col s6">
<h3>#title.articleTitle</h3>
<p>#firstLetters</p>
Lees meer...
</div>
<div class="col s6">
#{
if (title.articleVideoUrl != lorem)
{
//Iframe for youtube feed here
}
else if (title.articleVideoUrl == lorem && title.articleImage != "")
{
<div class="result">
<img src="#title.articleImage" alt="image"/>
</div>
}
}
</div>
}
</div>
}
</div>
Now the switching news article thing is something i would be able to work out, the thing i'm struggling with would be the following. The user is able to edit / remove news items. So i cant keep track of an index value or anything similar since it would be invalid should the user remove an item from the middle of the feed. My first guess would be to use the .toggleclass of javascript and that would probably work with originially loading the items but if the user would remove an item it wouldn't show them the right way after. Any help would be welcome.
It shouldn't matter that you are adding the items individually, the nth-child(odd|even) should still work.
You can see it working here: http://jsfiddle.net/Chairman_Mau/uap93rtL/4/ - notice when you click the move up/move down buttons the style changes automatically.
HTML
<div class="articles">
<h1>header</h1>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article movethis">
paragraph - move this one
</div>
<div class="article">
paragraph
</div>
<input type="button" value="add article" class="addarticle"/>
<input type="button" value="move up" class="moveup"/>
<input type="button" value="move down" class="movedown"/>
</div>
Javascript
$(".addarticle").click(function () {
$(".articles").append('<div class="article">added</div>');
});
$(".moveup").click(function(){
var prev = $(".movethis").prev('.article');
$(".movethis").detach().insertBefore(prev);
});
$(".movedown").click(function(){
var next = $(".movethis").next('.article');
$(".movethis").detach().insertAfter(next);
});
CSS
.articles .article:nth-of-type(even)
{
color: Green;
}
.articles .article:nth-of-type(odd)
{
color: Red;
}
i have a Java Server page to add a form. When we click on add then the whole page is enable to add fields and save.
And when we click on edit the page is enable as usual, but i want when we click on edit button the whole page should be disable...and i can not define disability in every fields one by one.
i have to do disable the whole page in single command...i am using eclipse...what should i do ???
Thank you in advance...
This is my code of add form.
<div id="content">
<section widget-grid id="widget-grid">
<div class="row">
<article class="col-sm-12">
<div jarvis-widget id="standard-datatable-widget" data-widget-color="sttropaz" data-widget-editbutton="false" data-widget-deletebutton="false">
<header>
<span class="widget-icon"> <i class="fa fa-table"></i></span>
<span><state-breadcrumbs></state-breadcrumbs></span>
</header>
<div role="content">
<div class="widget-body">
<div class="dataTables_wrapper for-inline dt-bootstrap no-footer ui-corner-all" st-table="displayedCollection" st-safe-src="rowCollection">
<form
.......
</form>
</div>
</div>
</div>
</div>
</article>
</div>
</section>
</div>
and this is my Java Script code to edit...
$scope.editRow = function(leaveRequest) {
if (leaveRequest.action == 0) {
$state.go('app.hrms.hr.leavereq.edit', {
requestId : leaveRequest.leaveRequestId
});
} else if (leaveRequest.action == 1) {
logger.logError("Cannot Edit This Approved Leave Request");
} else {
logger.logError("Cannot Edit This Cancelled Leave Request");
}
};
I am using bs-tabs + AngularJS
Code is as follows:
<div bs-tabs>
<div data-title="Tab1">
....
</div>
<div data-title="Tab2">
....
</div>
<div data-title="Tab3">
....
</div>
</div>
I need to hide these tabs dynamically based on some event, say for example:
if hidden==true then hide it
i.e.
<div data-title="Tab1" ng-if="hidden">
....
</div>
<div data-title="Tab2">
....
</div>
<div data-title="Tab3">
....
</div>
<input type="button" ng-click="hideTab()" />
$scope.hidden = true;
$scope.hideTab = function(){
$scope.hidden = false;
}
Initially hidden is set to true, which loads all three tabs. Later user triggers a click event which changes hidden to false resulting in tab1 to be hidden but Tab1 is not hiding.
Is there anyway we can hide bs-tabs dynamically?
Thanks in Advance
I've built a UI card with a share button. Upon tapping the share button, a share sheet shows up above the card itself.
This card will live in a grid of other such cards so the "share" button should trigger only the share sheet for the current card
I have a Save button which should also fire another sheet, but it doesnt seem to be working.
I've built this demo (http://jsfiddle.net/8hed8yrd/11/) with the share sheet working. I cant seem to get a save sheet to work. Any pointers?
Note: Demo doesn't have save sheet to avoid confusion in code.
<div class="grid">
<div id="card">
<div class="hero_text hero_small">TITLE</div>
<div class="subtext">SUBTITLES</div>
<div class="toggleLink explore_text"><span class="icons">SHARE</span>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span>
</div>
<div class="share_sheet">
<div class="share_this">SHARE THIS IMAGE</div>
<div class="share_close">CLOSE</div>
</div>
</div>
<div>
jQuery(document).on("click", ".toggleLink", function () {
jQuery(this).next('.share_sheet').fadeIn('fast');
return false;
});
jQuery(document).on("click", ".share_sheet", function () {
jQuery(this).fadeOut('fast');
});
The problem is that you use jQuery(this).next('.share_sheet'). The second toggleLink SAVE have a share_sheet div right after itself, but the SHARE button doesn't. Thats why jquery can't found the div. Use siblings instead of next if you want to found the same element, or do it like i do in this fiddle: http://jsfiddle.net/PSYKLON/8hed8yrd/12
<div class="toggleLink explore_text"><span class="icons">SHARE</span></div>
<div class="share_sheet">
<div class = "share_this">SHARE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span></div>
<div class="share_sheet">
<div class = "share_this">SAVE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>