I'm trying to pass some value from button, which is located in HTML document, to the Javascript function, which is located in other document, but it doesn't work. I also tried with getElementById(), but it still didn't work. What's the problem? I would appreciate any help. Thanks in advance!
index.html
<script src="../scripts/appearances_2.js"></script>
/...
<div id="appearances_2_chart">
<div>
<button id="starting" onclick="update_view('starting')">Starting players</button>
<button id="substitution" onclick="update_view('substitution')">Substitution players</button>
</div>
</div>
/...
appearances_2.js
document.addEventListener('DOMContentLoaded', function(e) {
//...
function update_view(id) {
d3.csv("../../data/appearances.csv", function(data) {
data.sort(function(b, a) {
if (id == 'starting')
{
return a.starting - b.starting;
}
else if (id == 'substitution')
{
return a.substitution - b.substitution;
}
});
/...
You can use, event as an object to be passed and access the value as (in order to get the id),
event.target.getAttribute('id')
You need to modify the button code as,
<button id="starting" onclick="update_view(event)">Starting players</button>
and in function,
update_view(event){....}
and access the id using the target object as mentioned in the first code.
Update:-
function update_view(event) {
d3.csv("../../data/appearances.csv", function (data) {
data.sort(function (b, a) {
if (event.target.getAttribute('id') === 'starting') {
return a.starting - b.starting;
}
else if (event.target.getAttribute('id') === 'substitution') {
return a.substitution - b.substitution;
}
})
})
};
<button id="starting" onclick="update_view(event)">Starting players</button>
<button id="substitution" onclick="update_view(event)">Substitution players</button>
Related
Using asp.net-core I made a "PopUp.cshtml" file:
<div class="popUpDeleteBackground" hidden>
<div class="popUpDelete">
<h3>Are you sure you want to delete this?</h3>
<p>This action is irreversible</p>
<div class="popUpDeleteButtonDiv">
<button class="btn deleteConfirm">JA</button>
<button class="btn" onclick="PopUpRemove()">NEE</button>
</div>
</div>
</div>
<script>
function PopUpShow(licensePlate) {
$(".popUpDeleteBackground").attr("hidden", false);
$(".deleteConfirm").on("click", () => {
Delete(licensePlate);
PopUpRemove();
});
}
function PopUpRemove() {
$(".popUpDeleteBackground").attr("hidden", true);
}
</script>
I want this popup partial to be used in multiple pages of the website. The problem is that the delete functions are different for each page.
So my question is: Is there a way to pass a JavaScript function to a partial view?
What I've tried so far is passing a string with #await Html.PartialAsync("_ConfirmPopUp", "functionToRun()"); and then tried to run it with <script>#Model</script>.
But I got an error message in the console saying: "Uncaught SyntaxError: Unexpected token '&'".
You are passing functionToRun() as a string to the Model of the view. Instead just pass the name of the function without the parenthesis - functionToRun.
Then in the code dont write <script>#Model</script>. Instead just put the name of the calling function dynamically when the page loads like this:
<script>
function PopUpShow(licensePlate) {
$(".popUpDeleteBackground").attr("hidden", false);
$(".deleteConfirm").on("click", () => {
//Delete(licensePlate);
#string.Format("{0}();", Model)
PopUpRemove();
});
}
function PopUpRemove() {
$(".popUpDeleteBackground").attr("hidden", true);
}
</script>
This will render the name of the function that would be called on click of the .deleteConfirm element. Note the #string.Format("{0}();", Model) code instead of the Delete function call.
I try to execute JS function in hbs for displaying html depend on data from MongoDB. And now i cant put handlebars inside handlebars
{{#if_eq author '{{ ../user._id }}' }}
читать больше
<form action="/article/{{ this._id }}?_method=DELETE" method="post" class="more">
<button type="submit" name="button">удалить</button>
</form>
{{/if_eq}}
and:
hbs.handlebars.registerHelper('if_eq', function(a, b, opts) {
if (a == b) {
return opts.fn(this);
} else {
return opts.inverse(this);
}
});
It doesnt work. How handlebars-helper can help in this situation?
I also tried to execute function and put there variable:
hbs.handlebars.registerHelper('isApply', function(req, opts) {
let user = req.user.name;
if (this.name === 'user') {
console.log(user);
return opts.fn(this);
} else {
return opts.inverse(this);
}
});
and do this in my template:
{{#isApply}}
читать больше
<form action="/article/{{ this._id }}?_method=DELETE" method="post" class="more">
<button type="submit" name="button">удалить</button>
</form>
{{/isApply}}
But it also doesnt work, cuz user: undefined.
Please can you help to find a solution of this issue?
I have an HTML template that's stored in sql as follows
<script id="Accounttmpl" type="text/x-jsrender">
<div class="authenticated" id="authenticated" >
<span class="loginWelcome">Hi </span>
<span class="loginWelcome">{{>FirstName}}</span>
<span id="Test" style="display:none">{{>(Verified)}} </span>
</div>
</script>
So, in my code in Javascript the template above gets called. However I want to add an if statement where if verified == 'false' it must display a message saying not verified.
This is my Javascript:
Success: function (result, context) {
if (result) {
$(context).html($('#Accounttmpl').render(result));
} else {
$(context).html($('#Accounttmpl').render({}));
}
}
So, in my result I get back the "verified" details, so what I tried is the following:
Success: function (result, context) {
if (result) {
if(result.Verified === 'false'){
document.getElementById("Test").html("not verified")} //however it doesn't find the "Test" id and throws an error that it cant read property of null
$(context).html($('#Accounttmpl').render(result));
} else {
$(context).html($('#Accounttmpl').render({}));
}
}
}
So, my question is how do I check the #Accounttmpl for the "Test" id so that I can add the if statement to it?
The reason why you get null is because you are trying to get the id of Test before you add it to the DOM.
Where you have:
if(result.Verified === 'false'){
document.getElementById("Test").html("not verified")
}
$(context).html($('#Accounttmpl').render(result));
Change the order round:
$(context).html($('#Accounttmpl').render(result));
if(result.Verified === 'false'){
document.getElementById("Test").html("not verified")
}
Also, you are mixing JavaScript with jQuery here:
document.getElementById("Test").html("not verified")
Either do:
document.getElementById("Test").textContent = "not verified";
Or
$("#Test").html("not verified")
This is my HTML:
<button type="button" class="btn btn-primary" ng-hide="ctrl.userProfile.following">Follow</button>
<button type="button" class="btn btn-primary" ng-show="ctrl.userProfile.following">Unfollow</button>
So basically, I want to hide the "Follow" button and show the "Unfollow" button if ctrl.userProfile.following is true, and vise-versa.
This is my back-end:
self.userProfile = {};
function fetchUserProfile() {
$http.get('/users/' + username)
.then(function(response) {
self.userProfile = response.data;
}, function(response) {
self.cerrorMessages = BaseService.accessErrors(response.data);
});
};
fetchUserProfile();
So I get the userProfile and then update self.userProfile with the watching variable (this occurs when I do self.userProfile = response.data. With that said, is there a way for me to tell HTML to not display the buttons until self.userProfile is filled with watching variable?
Create a userProfile.ready flag and use that to control the showing of the Follow and Unfollow buttons.
HTML
<div ng-show="ctrl.userProfile.ready">
<button type="button" ng-hide="ctrl.userProfile.following">Follow</button>
<button type="button" ng-show="ctrl.userProfile.following">Unfollow</button>
</div>
JS
self.userProfile = {};
self.userProfile.ready = false;
function fetchUserProfile() {
self.userProfile.ready = false;
$http.get('/users/' + username)
.then(function(response) {
self.userProfile = response.data;
self.userProfile.ready = true;
}, function(error) {
self.cerrorMessages = BaseService.accessErrors(error.data);
});
};
fetchUserProfile();
There are a few ways of doing this. Here is one:
If you start with an empty object, and are waiting for the promise to resolve, you can set a scope variable that checks the length of the object.
e.g.
self.userProfileLength = Object.keys(self.userProfile).length;
And in the view, do: ng-if="ctrl.userProfileLength"
(Note: Or use ng-show if you want to keep the element in the DOM)
Object.keys returns the keys from the object in an array. Anything over a length of 0 is a truthy value so it will pass the ng-if condition.
I want to create an like button like twitter, i used from this code:
$(document).ready(function(){
$('.btn-follow').on('mouseover', function(e){
if ($(this).hasClass('following')){
$(this).removeClass('btn-primary').addClass('btn-danger').text('UnFollow');
}
})
$('.btn-follow').on('mouseleave',function(e){
if ($(this).hasClass('following')){
$(this).text('Following').removeClass('btn-danger').addClass('btn-primary');
}
})
$('.btn-follow').on('click',function(e){
$(this).toggleClass('following follow')
if ($(this).hasClass('follow')){
alert('unfollow')
$(this).text('Follow').removeClass('btn-danger')
}else{
alert('follow')
$(this).text('Following')
}
})
});
and in html i have this:
<button class="btn btn-primary btn-follow following">Following</button>
<br />
<br />
<button class="btn btn-follow follow">Follow</button>
but i think it 's very dirty code and have some bugs. How i can fix this code?
Ok the main problem was css specificity not letting btn-danger class take any effect over btn-success.
So as a solution i used an empty class that i made up. To track if the button is being followed or not.
Whenever i added btn-success i added following class. And through class, as you did, i was able to track the state of the button.
With bootstrap!!!
http://jsfiddle.net/vjZRA/1/
Without bootstrap:http://jsfiddle.net/vjZRA/
Code Below:
var btn = $('.btn');
btn.click(h);
btn.hover(hin, hout);
function hin() {
if (btn.hasClass('follow')) {
btn.text('Stop Following');
btn.removeClass('btn-success');
btn.addClass('btn-danger');
} else {
btn.addClass('btn-primary');
}
}
function hout() {
if (btn.hasClass('follow')) {
btn.text('Following');
btn.removeClass('btn-danger');
btn.addClass('btn-success follow');
}
btn.removeClass('btn-primary');
}
function h() {
if (btn.hasClass('follow')) {
btn.removeClass('btn-success follow');
btn.text('Follow');
btn.removeClass('btn-danger');
} else {
btn.text('Following');
btn.addClass('btn-success follow');
}
}
and then add css in style tag or wherever you want
.follow{}