I have some tabs that are used for my apps navigation. Each tab displays a different data table and is a different route. However, when a user selects some filters and an api call is made, the tab that is currently selected goes to the default and doesn't stay with the current tab after the data is loaded.
How can I keep the current tab selected after an api call to the backend?
I thought about either session or localStorage, but I'm not sure how I would target the checked attribute on the input field and how to restore it after the reload/refresh.
Here's some a sample of my template code with the tabs:
<div class="tab">
<input
type="radio"
checked
name="css-tabs"
id="tab-1"
class="tab-switch"
/>
<label
for="tab-1"
class="tab-label"
#click="$router.push('/route-1')"
>
Route - 1</label
>
<div class="tab-content">
<router-view :key="$route.path" />
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch" />
<label
for="tab-2"
class="tab-label"
#click="$router.push('/route-2')"
>
Route-2</label
>
<div class="tab-content">
<router-view :key="$route.path" />
</div>
</div>
I solved this by refactoring the tab code in the template
<div class="tabs">
<div class="tab" v-for="(tab, index) in tabs" :key="tab.id">
<input
type="radio"
:name="tab.name"
:id="tab.id"
class="tab-switch"
:checked="tab.checked"
#change="updatedActiveTab(index)"
/>
<label
:for="tab.id"
class="tab-label"
#click="$router.push(tab.path)"
>
{{ tab.label }}</label
>
<div class="tab-content">
<router-view :key="$route.path" />
</div>
And then created a function to change the checked property to the selected tab as true and all others to false.
tabs.value.forEach((elem, idx) => {
elem.checked = idx == index;
});
sessionStorage.tabs = JSON.stringify(tabs.value);
}
Related
How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
I have the following code`
{{# each item}}
<p class="center">
<input type="checkbox" checked="checked" id="basiccbox" name={{id}} />
<label for="basiccbox"> </label>
</p>
{{/each}}
Multiple check boxes is now rendered. However, when i click any of the box, only the first check box toggles between the true or false states. This happens because of the
for="basiccbox"
and
id="basiccbox"
i.e all box that is rendered have the same Id. How do i generate unique ids or how does one deal with such a situation.
`
usually you should assign the item._id to id of checkbox tag. below is the code to solve your issue.
{{# each item}}
<p class="center">
<input type="checkbox" checked="checked" id={{_id}} name={{id}} />
<label for="basiccbox"> </label>
</p>
{{/each}}
It is good to bind the document id somewhere for tag element, because you can use the same id to do DB operations as well.
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
please see this html codes :
<!-- PAGE - 5 -->
<div class="section cc_content_5" id="page5" style="display: none;">
<div class="pad_content">
<div class="right grid_1">
<h1>
Contact Address
</h1>
<img src="Images/photo_5.jpg" alt=""><br />
<br />
<strong>The Companyname Inc</strong> 8901 Marmora Road,<br />
Glasgow, D04 89GR.<br />
Telephone: +1 800 123 1234<br />
Fax: +1 800 123 1234<br />
E-mail: www.copanyname.com<br />
</div>
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<form id="ajax-contact-form" action="javascript:alert('success!');">
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
E-Mail:</label><input class="textbox" name="email" value="" type="text">
<label>
Subject:</label><input class="textbox" name="subject" value="" type="text">
<label>
Comments:</label><textarea class="textbox" name="message" rows="5" cols="25"></textarea>
<label>
Captcha</label><img src="Images/captcha.php" style="margin: 3px 0px; width: 200px;
height: 32px;">
<div class=" clear">
</div>
<label>
</label><input class="textbox" name="capthca" value="" type="text">
<div class=" clear">
</div>
<label>
</label><input class="pin" name="submit" value="Submit" type="submit">
</form>
<div class="clear">
</div>
</div>
</div>
<div class="clear">
</div>
</div>
</div>
and their script :
<script type="text/javascript">
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
i really want to know how can i put page 5 in my asp.net web form?
as you we can not have a form inside default asp.net web page form.
so what can i do about page 5?
thanks in advance
You can not have two forms inside an asp.net page and both work on code behind.
The alternative that you have.
Place the second form before or after the asp.net form
Do not set second form, just read the input data that you interesting on code behind.
Dynamically create the form at the end of the page using the javascript and post it.
Because here I see that you post to php and I think that you like to keep the old code with asp.net, add them after the closing form of the asp.net form.
<form id="AspForm" runat="server">
...
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
...
</form>
More Extreme
Because you all ready use javascript you can do this trick. Copy and paste all the content in a form at the end of the page and post it.
<form id="AspForm" runat="server">
...
<div id="ajax-contact-infos" >
<label>
Name:</label><input class="textbox" name="name" value="" type="text">
<label>
<input class="pin" name="submit" value="Submit"
type="button" onclick="SubmitThisForm();return false;" >
...
</div>
</form>
<form id="ajax-contact-form" method="post" action="contact.php" >
<div id="PlaceOnMe" ></div>
</form>
and on javascript copy it just before post it as
<script type="text/javascript">
function SubmitThisForm()
{
// here I copy (doublicate) the content of the data that I like to post
// in the form at the end of the page and outside the asp.net
jQuery("#PlaceOnMe").html(jQuery("#ajax-contact-infos"));
// Now we submit it as its your old code, with out change anything
jQuery("#ajax-contact-form").submit();
}
// here is the old code.
$(document).ready(function () {
$("#ajax-contact-form").submit(function () {
var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function (msg) {
if (msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{ result = '<div class="notification_ok">Your message has been sent. Thank you!<br /> send another mail</div>'; $("#fields").hide(); } else
{ result = msg; } $("#note").html(result);
}
}); return false;
});
});
function freset()
{ $("#note").html(''); document.getElementById('ajax-contact-form').reset(); $("#fields").show(); }
</script>
All this is with the minimum changes. You can how ever make optimization, but this is the general idea.
You have a number of options; nesting the forms is the worst as it's something that will/wont work depending on the browser.
You can as #Aristos has mentioned, have one form after the other. This is a good solution but is not necessarily the best in terms of your site design.
The second is that you could embed your contact form on a normal HTML page, then include it on your parent page in an iframe or similar. This would get around the issues of nested forms, but might not give you the behaviour you want in terms of user experience.
The third is that your contact form would be better suited to being a User Control
You would put all of your contact form fields into the ascx file, and handle the button click for the submit in this control. After processing this submit, you can replace the user control with a simple message thanking the user for their input.
You can also put all of the required form validation in this. Your ASCX might look something like:
<asp:Panel runat="server" id="ContactPanel">
<div class="left grid_2">
<h1>
Contact Form
</h1>
<div id="note">
</div>
<div id="fields">
<label for="<%=InputContactName.ClientID%>">Name:</label>
<asp:TextBox runat="server" id="InputContactName" value="" />
<!-- Rest of Form goes here -->
<div class=" clear">
</div>
<asp:Button runat="server" id="ContactFormSubmit" OnClick="ContactFormSubmit_Click" Text="Send Feedback" />
<label> </label><input class="pin" name="submit" value="Submit" type="submit">
<div class="clear"></div>
</div>
</div>
</div>
</asp:Panel>
<asp:Panel runat="server" id="ThanksPanel" Visible="false">
<p>Thank you for your feedback. We'll try not to ignore it. But it is Friday. So we might. At least until Monday.</p>
</asp:Panel>
In your ContactFormSubmit_Click button you can just grab the text from your contact form, hide the ContactPanel, and show the ThanksPanel.
Really simple, and encapsulated away in a user control.