I have a page that contains of multiple divs, each div has an ID that comes from the database, in each div there is a like button, what i want to do is when i click on the like button to pass the ID as a parameter in my function, here is what i have tried so far:
function addLike
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myID" onClick="addLike()">
<button type="button">Like</button>
</div>
<div id="myID" onClick="addLike()">
<button type="button">Like</button>
</div>
<div id="myID" onClick="addLike()">
<button type="button">Like</button>
</div>
<div id="myID" onClick="addLike()">
<button type="button">Like</button>
</div>
<div id="myID" onClick="addLike()">
<button type="button">Like</button>
</div>
<div id="myID" onClick="addLike()">
<button type="button">Like</button>
</div>
The IDs must be unique.
Whenever you define an inline click event handler you may consider to pass the following two variables:
this: current element
event: the event object
function addLike(ele, e) {
console.log('ID: ' + ele.id);
}
<div id="myID1" onclick="addLike(this, event)">
<button type="button">Like</button>
</div>
<div id="myID2" onclick="addLike(this, event)">
<button type="button">Like</button>
</div>
<div id="myID3" onclick="addLike(this, event)">
<button type="button">Like</button>
</div>
<div id="myID4" onclick="addLike(this, event)">
<button type="button">Like</button>
</div>
<div id="myID5" onclick="addLike(this, event)">
<button type="button">Like</button>
</div>
<div id="myID6" onclick="addLike(this, event)">
<button type="button">Like</button>
</div>
I suggest you to remove onClick from your divs:
<div id="myID">
and insert onclick in every button:
<button onclick="addLike(this.parent.id)">
First of all, you can only have one ID in a page. So I would first advise you use class instead of IDs. Now if you prefer to use IDs then each of the IDs should be unique. You should then have
<div id="id1" onClick="addLike(this.id)"></div>
<div id="id2" onClick="addLike(this.id)"></div>
Okay as far as i can see you are trying to make a like button.
For that i would suggest that instead of giving id to a <button> as its value.
And for the button action you have to create a form whose action will be on some other PHP or any other server side language. So for your problem here is the solution.
<form action="like.php" method="POST">
<div id="myid1">
<button value="myid1" name="button1">LIKE</button>
</div>
<div id="myid2">
<button value="myid2" name="button2">LIKE</button>
</div>
</form>
Now when you want to pass the value to a function then you can use the value of the button by its respective name attribute. You need to have different name for each button.
Related
I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.
I'm looking for a way to select a div with the class ".targets" from a button click.
My markup looks something like this:
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
...
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
...
</div>
</div>
</div>
</form>
My jQuery looks like this:
$("form").on("click", "btn-add", function(e){
var targets = $(this).parent().parent().next();
});
This solution works "somehow", but what if the markup changes?
Is there a way in jQuery to select the closest div with the class ".targets" on button click?
Thanks :)
Use (this).closest(".container").find(".targets");
this will select the closest element with the class container and search for an element in that with the class targets
$("form").on("click", ".btn-add", function(e){
var targets = $(this).closest(".container").find(".targets");
console.log($(targets).text().trim())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
target1
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
target2
</div>
</div>
</div>
</form>
If you know they will always be within the .products element, you could do:
$(this).closest('.products').find('.targets');
A helpful guide for jQuery traversing methods: http://api.jquery.com/category/traversing/
Try this:
$(this).closest('.container').find('.targets')
You could use closest() which searches for selector higher up in tree and find() which searches for selector going down the tree
$(this).closest('.container').find('.targets')
I have a row made of three buttons, and I need these three buttons to remain on the same row.
With that said, I am trying to make it so that each time one of these buttons is clicked, hidden content is displayed underneath them. Each button would show hidden content that is different from the other.
Is there anyway I can accomplish such a task using $(this) or must I assign a unique ID to each button and the relevant content it's supposed to show?
I have tried placing each button within a superclass called .items and the relevant content within this class as a child, called .description--so that I can access it using jQuery's .children() function--but this tends to mess up the row that my buttons are on (so that they are not all on the same row). Is there anyway to get around this?
What would be the simplest way to go about this?
Edit to show code:
<div class="displayers">
<div class="items">
<button type="button" class="btn btn-custom">Button 1</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 2</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
<div class="items">
<button type="button" class="btn btn-custom">Button 3</button>
<div class="row">
<div class="description">
<p> content here </p>
</div>
</div>
</div>
</div>
In order to make the buttons fit on the same row, I changed the ".items" class to have the property of "inline-block". The ".description" class is hidden, and I have some jQuery to reveal it.
var main = function() {
$('.items').click(function() {
$('.description').hide();
$(this).children('.description').show();
});
};
$(document).ready(main);
The problem with this is that my buttons are no longer on the same row.
I like to use data attributes and css selectors (easy to change later on), so I would use:
$('[data-show]').on('click', function(e) {
var toShow = $( $(this).data('show') );
toShow.siblings().hide();
toShow.show();
});
li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<button data-show=".content > *:nth-child(1)">Open 1st</button>
<button data-show=".content > *:nth-child(2)">Open 2nd</button>
<button data-show=".content > *:nth-child(3)">Open 3rd</button></p>
<ul class="content">
<li>1st Container</li>
<li>2nd Container</li>
<li>3rd Container</li>
</ul>
Looks pretty simple to me, but does not mean others would agree. It really depends on your needs.
You can just toggle the elements which is next to your button with just class added to each element as below:
$('.btnshowdes').on('click',function(){
$(this).next('.desc').toggle();
});
.desc{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 1</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 2</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 3</div>
</div>
<br/>
<div class="internal">
<input type="button" class="btnshowdes" value="Toggle Description"/>
<div class="desc">Description 4</div>
</div>
<br/>
</div>
FIDDLE DEMO
UPDATE
Based on your updated question to make it in the same row you just need to put an extra style to your .items as below:
.items{
display:inline-table; //helps to keep it in same row
padding:10px;//Just to make it feel good
}
Your js according to your html structure will be:
$('.btn-custom').on('click',function(){
$(this).next('.row').find('.description').toggle();
});
DEMO FIDDLE HERE
To solve your problem i would split my elements. Why don't you put each button in a different container (a div for instance), each container having his own id and his own content.
So when you click on a button you display the content inside of one div and the style of other buttons will not be affected.
Something like
<div class="container" id="1">
<button id="btn1"> Button one </button>
<!-- your content here linked to the script you use to display -->
</div>
<div class="container" id="2">
<button id="btn2"> Button two </button>
<!-- your content here linked to the script you use to display -->
</div>
<!-- etc... -->
So you don't have to worry and use complicated scripts, and each style will not be affected by the others modifications.
I want to have a button inside a ContentPane but I can't get it rendering. I have the same code for display the button inside a ContentPane and outside everything, in the body. The first one doesn't get rendering and the second one does, so it doesn't display the correct way and it doesn't fire events. The code for the button is:
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">Simple</button>
And the code:
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">Simple</button>
<div data-dojo-type="dijit/MenuBar">
<div data-dojo-type="dijit/PopupMenuBarItem">
<span>Sesión</span>
<div data-dojo-type="dijit/DropDownMenu">
<div id="btnLogout" data-dojo-type="dijit/MenuItem" data-dojo-props="">Salir</div>
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'left'" style="width: 15%;" id="leftPane">
<div data-dojo-type="dijit/layout/ContentPane">
<input id="agentFilter">
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="peopleTreePane" style="height: 90%">
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
<div id="appCenterTabContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="splitter:true, region:'center'">
<div data-dojo-type="dojox/layout/ContentPane" title="Visitas" href="" id="visitasPanel">
<div>
<button data-dojo-type="dijit/form/Button"
data-dojo-props="iconClass:'dijitIconTask', onClick:function(){ console.debug('clicked simple') }">
Simple
</button>
</div>
</div>
<div data-dojo-type="dojox/layout/ContentPane" title="Logs" href="" id="logsPanel">
<div id="gridLogs" class="appGrid" style="height: 20em;"></div>
</div>
</div>
</div>
</div>
</body>
Thanks
It looks like the empty href attribute on your ContentPane is confusing Dojo's parser. You don't need that attribute unless you want the ContentPane to load its content from the server.
<div data-dojo-type="dojox/layout/ContentPane" title="Visitas" href="" id="visitasPanel">
<!-- ^ remove this -->
you are just missing height style property for borderContainer widget.
Cheers,
kiuma
I have following DIV which shows some controls:
<div id="buttonrow" class="buttonrow">
<div class="Add" title="Add">
<div class="AddButton">
<input id="images" name="images" title="Add Photos" multiple="multiple" type="file">
</div>
<div class="AddText">
Add
</div>
</div>
<div class="Upload" title="Upload">
<div class="UploadButton">
<button id="start" type="submit" title="Upload Photos">
</button>
</div>
<div class="UploadText">
Upload
</div>
</div>
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos">
</button>
</div>
<div class="ClearText">
Clear
</div>
</div>
<div class="Delete" title="Delete">
<div class="DeleteButton">
<button id="delete" type="button" title="Delete Photos">
</button>
</div>
<div class="DeleteText">
Delete
</div>
</div>
<div id="SelectAll">
<input title="Select All Images" id="selectAllCB" type="checkbox">
</div>
<div id="dragandrophandler">
Drag & Drop Your Photos Here
</div>
<div id="ImagesCount">
</div>
<div id="Loading" class="Loading">
<img alt="loading" src="../customcontrol/progress.gif">
<div>
Loading...</div>
</div>
</div>
I need to know how can I disable this entire DIV using Javascript/JQuery function?
EDIT: To disable DIV means user should not be able to interact with DIV controls. They must be in read-only state (non-clickable). I dont want to hide DIV!
in Javascript, you can use:
<script lnaguage="javascript">
document.getElementById('buttonrow').style.display='none';
</script>
use:
$("#buttonrow *").attr("disabled", "disabled").off('click');
Try this with .prop():
$("#buttonrow :input").prop("disabled", true);
:input will select all input elems including text, textarea, button, select etc.
$("button, input",$("#buttonrow")).attr("disabled", "disabled");
Can you please try this:
$("#buttonrow").each(function()
{
$(this).prop('disbaled',true);
});
Hope this helps..
$('#buttonrow').on('click', function(){
$(this).css({ 'opacity': 0.7 });
return false;
})
I am trying to target all buttons, that are children of a div with the class 'actions'.
I want my function to take the values from onclick, filter out letters and special chars, and add the numbers to an array.
The function works, when i try to target the buttons OUTSIDE the div, but not when i try to target .actions button.
Anyone have any ideas?
Fiddle: http://jsfiddle.net/Teilmann/wN79n/5/
html:
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
js:
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).getAttribute('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
Your html is incorrect <button/> it needs to be <button></button> and getAttribute has to be .attr()
HTML
<button onclick="str1" ></button> <!--changed html here from <button/>-->
<button onclick="2" ></button> <!--changed html here from <button/>-->
<button onclick="addToCart(1234, 'something');" ></button> <!--changed html here from <button/>-->
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
jQuery
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).attr('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
DEMO
If you don't close the button with </button> the html will automatically generate this markup
<button onclick="str1"></button>
<button onclick="2"></button>
<button onclick="addToCart(1234, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1337, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1338, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1339, 'something');"></button>