I'm beginning with jQuery and using it with twig/Symfony 2.
I have a little problem : when I use this in a loop :
<a href="#" id="dialog_link"><button type="button" id="button_id" id-uservalue="{{user.id}}" class="btn btn-danger btn-xs">
Delete
</button></a>
Only the 1st Button works, the other just dont. I checked the value of {{user.id}} it changes.
This is the jQuery code :
click : function() {
var id_user = $('#button_id').attr('id-uservalue');
Thanks a lot, internet friends !
Since id is unique, you need to use class instead:
<a href="#" id="dialog_link"><button type="button" class="button_id" id-uservalue="{{user.id}}" class="btn btn-danger btn-xs">
then you can use:
click : function() {
var id_user = $(this).attr('id-uservalue');
Related
I have four buttons:
<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>
And I want to capture the value of the button clicked so that I may add it later with another button and add them together.
I added this for the JS:
var inputYardSize = $("#button-yardSize").on("click", function(){
$("#button-yardSize").val();
console.log(inputYardSize);
});
I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?
First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.
In the event listener you can use this to refer to the button that was clicked.
You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.
$(".button-yardSize").on("click", function() {
var inputYardSize = $(this).val();
console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>
EDIT: You should use ID for unique elements and class for repeating element.
So if you would replace the ID with class on the button, the code should look like this:
Remove the declaration from the beginning and instead use it to store the values inside the click function.
In this way, you will have the value of the clicked button with the specified class.
$('.button-yardSize').on('click', function(){
var inputYardSize = $(this).val();
console.log(inputYardSize);
})
The id of each element has to be unique
<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>
The JS function is incorrect, you need a click handler which will log the button value
$("#button-yardSize1").on("click", function(){
inputYardSize=$("#button-yardSize1").val();
console.log(inputYardSize);
});
How to disable a button on click and replace that button with another button with different function using AngularJS?
The following is my button,
<button type="submit" class="btn btn-small btn-default"
ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">
<span class="glyphicon glyphicon-edit"></span> Edit Setting</button>
you can use a state setting, say $scope.showFirstButton=true to control when to show the submit button:
<button ng-show="showFirstButton" type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || secondEdit" ng-click="editSetting()">Edit Setting</button>
and another button, showing them alternatively:
<button ng-show="!showFirstButton" type="submit" class="btn btn-small btn-default" ng-click="doSomethingElse()">Seccond Button</button>
In the controller method $scope.editSetting() you change the value of the state: $scope.showFirstButton = !$scope.showFirstButton'.
Edit: if you need to revert the state of the buttons, do the same thing in the second method:
$scope.doSomethingElse = function(){
//some cool things happen here, and:
$scope.showFirstButton = !$scope.showFirstButton
}
and this will get back the first button and hide the second.
well guys i need to know how give a button a name like dont paye attention to the link it's not that necessary:
<button class="btn btn-success pull-right" name="next">Suivant</button>
here what i did in javascript but i need to add the attribute "name" with value "next" in "q" button
function(a){a.fn.smartWizard=function(m){var c=a.extend({},a.fn.smartWizard.defaults,m),x=arguments;
return this.each(function(){function C(){var e=b.children("div");
b.children("ul").addClass("anchor");
e.addClass("content");
n=a("<div>Loading</div>").addClass("loader");
k=a("<div></div>").addClass("actionBar");
p=a("<div></div>").addClass("stepContainer");
q=a("<a>"+c.labelNext+"</a>").attr("href","#").addClass("btn btn-default pull-right");
r=a("<a>"+c.labelPrevious+"</a>").attr("href","#").addClass("btn btn-default pull-left");
s=a("<a>"+c.labelFinish+"</a>").attr("href","#").addClass("btn btn-success pull-right");
c.errorSteps&&0<c.errorSteps.length&&a.each(c.errorSteps,function(a,b){y(b,!0)});
p.append(e);
k.append(n);
b.append(p);
b.append(k);
c.includeFinishButton&&k.append(s);
k.append(q).append(r);
How about using the attr() function like you use for defining a href:
$('#yourButton').attr('name', 'yourName');
To create a button on the fly:
var btn = $('<button/>').attr('name', 'next').addClass('btn btn-success pull-right');
Which results in the following HTML:
<button class="btn btn-success pull-right" name="next"></button>
The below code generates a json string on the click of some buttons.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
var output = $(".btn").click(function() {
$(this).toggleClass('active');
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
};
if (!output.Studios.length) {
output.Studios = $('#btnStudios button').map(function() {
return $(this).val();
}).get()
$('.list').html(JSON.stringify(output));
});
Basically what i am looking for is a timer which refreshes for 1 second everytime a button is clicked and then generates the json string based on the button selection.
I used the setInterval() function but that did not help.
How would i go about this?
Thanks in advance.
I didn't fully understand your question.
However, based on the code, I assume you want to show a JSON-string based on which buttons have the .active class?
Your code contained syntax errors.
I created a quick JSfiddle with what I think you wanted.
However, I have made no use of setTimeout since I couldn't come up with valid use case.
Feel free to provide us with more info and I'll improve my answer!
EDIT:
Okay, so you want to wait 1sec after the click.
I updated the JSfiddle.
EDIT²:
I'd also use clearTimeout so clicks that happened while you are already waiting 1 sec are ignored.
As seen in this JSfiddle.
i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.
Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here