I've three div tags in a page.
<div id = '1'>
</div>
<div id = '2'>
</div>
<div id = '3'>
</div>
When a user click on tag, respective div will load,they all will be on one page with one submit button.
Now ,how to validate the div,i've to know which div the user clicked.
update
This is my vaidation script
function x()
{
var x = true;
some validation script
return x;
}
Shed some light here,it will help me to go forward.
Thanks in advance!!
Something like this should do the trick
var lastClickedId;
$('div').click(function()
{
// Use a class to change appearance and track selected
$('div').removeClass('selected');
$(this).addClass('selected');
// Or just track the id in a variable
lastClickedId = $(this).attr('id');
});
function validate()
{
alert('last clicked div ID was: ' + lastClickedId + ' aka: ' + $('div.selected').attr('id'));
}
as i see you used id attribute with a number - its not valid in HTML5.
you can use the id for this . some thing like this
demo : JsFiddle
$('div').click(function()
{
alert('you clicked ' + $(this).attr('id'));
});
Related
I have simple Database, which contains fields like ID, product_name, product_description, image, cost.
I have a dynamically generated form which I'm going to send using jQuery, what should I change in my JavaScript to pass to defined div the data which I got from my DB via PHP?
JavaScript Code:
$(function() {
var number = 1;
var contentToLoad = 'Defined structure';
$('a.add').click(function(e) {
e.preventDefault();
$('#calc').append(contentToLoad);
number++;
});
$('#calc').on('click', 'a.design_button', function(e) {
e.preventDefault();
$(this).parent().remove();
});
});
---
UPDATE:
I need a little help with merging two parts of JavaScripts to make it work. I need to put somehow that part:
var number = 1;
var contentToLoad = 'Defined structure';
$('a.add').click(function(e) {
e.preventDefault();
$('#calc').append(contentToLoad);
number++;
});
where a.add i've replaced with submit button, inside this one
function add(data_array){
$(document).on('submit', '#add', function()
{
var r_data = data_array;
alert(r_data);
...
});
}
but I can't make it work ;/
I've menaged to do sth like that:
function mini(data_array){
var number = 1;
var r_arr = data_array;
$(this).on('submit', function(e) {
e.preventDefault();
var contentToLoad = '<div id="item-'+ number +'" class="item row"> '+ number +' '+r_arr+' Defined structure </div>';
$('#calc').append(contentToLoad);
number++;
});
}
But now I have a problem with making it work correctly, because it adds me the correct div + all divs which was previously added.
Let's just say that I have blank site and I want to add two divs, so I click twice on the button and it should add me two divs, but it adds after 1st click div with id = 1 and after 2nd click div with id = 2 + div with id=1, So in effect I have three divs after two clicks.
Where in code placed above I've made mistake ?
I am attempting to add an input of type 'file' to a form dynamically. Actually the end user can add as many files as they would like to a form, so an array concept is needed. I can inject dynamic elements, but I can't figure out how to dynamically invoke the click of the input element just injected. Also, need to remove the dynamic element if the user chooses cancel on the input element.
I have created a jsfiddle showing the injection but the click event never fires when the trigger is run.
How do I trigger the 'click' event after injecting this element?
jsFiddle Html
<input id='button1' type='button' value='button1'>
<div class='container'>
</div>
jsFiddle JavaScript
$(document).ready(function () {
$('#button1').on('click', function(event) {
Button1_Click(event);
});
});
function Button1_Click(event) {
var container = $('.container');
var containerChildren = $(container).children();
var containerChildrenCount = $(containerChildren).length;
var inputId = 'fileInput[' + containerChildrenCount + ']';
$('.container').append('<input id="' + inputId + '" type="file" />');
$('#' + inputId).trigger('click');
}
Try removing the [] from the inputId variable.
I got it to work in your fiddle by changing it to this
var inputId = 'fileInput-' + containerChildrenCount
So i want to make a remove player button, so that everytime i click it, it hides a images/button, the same for a add player function.
function addplayer(){
for (var i = 51; i <= 94; i++) {
if (i == 51 || i == 61 ||){
$("#" + "addplayer" + i).show();
}
}
}
This is my html caller
<button onclick="addplayer();"style="bottom:55;position:fixed;right:10;width:100;height:40px;background-color:#FFFFFF;">addplayer</button>
document.getElementById("addplayer2").onclick=function(){
document.getElementById("51Container").style.display="inline-block";
document.getElementById("52Container").style.display="inline-block";
document.getElementById("53Container").style.display="inline-block";
document.getElementById("54Container").style.display="inline-block";
}
document.getElementById("addplayer3").onclick=function(){
document.getElementById("61Container").style.display="inline-block";
document.getElementById("62Container").style.display="inline-block";
document.getElementById("63Container").style.display="inline-block";
document.getElementById("64Container").style.display="inline-block";
}
(i got 6 in total completly looking the same), just to illustrate, how it would work
Theese are my add player function, just on 5 different buttons, just to showcase that it is doing something, it doest seem to work for me, how do i do this, so that the same button will add (show), different object instead of the solution i got atm.
Hope somebody will help me.
If you want to invoke the function which is assigned to the addplayer# control, instead of calling $("#addplayer" + i).show() try calling $("#addplayer" + i).click() .. however, based on our back-and-forth, it seems that your i needs some attention.
As you said, your addplayer# controls are buttons, therefore, I suggest the following:
function addplayer(){
$("button[id^='addplayer']").each(function(i,e) { $(e).click(); });
}
This will invoke any click event function defined for any buttons whose id starts with addplayer.
See this fiddle for an example of how it works: https://jsfiddle.net/qhevn1x3/2/
Although I do not know your page's exact makeup, I would suggest something along these lines (if possible):
<div id='51Container'>some player</div>
<button class="addPlayer" data-id="51">Add Player</button>
<button class="removePlayer" data-id="51">Remove Player</button>
Then my JS would be something like:
// Page-level execution to assign my click events
$(function() {
$("button.addPlayer").on("click", function() {
var id = $(this).attr("data-id");
$("#" + id + "Container").css({'display':'inline-block'});
$("button.addPlayer[data-id='" + id + "']").toggle();
$("button.removePlayer[data-id='" + id + "']").toggle();
});
$("button.removePlayer").on("click", function() {
var id = $(this).attr("data-id");
$("#" + id + "Container").css({'display':'none'});
$("button.addPlayer[data-id='" + id + "']").toggle();
$("button.removePlayer[data-id='" + id + "']").toggle();
});
})();
This will wire up the add/remove buttons with the corresponding player. Then, if you wish to have a button to hide/show multiple, you need only select the appropriate add/remove buttons (by filtering by data-id) and invoke their click events.
I have a textbox which a user can type in, and below is a list of tags which can be clicked.
When a user clicks a tag, it is entered in the textbox and the tag is highlighted by changing the class. When a user clicks the same tag again, it deletes the tag from the textbox and removes the class from the tag so it is back to its original, non-highlighted state.
This creates a problem where if the user deletes the tag them themselves, it still stays highlighted in our collection of tags at the bottom. Is there any way to check whether specific text has been deleted from the textbox so we can remove the class from the tag? I was thinking some jQuery but I don't know where to start
The code for the box and tags is :
<div class="container">
<textarea id="ReplyBox" placeholder="Give some more information..." class='message-content-box'></textarea>
</div>
<div class="container">
<div class="tags">
#tag1
#tag2
#tag3
</div>
<button id="Send">Send</button>
</div>
And the current jQuery is :
$(document).on("click","mytag", function(event){
event.preventDefault();
var text_box = $('.message-content-box');
var space = ' '
if(text_box.val().length == 0) {
space = ''
}
var hashtag = $(this).text()
//If already selected
if ($(this).hasClass("selected-mytag")){
//Remove Selected class
$(this).removeClass("selected-mytag");
//Removes hashtag from text box
text_box.val(text_box.val().replace(hashtag, ""));
} else { //If not selected
//Add selected class
$(this).addClass("selected-mytag");
//Add hashtag to text box
text_box.val(text_box.val() + space + $(this).text());
}
});
this code worked for me:
$('.mytag').on("click", function(event){
event.preventDefault();
var text_box = $('#ReplyBox');
var space = ' ';
if(text_box.val().length == 0) {
space = '';
}
var hashtag = $(this).text();
//If already selected
if ($(this).hasClass("selected-sticky-hashtag")){
//Remove Selected class
$(this).removeClass("selected-sticky-hashtag");
//Removes hashtag from text box
text_box.val(text_box.val().replace(hashtag, ""));
} else { //If not selected
//Add selected class
$(this).addClass("selected-sticky-hashtag");
//Add hashtag to text box
text_box.val(text_box.val() + space + $(this).text());
}
});
$('#ReplyBox').on('keypress paste textInput input', function(){
$('.selected-sticky-hashtag').each(function(){
if($('#ReplyBox').val().indexOf($(this).text()) == -1)
$(this).removeClass("selected-sticky-hashtag");
});
});
What I am doing here, is to check on every change of the input value, if all active Tags are actually contained in the inputs value. I adjusted some of the selectors, because the code you provided didn't actually work.
Something like
$( "textarea:contains(hashtag)").hasClass("selected-mytag"));
I'm new to working with JS/jQuery, I've been currently trying to figure out how to make this work, by trying many different ways that I've found here and on different sites, and am unable to get this working.
I have a website that has tabs, that changes a div's content when the click on the buttons in the menu. This all works fine, but I want to be able to link to each separate "page" using hash tags example.com/#tab-1
HTML:
<div class="tabWrapper">
<div class="tabContent">
<div class="label">TAB 1</div>
<?php include 'tab1.php'; ?>
</div>
<div class="tabContent">
<div class="label">TAB 2</div>
<?php include 'tab2.php'; ?>
</div>
tabWrapper looks like this after being generated
<div class="tabWrapper">
<ul class="tabs">
<li class="tab-1">TAB 1</li>
<li class="tab-2">TAB 2</li>
</ul>
JS :
// Generate tab navigation
if ($('div.tabWrapper').length != 0)
{
$('div.tabWrapper').each(function()
{
// Prepare tab output
var printTabs = '<ul class="tabs">';
var tabContent = $(this).find('.tabContent');
var tabCount = tabContent.length;
$(tabContent).each(function(key)
{
// Hide tab if it is not the first
if (key != 0)
{
$(this).hide();
}
// Get label for tab
var label = $(this).find('.label').text();
// Use a number if no label was given
if (!label)
{
label = 'Tab ' + (key + 1);
}
// Add id to tab content
$(this).addClass('tab-' + key);
printTabs+= '<li class="tab-' + key + '">' + label + '</li>';
});
// Add tabs
$(this).prepend(printTabs + '</ul>');
$(this).find('li:first').addClass('active');
});
}
// Handle click on tabs
$('.tabWrapper').delegate('ul.tabs li', 'click', function()
{
// Deny click on active element
if ($(this).is('.active'))
{
return false;
}
// Get tab id
var id = $(this).attr('class').split('-');
id = id[1];
// Display and animate new tab content
var parent = $(this).parent().parent();
parent.find('ul.tabs li').removeClass('active');
$(this).addClass('active');
parent.find('.tabContent').hide()
parent.find('.tab-' + id).animate({ opacity: 'show' }, animationSpeed);
});
Here is what I was trying to add, which I don't think is correct
function hash() {
if(window.location.hash){
var hash = window.location.hash.substring(1);
$("." + hash).click();
}
}
which I added in the js file just above
$('.tabWrapper').delegate('ul.tabs li', 'click', function()
I'm not sure how far I'm off with that code, as it doesn't seem to work at all. I just want it to see if there is a hash tag in the url, and if there is then run the click function to change the content.
I hope I explained what I was looking for clear enough. I'd very much appreciate any help with this.
Thank you.
UPDATE:
I updated the code with setInterval as per chiliNUT's suggestion, however it still doesn't appear to be working.
setInterval(hash,1000);
function hash() {
if(window.location.hash){
var hash = window.location.hash.substring(1);
$("." + hash).click();
}
}
UPDATE 2:
Still unable to get this working, anyone able to help?
Thanks.
My tip is using anchor tags as well.
Link
That will open example.com#tab1
The control on page load:
$( document ).ready(function() {
if(window.location.hash == "#tab1"){
$("#someId").click();
}
});
Why not just use anchor tags?
Button to open tab 1