Develop Reference

Why is ASP.NET Core stripping out onclick tag/event in a partial view?

This is driving me up the wall - any help much needed and appreciated.
I have a partial view _Policies.cshtml with a button that has an onclick tag that calls the JavaScript function changeCostCentreNumber():
<div class="row">
#if (User.Claims.Any(x => x.Value.Equals(Site.Infrastructure.Common.MemberType.IsScheme.ToString())))
{
<div class="form-group">
<div class="col-md-4">
<label for="costCentreChange" class="form-label">Change scheme cost centre number</label>
<input id="costCentreChange" class="search-icon form-control" type="text" name="searchFilter" placeholder="" value="" pattern="[a-zA-Z0-9 ]+" maxlength="20"/>
</div>
<div class="col-sm-12">
<input class="btn button button-green" type="submit" id="costCentreNumberSubmitBtn" value="Submit" onclick="changeCostCentreNumber()"/>
</div>
<div class="alert-info alert" id="costCentreNumberChangeAlert" style="display:none">
The cost centre number has been updated successfully.
</div>
</div>
}
</div>
The problem is when I build and inspect the element in Chrome (or Firefox, this seems to be a framework issue) the onclick tag is just not there. If I add the tag in Dev Tools it calls the correct function and does what it's supposed to. I just don't understand why the tag is being stripped out at build time.
I've tried to move the onclick to other elements and divs, inside and outside the condition in the partial and the same behaviour repeats. There's something about this I am simply not grasping.

I am using pdf js library for representing pdf files by pdf flipbook library but search is not working here

I am using https://github.com/erayakartuna/pdf-flipbook, I want to implement search functionality for this, I did check out some other solution on stackoverflow but looks like viewer.js is customized in this library.
I would like to get any help possible on this issue.
It does finds the matches as the count shows that but it does not goes to the page when I click on next match button.
Thanks.
Previous
Next
<div id="findbarOptionsOneContainer">
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
</div>
<div id="findbarOptionsTwoContainer">
<input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96">
<label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole words</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
</div>
<div id="findbarMessageContainer">
<span id="findMsg" class="toolbarLabel"></span>
</div>
</div> <!-- findbar -->

Input group field check click handler on the entire input group

I am currently trying to make an entire Bootstrap input-group to be able to clickable so that the checkbox will be clicked when any part of the input-group is clicked, and it should be able to uncheck the checkbox as well when the input-group is clicked. The current code I have working right now is this:
$(document).ready(function(){
$('.input-group,#opt_in').click(function(){
if ($('#opt_in').is(':checked')) {
$('#opt_in').prop('checked', false);
}
else{
$('#opt_in').prop('checked', true);
}
});
});
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="opt_in" id="opt_in" value="true">
<label class="form-check-label">I CONFIRM</label>
</div>
</div>
<p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>
But for some reason that I am unaware of, it's not working. Any reason why? I'm using jQuery here but I can also use vanilla javascript. I'm just not sure where my code is freaking out!

Cannot get jQuery call right for eternicode Bootstrap datepicker

I have been trying out the eternicode/bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker). I tried out the sandbox (http://eternicode.github.io/bootstrap-datepicker/) and just wanted to use the "Component" version with "Today" highlighted.
I have two problems which I think are the same thing: 1) the date doesn't show up when you click on the glyphicon only when you click in the input space and 2) I cannot get the "Today" highight working.
I am 99% sure it is the jQuery call that is wrong. I have tried all sorts to get it to fire as per Sandbox etc but my JS/jQuery is just not up to the job.
(The timepicker (https://github.com/jdewit/bootstrap-timepicker) works fine without a jQuery launch script for now).
Part of the problem is that when I download a zip from GitHub there are two .less files both of which (I think) are Bootstrap2.
Any help gratefully recieved.
<div class="form-group col-sm-3 colFlushL">
<label class="control-label" for="zaq-timeSimple">Time</label>
<div class="input-group bootstrap-timepicker timepicker colFlush ">
<input id="timepicker1" type="text" name="arse"
class="form-control">
<span class="input-group-addon"><i
class="glyphicon glyphicon-time"></i></span>
</div>
</div>
<div class="form-group col-sm-3 colFlush" id="zaq-startDate">
<label class="control-label" for="zaq-startDate">Start Date</label>
<div class="input-group colFlush">
<input type="text" class="form-control date" name="datepicker"
data-provide="datepicker">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
Here is the latest version of my jQuery attempt which is I am 95% sure horrendous.
<script>
$('.datepicker.date').datepicker.(
{
todayHighlight: true
}
)
</script>
NB According to phpStorm date is NOT a class defined anywhere which I presume includes the .less file
PS I should have said the two date pickers on the page ARE 100% passing the value of the dates through with the form.

OK this was a typo (or more accurately newb lack of jQuery understanding!!)
$('.datepicker.date').datepicker.(
should have been
$('.datepicker.date').datepicker(
IE I stuck in an extra period. (And that cost me at least two hours! D'oh!)

jQuery validate Engine Not Work with Bootstrap Select plugin

I work with jQuery Validate Engine Plugin and bootstrap. This Plugin Worked But when I change dropdown selectbox Style using bootstrap-select plugin, validate engine not work.
HTML:
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header well" data-original-title>
<h2><i class="icon-picture"></i>Change Password</h2>
</div>
<div class="box-content">
<form action="#" id="fm">
<div class="control-group">
<label class="control-label" for="disabledInput">Email</label>
<div class="controls">
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</div>
</div>
<input type="text" name="test" id="test" class="validate[required] text-input" />
<input type="submit" name="submit" />
</form>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
JS:
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#fm").validationEngine();
});
$('select').selectpicker();
DEMO HERE : http://jsfiddle.net/Sambora/84PVv/2/
In action When we select any value in selectbox jQuery Validation Engine Not Work and Show error Box.
How do fix this problem?

I got a solution without modifying the core js file. For this we need to use validationEngine "prettySelect","usePrefix" options, and we need to add "id" to cloned element and also need to removed the "validate[required]" class from this element. The full code look likes this.
var prefix = "selectBox_";
jQuery(document).ready(function() {
// for remove bootstrap-select validation and adding id to the element with prefix
$('select').each(function() {
$(this).next('div.bootstrap-select').attr("id", prefix + this.id).removeClass("validate[required]");
});
jQuery("#registration").validationEngine('attach',{
promptPosition: "bottomLeft",
autoHidePrompt:true,
prettySelect : true,
usePrefix: prefix
});
});
It works for me. DEMO HERE : http://www.scriptlodge.com/code_demos/validationEngine/
For detail, Please go to my blog link http://www.scriptlodge.com/jquery-validationengine-not-work-with-bootstrap-select-plugin/

When bootstrap-select creates a cloned element, it uses an addClass call that copies the validate[.*] class into the new div element, and validationEngine tries to validate that.
This can be remedied by modifying the setStyle function to strip that part of the class attribute out (around line 272 of bootstrap-select.js):
this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device|validate\[.*\]/gi, ''));
Note the change is simply: |validate\[.*\] in the regular expression.
This keeps the new DIV element from being "validated" by the validationEngine script.
After adding this, validationEngine works with bootstrap-select.
I've submitted a pull request to fix this and it has been merged into the latest version on github.
You can download the updated script here:
https://raw.githubusercontent.com/silviomoreto/bootstrap-select/master/bootstrap-select.js