using multiple id in jquery - javascript

I made little jquery script for checking if input box value bigger than 5 .but I have 2 tag with an id and only one of them works.
<div id="register">
<form id="register">
<input id="first" type="text" /> <a id="first" ></a> <br />
<input id="second" type="text" /> <a id="second" ></a>
</form>
$('input').keyup(function(){
if($(this).val().length<5)
{
$('a.first').text("Please fill");
}
if($(this).val().length<5){
$('a.second').text("Please fill");
}
});
But it shows only first <a id="first"></a> tag. Second tag not visible

You just need to change your <a>'s to use classes:
<div id="register">
<form id="register">
<input id="first" type="text" /> <a class="first" ></a> <br />
<input id="second" type="text" /> <a class="second" ></a>
</form>
</div>
The jQuery selectors you're using:
$('a.first')
$('a.second')
Are looking for an <a> with a class. If you were trying to look for an <a> with an id, they would need to be as follows:
$('a#first')
$('a#second')

change the ID of register , its not correct to have two identical ID's in the same page ,
after that everything should be working fine
cheers

Agreed with not having duplicate id's. Easier to keep track of, and cleaner code. My two cents :), after having to refactor a chunk of code at work recently that had duplicate id's that failed to work in IE. Lesson learned!

Related

Close tab index order in a container/div

I'm trying to hit this result: i have 2 div with their tab-index order in the same page, and when for example i'm navigating in the first div and i reach the last tab-index of that div, my focus don't go on the next div but restart from first tab-index of that div. Is this possible?
Example:
<div class="main">
<div class="container1">
<input tabindex="1"/>
<input tabindex="2" />
<input tabindex="3" />
</div>
<div class="container2">
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</div>
</div>
Can you post your code?
Are you using tabindex="0" on all of them or are you setting a specific order by using tabindex-"1", tabindex="2" etc.?
My suggestion without seeing your code is that you are trying to put tabindex on an element that doesn't allow it.
Use tabindex="0" on elements like <div>, <span>, <p> that are not keyboard focusable. They will not work with tabindex="1" etc. If you are going to do this though you should specify a role="button" etc. on that element to let a screen reader know what the purpose of the focus is for example if the user is blind.
It's hard to answer this question for you without seeing the code.
Hope this helps! If you need more help, please post your code and I'd be glad to help more.
<div role="button" tabindex="0">A button</div>
<div role="link" tabindex="0">A link to somewhere</div>

getelementbyid().onclick works for one button but doesn't work for another

I have five buttons in my html page. I used to create four of them by javascript and one with html, but after various changes decided to create all of them with html. The problem is that previously all of my buttons worked just fine, but after the change the ones previously made by javascript don't work anymore. I use getElementById("").onclick = function() for all of the buttons, yet only one of them works. (I only made the functionality for one of the four buttons because I encountered this problem)
Here is the javascript for both of the buttons. button1 is the one that doesn't work, I even tried with only having console.log() inside the function, but it didn't do anything.
document.getElementById("button1").onclick = function(){var element = document.getElementById('presetPicker');element.value = this.value;providerManager.refreshProviders();};
document.getElementById("DownloadXml").onclick = function (){createReport('http://192.168.0.101:8080/rest/v1/excel-reports/run/XLT_211607',verifyReport)};
Here is the html part of the page
<body>
<div id="container1">
<header>
<img src="http://www.jamk.fi/globalassets/tietoa-jamkista--about-jamk/materiaalit-esitteet-asiakaslehdet-ja-logot/jamkin-logot/jamk_fi--tunnus/jamkfi_tunnus_sininen_suomi.png" alt="Jamk logo" style="width:50%;height:50%;margin-left:25%;">
</header>
<div id="container2">
<div id="textContainer">
<h2>Fosfaattifosfori PO4-P [mg/l]</h2>
</div>
<div id="Graafi"></div>
<div class="input">
<div id="buttonContainer1">
<ul id="buttonList" class="timeForm">
<input id="button1" type="button" class="buttonGroup1" value="Previous day"
><input id="button2" type="button" class="buttonGroup1" value="Previous week"
><input id="button3" type="button" class="buttonGroup1" value="Previous month"
><input id="button4" type="button" class="buttonGroup1" value="Previous year">
</ul>
</div>
<div id="buttonContainer2">
<div id="list">
<ul id="downloadList">
<input id="DownloadXml" type="button" value="Download" />
</ul>
</div>
<div id="download_div">
<img id="loading_gif" src="/modules/dashboards/web/public/359.gif" alt="Loading" style="display:block;">
</div>
</div>
<iframe id="download_frame" style="display:none;"></iframe>
</div>
<div class="testi">
<select id="presetPicker" class="testi" ></select>
</div>
<footer>
</footer>
</div>
</div>
</body>
By adding an option <option value="Previous day">Previous day</option> to the select, your code works again. So either that is the problem, or the function providerManager.refreshProviders();, which I can't check, is giving you issues.
Can you please provide a jsFiddle with the example?
I think you are loading the script before the DOM elements are drawn.
Maybe a $(document).ready() should resolve.
I found the problem. Looks like there was no problem with the code itself, but I was using Firefox Web console to debug, and for some reason it didn't register any console.log() commands. After debugging with Browser console I found the debug data.
Feeling quite ashamed now
EDIT: should I remove the question or let it stay here to remind every starting developer to doubt their debug tools?

