I have an array of phones that I loop through in my razor to display them one by one on button click from a partial. Each phone has a dropdown for international and domestic phone values. On change of the dropdown, I need to hide some textboxes and show some others. I got it to work showing and hiding textboxes, but the issue now is that each dropdown will change all phones sections and it should only affect the one within its div.
Here's my view:
#for (int x = 0; x < Model.Phones.Count; x++)
{
#Html.EditorFor(m => m.Phones[x], "_PhonePartial")
}
Here's the code to show the phone partial on the button click, which hides all of them except the first one:
$('.phone-wrapper').hide();
$('.phone-wrapper').first().show();
var count = 1;
$('.add-phone-wrapper').on('click', function () {
$('.phone-wrapper:eq('+ count+')').show();
count++;
});
Here's the partial phone view:
<div class="phone-wrapper">
<div class="col-md-1 domestic-phone">
#Html.TextBoxFor(m => m.AreaCode)
</div>
<div class="col-md-1 domestic-phone">
#Html.TextBoxFor(m => m.code2)
</div>
<div class="col-md-1 domestic-phone">
#Html.TextBoxFor(m => m.code3)
</div>
<div class="col-md-3 international-phone">
#Html.TextBoxFor(m => m.Internationalbox)
</div>
<div class="col-md-3">
<select class="form-control phone-selection">
<option selected="selected" value="domestic">Domestic</option>
<option value="international">International</option>
</select>
</div>
</div>
The Javascript for hiding and showing the textboxes is:
$(function () {
$(".phone-selection").on("change", function () {
var $this = $(this),
$closeDiv = $this.closest(".phone-section");
if ($this.val().toLowerCase() === "domestic") {
$closeDiv.find(".domestic-phone").show();
$closeDiv.find(".international-phone").hide();
} else {
$closeDiv.find(".domestic-phone").hide();
$closeDiv.find(".international-phone").show();
}
});
});
Any help will be greatly appreciated, thanks!
Try this
$(function () {
$(".phone-selection").on("change", function () {
var $this = $(this),
$closeDiv = $this.closest(".phone-section");
if ($this.val().toLowerCase() === "domestic") {
$(".domestic-phone").each(function () {
$(this).show();
});
$(".international-phone").each(function () {
$(this).hide();
});
} else {
$(".domestic-phone").each(function () {
$(this).hide();
});
$(".international-phone").each(function () {
$(this).show();
});
}
});
});
Related
Hi I'm running my head in to a wall.
I am trying to make a javascript/jquery event that detects when my mouse is over a button. when the mouse is over the button I want a tooltip containing the required message from the input that still needs to be filled out. I want it to only be the last required message and I want the message to change until there are no more required to fill out.
This is what I have tried so far.
my Razor cshtml
...Irrelevant html code
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "col-form-label col-md-12" })
</div>
<div class="col-sm-6">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control",title = Global.ToolTipName, data_toggle = "tooltip" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-6">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-4">
#Html.LabelFor(model => model.Phone, htmlAttributes: new { #class = "col-form-label col-md-12" })
</div>
<div class="col-sm-6">
#Html.EditorFor(model => model.Phone, new { htmlAttributes = new { #class = "form-control", title = Global.ToolTipPhone, data_toggle = "tooltip" } })
#Html.ValidationMessageFor(model => model.Phone, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group form-group-sm col-sm-12">
<div class="row">
<div class="col-sm-12">
<input id="Send" type="submit" value="#Global.btnSend" title = "Not Implemented Yet!" data_toggle = "tooltip" class="btn btn-default" />
</div>
</div>
</div>
...Irrelevant html code
and my script looks like this
<script type="text/javascript">
$(document).on('mouseenter', '#Send', function () {
var allinput = $('input[data-val-required]').get();
allinput.forEach(item => this.attr('data-original-title', item.title));//<--- tried this doesn't seem to work.
//allinput.forEach(item => this.attr('data-original-title', item.title).tooltip('fixTitle').tooltip('show')); <--- and tried this didn't work either
//allinput.forEach(item => this.attr('title', item.title).tooltip('fixTitle').tooltip('show'));<--- then I tried this didn't work either
$(this).tooltip('show');
});
$(document).on('mouseleave', '#Send', function () {
$(this).tooltip('hide');
});
</script>
So I am at a loss where I went wrong here. a pointer to the right direction or a little help here would be appreciated, Even telling me if I am Far off my mark or very close to would also be considered a big help.
with the help of CodeThing I've produced a working example of what I wanted to do.
$(document).on('mouseenter', '#Send', function () {
var allinput = $('input[data-val-required]').get();
var lastval = '';
$.each(allinput, function () {
if ($(this).val() == '') {
var forName = this.id;
var closestName = "label[for='" + forName + "']";
lastval += $(this.parentNode.parentNode).find(closestName).text() +", ";
}
});
lastval = "Need to fill out these fields: " + lastval
$(this).attr('title', lastval).tooltip('fixTitle').tooltip('show');
});
$(document).on('mouseleave', '#Send', function () {
$(this).tooltip('hide');
});
However this only works in Firefox. I really need this also to work in both Edge and Chrome.
In that case, try the below code and add data-html="true" attribute to send button. It display all blank fields tooltip on new line in send buttons tooltip.
$(document).on('mouseenter', '#Send', function () {
var allinput = $('input[data-val-required]').get();
var lastval = '';
$.each(allinput, function() {
if($(this).val() == '') lastval += $(this).attr('title')+'<br />';
});
$(this).attr('title', lastval).tooltip('fixTitle').tooltip('show');
});
$(document).on('mouseleave', '#Send', function () {
$(this).tooltip('hide');
});
I have a dropdown, when i select an item its categoryId is assigned to textbox. Then i Have 2 checkboxes 'IsAnonymous' and 'ShowReport'. I want to implement that is the value in textbox is 1 then both checkbox will be visible and when value will be 2 then 'ShowReport' checkbox must be hidden.
javascript
var ReportDiv = $('#ReportDiv');
$('#cmbCategories').on('change', function () {
if ($(this).val() == '1') {
ReportDiv.hide();
}
else {
ReportDiv.show();
}
});
View
#Html.DropDownListFor(p => p.PollSurveyId, Model.PollSurveyDetails, "Select Poll/Survey", new { #class = "form-control", required = "required", #id= "DDPollName" })
#Html.TextAreaFor(p => p.CategoryID, new {id= "cmbCategories" })
<div class="form-group">
#Html.Label("Is Anonymous")
#Html.CheckBoxFor(p => p.IsAnonymous)
</div>
</div>
<div class="col-lg-3">
<div class="form-group" id="ReportDiv">
#Html.Label("Show Report")
#Html.CheckBoxFor(p => p.ShowReport, new { id= "CBReport" })
</div>
<!-- /.col-lg-6 (nested) -->
</div>
Added a picture to give idea of my page
I have a MVC page that show and hide some text-boxes depend on drop Down value change using Jquery. The page is working by itself but when I put under the menu when I go to other menu option and comeback to this it shows all the text boxes. this is my Jquery code in the view:
function toggleDIvDisplay(e) {
if (!e)
e = '';
$('button.search').toggle(e != '');
$('#divAppName').toggle(e == 1);
$('#divSSN').toggle(e == 2);
$('#divRemref').toggle(e == 3);
}
$(document).ready(function () {
$('button.search').click(function (evt) {
evt.preventDefault();
var container = $('#customer-results');
container.hide();
$('table tbody', container).empty();
var searchMethod = $('##Html.IdFor(model => model.SearchMethod)').val();
switch (searchMethod) {
case '1':
getByFirstNameAndLastName();
break;
case '2':
getBySSN();
break;
case '3':
getByRemRef();
break;
default:
return false;
}
});
toggleDIvDisplay();
});
This is my Textboxes and search button in view:
<div class="clearfix" style="margin-top:20px">
Search By:
#Html.DropDownListFor(model => model.SearchMethod, Model.AvailableSearchMethods, new { onchange = "toggleDIvDisplay(this.value)" })
</div>
<div id="divAppName" class="pull-left" style="margin-top:35px">
First Name:
#Html.TextBoxFor(model => model.FirstName)
Last Name:
#Html.TextBoxFor(model => model.LastName)
</div>
<div id="divSSN" class="pull-left" style="margin-top:35px">
SSN:
#Html.TextBoxFor(model => model.SSN)
</div>
<div id="divRemref" class="pull-left" style="margin-top:35px">
RemRef:
#Html.TextBoxFor(model => model.RemoteRefNumber)
</div>
<div class="pull-left" style="margin-top:35px;margin-left:50px">
<button class="btn btn-success search pull-left">Search</button>
</div>
and this is the link in the menu:
<li>#Html.ActionLink("Application Document Lookup", "Search", "Doc")</li>
var searchMethod = $('##Html.IdFor(model => model.SearchMethod)').val();
the #Html is rendered on the server side (MVC).
Only after it is rendered and sent to your browser, your jQuery can see it.
Eventually, if you Inspect your page you will not find anything with an Id like this.
it should be $("#ID OF THE DROP DOWN HERE")
On the otherhand, jQuery cannot run the functions on your Model, so you have to either your View Or your jQuery to do so, but not both.
I would like some help with this. I have a Kendo Listview:
<form id="frmChk">
#(Html.Kendo().ListView<thieme_ws3.Models.QaTestModel>(Model)
.Name("testList")
.TagName("fieldset")
.HtmlAttributes(new { #class = "panel panel-primary panel-body" })
.ClientTemplateId("template")
)
<br />
</form>
Where I have added checkboxes to the information brought in:
<script type="text/x-kendo-tmpl" id="template">
<div class="col-md-5">
#Html.CheckBox("cb_#:Id#", new { #class = ".item", id = "cb_#:Id#" }) #=Name#
</div>
</script>
I have added a select all checkbox:
<label id="checkAll" class="checkbox">
<input type="checkbox" id="all" name="all" /> Select all
</label>
And added this to fire it:
$('#all').on('click', function (e) {
//alert("I'm clicked!" + this.checked);
var testList = $("#testList").data("kendoListView");
var dataItems = testList.dataItems();
//do thought to wrap the loop in a do while, caused the browser to stop
{
for (i = 0; i <= dataItems.length - 1; i++) {
//alert(dataItems[i].id);
var cb = $("#cb_" + dataItems[i].Id);
if (this.checked) {
cb.attr("checked", "checked");
}
else {
(cb.removeAttr("checked"));
}
}
}
})
It will work once, checking all boxes and unchecking all boxes but when I check the select all again, it will not select the others. I am certain it is something small I am overlooking, please help.
Try this instead (assuming the checkboxes are descendants of #testlist):
$('#all').on('change', function (e) {
var isChecked = $(this).prop('checked');
$("#testList").find('input[type="checkbox"]').prop('checked', isChecked);
})
I am currently working on a data input form that will take as in input some time parameters. As a result, I desire to use a jquery timepicker in these fields, within the itemview. This is my first time attempting to interact with the internal elements of an itemview and assistance would be greatly appreciated.
This is what i have attempted so far.
<div class="grid_15 top-m">
<div class="grid_16"><h3>Class Sessions</h3> <i>(eg. Period 1, Period 2 etc)</i></div>
<div class="grid_16">
<div id="sessionlist"></div>
<br/><br/>
</div>
<div>
<a id="addses" class="top-m" href="#">Add</a>
<a id="removeses" class="top-m" href="#" style="display:none" >Remove</a>
</div>
</div>
The add and remove buttons remove and add itemviews as desired.
<script type="text/html" id="SFTemplate">
<div class="editor-label">
<label for="Sessions[{{ count }}].Name">Session Name</label>
</div>
<div class="editor-field">
<input type="textbox" id="Sessions[{{ count }}].Name" name="Sessions[{{ count }}].Name"/>
</div>
<div class="editor-label">
<label for="Sessions[{{ count }}].StatTime">Session Start Time</label>
</div>
<div class="editor-field">
<input type="textbox" id="Sessions[{{ count }}].StartTime" name="Sessions[{{ count }}].StartTime"/>
</div>
<div class="editor-label">
<label for="Sessions[{{ count }}].EndTime">Session End Time</label>
</div>
<div class="editor-field">
<input type="textbox" id="Sessions[{{ count }}].EndTime" name="Sessions[{{ count }}].EndTime"/>
</div>
That is the template for the itemview
<script>
window.CreateSession = (function () {
var CreateSession = {};
var ses = new Array();
//The next of kin item list view
SessionItemView = Backbone.View.extend({
tagName: 'div',
initialize: function () {
//bindall
_.bindAll(this, 'render');
this.template = _.template($('#SFTemplate').html());
this.render();
},
render: function () {
$(this.el).html(this.template({
count: ses.length
})).fadeIn();
return this;
},
remove: function () {
$(this.el).fadeOut('fast', function () {
$(this).remove();
});
return false;
},
**events: {
"click input[type=textbox]": "placetimepicker"
},
placetimepicker: function (e) {
e.el.timepicker({ ampm: true,
hourMin: 8,
hourMax: 16
});**
}
});
function sesUpdated() {
if (ses.length > 0) {
$('#removeses').fadeIn();
}
else {
$('#removeses').fadeOut();
}
}
CreateSession.Init = function () {
$('#addses').click(function () {
var item = new SessionItemView();
ses.push(item);
$('#sessionlist').append($(item.el).fadeIn('fast'));
sesUpdated();
return false;
});
$('#removeses').click(function () {
if (ses.length > 0) {
ses.pop().remove();
}
sesUpdated();
return false;
});
};
return CreateSession;
})(this, this.document);
$(function () {
CreateSession.Init();
});
After more research and trial and error, I found where my code was lacking.
**events: {
"click .timepicker": "placetimepicker"
},
placetimepicker: function () {
this.$(".timepicker").timepicker({ ampm: true,
hourMin: 8,
hourMax: 16
});**
}
});
I put a class timepicker on the textboxes and using the 'this' keyword I could append the jquery code unto the entire itemview.
Backbone is cool. :-D
It's difficult to determine your question. What I think your asking is why the timepicker is not initializing for your inputs. Try wrapping your event element in jquery $(e.el) since your timepicker is a jquery plugin:
placetimepicker: function (e) {
$(e.el).timepicker({ ampm: true,
hourMin: 8,
hourMax: 16
});