Ignore automatically generated tabindex's

I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});

how to create a popup onclick using jquery

see below are what i tried.
jQuery:
$("#type_name").click(function(){
$("#add_form").fadeIn(1000);
$("#involved_name").val("");
positionPopup('#add_form');
$("#involved_name").focus();
});
html:
<div id="add_form" style="display:none">
<h2>Enter involved Name<h2>
<table><tr><td>
<input type="text" id="involved_name" name="name" maxlength="20" /></td></tr>
</table>
<div style="width:180px;margin:20px 5px 0 10px" align="right">
<button type="button" class="close" name="cancel" class="forward backicon">
<img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
Cancel</button> {% include "buttons/add.html" %}
</div>
</div>
onclick button on html:
<button type="submit" name="edit" class="forward" id="type_name"><font color="#026BE2">Type a name </font></button>
The above code is not working,not showing any errors in console,but popup is not displaying.Need help.
You aren't binding the event correctly after the DOM has been constructed. You may need to wrap your code around a $.ready(), or $() for short.
$(function () {
$("#type_name").click(function () {
$("#add_form").fadeIn(1000);
$("#involved_name").val("");
positionPopup('#add_form');
$("#involved_name").focus();
});
});
Alternatively, you can simply move your piece of code just before the closing body tag i.e. </body>.
No other problems seems to be of much concern.
Guess $.ready should work, as #Alexander has pointed out.
Also try $("#type_name").live('click',function(){});
Incase of newer jQuery version replace .live by .on
This will bind your events dynamically... irrespective of your DOM loading.

How to excute a javascript from within an accordion

I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.
This is the html code
<div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
<div class="accContent">
<ul class="menuHoriz">
<li>What ? </li>
<li>How ? </li>
<li>Who ? </li>
<li>Screenshots </li>
</ul>
<div id="what" class="content">
<p>
Details about the projects<br /> What. description
</p>
</div>
<div id="how" class="content">
<p>
Details about the projects<br /> How description
</p>
</div>
<div id="who" class="content">
<p>
Details about the projects<br /> Who description
</p>
</div>
<div id="screenshots" class="content">
<p>
<h2>FoodCheck Snapshots</h2>
<img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type ="button" id="startAgain" value="Start Again">
<input type="button" id="nextLink" value="Next »" />
</form>
</p>
</div>
</div>
This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript
In
<script type="text/javascript">
$(function() {
//set up the news accordion on the lower page
$("#contentList").accordion({ header: "h3", collapsible: true});
});
</script>
You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.
Some code would help of course. Can you provide some? but only relevant parts so ot won't be overwhelming.

Categories