When i load the list of items from MySQL using PHP,jquery event click won't recognize them. Jquery is working on all other elements on the page except the option tag which is created through for loop.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="js/js.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '.option', function(e){
alert('cls2 clicked');
e.preventDefault();
});
});
</script>
<select>
<?php
include "konekcija.php";
$upit="SELECT * FROM galerije group by naziv_galerije";
$rez = $connection->query($upit);
foreach ($connection->query($upit) as $r)
{
$ispis.=" <option value='{$r['id_galerije']}' class='option'>
{$r['naziv_galerije']}</option>";
}
echo $ispis;
?>
Related
I've been working with an issue on my WordPress site for a bit now but I'm stuck. I have two working datatables (both showing on top of one another on the page currently) and a dropdown selection box. I need the dropdown box, which houses 2 options (one for each table) to select one table and show only that one.
Ideally I'd like the page to load with a default table (id="mytable") and then the dropdown can control everything from there.
Here is the code, other than the tables themselves:
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
//This is the code for the dropdown
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script>
(function($) {
$('#select-tables').on('change', function(){
var table = $(this).find('option:selected');
$('#' + table).show();
$('table').not('#' + table).hide();
});
}(jQuery));
Both tables have their own datatable script:
//datatable 1, table id is mytable
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>
// table 2, table id is mytableSurvey
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>
Since this is in wordpress, I had to modify the JS for the dropdown code to match the datatable code so that it will work in WP. Is there a better way to code the dropdown with JS for existing datatables?
You have a lot of redundant code in their, so I'll also reduce a lot of the repetition for you.
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
//This is the code for the dropdown
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script type="text/javascript">
(function($) {
$('#select-tables').on('change', function(){
var table = $(this).find('option:selected');
$('#' + table).show();
$('table').not('#' + table).hide();
});
}(jQuery));
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');
//open the #mytable table on page load and close 'mytableSurvey'
$('#mytable').show();
$('#mytableSurvey').hide();
});
}(jQuery));
</script>
I'm having problem with a div which has a button on it.Button has id='delsts' and that whole div is fetched from php like below code:-
//php code
foreach ($data as $row) {
$status = $row['status'];
$fn = $row['firstname'];
$time =$row['posted_dt'];
echo "<div id='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
<span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' id='delsts' title='remove from timeline' name='delsts'></form>
<div id='detailbox'>
asdasd
</div>
<div class='stsbox'>".$status."</div></div>";
}
And this below jquery function is directly added from html(not php)
//Jquery code
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#delsts',function(){
$('#detailbox').slideToggle('fast');
});
</script>
Now, according to my php code I have fetched some data first so, everything is fine there I get some five div on my webpage (as I have five data on database related to that div).Now secondly jquery code is handling onclick event function on id 'delsts' of those five div.Now the main problem is that when I click those button of any five div my jquery function works for only first div out of other div why?how can we make every div work same jquery onclick event function individually?
Do not use id with the same value for multiple elements. Use a class selector instead for all elements.
Example HTML:
<div class='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>username</a></span>
<span class='postdt'></span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
<div class='detailbox' style="display:block;">
test
</div>
<div class='stsbox'></div>
</div>
JS:
$(document).ready(function(){
$('.delsts').on('click', function(){
$(this).closest('.stsshown').find('.detailbox').slideToggle('fast');
});
});
This example is usable for generation of multiple sets of elements you want to achieve.
There can be only 1 id element with the same name in the document, but you generate more of them in loop.
Use classes instead of IDs, or assign unique IDs for each item.
change your jquery code to:
<script type="text/javascript">
$(document).ready(function(){
$(".delsts").click(function(){
$(this).next(".detailbox").slideToggle('fast');
});
});
</script>
and php:
foreach ($data as $row) {
$status = $row['status'];
$fn = $row['firstname'];
$time =$row['posted_dt'];
echo "<div class='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
<span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
<div class='detailbox'>
asdasd
</div>
<div class='stsbox'>".$status."</div></div>";
}
I am having this problem when I have a for loop of links and I want each link to alert through jquery but only the first link is working.. What could be the problem?
<link rel='stylesheet' href='CSS/nook.css' type='text/css' media='screen, projection' />
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
This is my script
<script>
$(document).ready(function() {
$("#click").click(function(e)
{
e.preventDefault();
alert("hi");
});
})
</script>
And this is my loop
<?php
for($i=0;$i<2;$i++){
echo "<a href = '' id = 'click'>a</a><br>";
}
?>
ID of an element must be unique, use class to group similar elements
<?php
for($i=0;$i<2;$i++){
echo "<a href = '' class='click'>a</a><br>";
}
?>
then
<script>
$(document).ready(function() {
$(".click").click(function(e)
{
e.preventDefault();
alert("hi");
});
})
</script>
When you use id-selector, it will return only the first element with the given id others will be ignored. So in your case the click handler will be registered to only the first element withe the id click
IDs are unique, and you should only have 1 per page. So this is wrong:
<a id="unique"></a>
<a id="unique"></a>
Instead, you need to use a class:
<a class="not_unique"></a>
<a class="not_unique"></a>
The way you access a class with jquery is with . instead of #:
$(".click")
I just added the query lib to my web app and tested with simple alert:
<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
$(function(){
alert('jquery is working');
});
</script>
And works fine. However when i want to implement an "change" event on my dropdown
<script src="<c:url value="/resources/jquery-1.10.2.min.js" />"></script>
<script type="text/javascript">
$("#projectKey").change(function() {
alert($('option:selected', $(this)).text());
});
</script>
it displays me no alert, basically nothing is happening. My drop down is the following:
<select id="projectKey" name="projectKey">
<option value="AM">AM</option>
<option value="AIL">AIL</option>
<option value="NEB">NEB</option>
<option value="SSP">SSP</option>
</select>
Of course i tried to simplify the javascript, just o have
$("#projectKey").change(function() {
alert("test");
});
but still no joy. It will be something with the selector or the drop down. Tried also "select#projectKey" but the result was of course the same. Any idea what i am doing wrong?
You should've kept that DOM ready function
$(function() {
$("#projectKey").change(function() {
alert( $('option:selected', this).text() );
});
});
The document isn't ready if you added the javascript before the elements in the DOM, you have to either use a DOM ready function or add the javascript after the elements, the usual place is right before the </body> tag
Please change your javascript function as like below....
$(function () {
$("#projectKey").change(function () {
alert($('option:selected').text());
});
});
You do not need to use $(this) in alert.
Or you can use this javascript
$(function () {
$("#projectKey").change(function () {
alert($('#projectKey option:selected').text());
});
});
The html
<select id="drop" name="company" class="company btn btn-outline dropdown-toggle" >
<option value="demo1">Group Medical</option>
<option value="demo">Motor Insurance</option>
</select>
Script.js
$("#drop").change(function () {
var category= $('select[name=company]').val() // Here we can get the value of selected item
alert(category);
});
so I got this code working for Firefox and Chrome...what it does is it allows you to reorder the options within an HTML select form...but then when I tested the code via IE8, it's kind of patchy...it only works for the first few clicks and after that you have to click many times on the button for it to work..
Does anybody know any other code that allows you to reorder select field items that works perfectly in IE8?
<select id="list" multiple="multiple">
<option value="wtf">bahaha</option>
<option value="meh">mwaahaha</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
Add Item
Remove item
<script>
$(document).ready(function(){
$('#mup').click(function(){
moveUpItem();
});
$('#mdown').click(function(){
moveDownItem();
});
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}
Your code for changing the options works fine. It seems IE8 isn't handling a "fast" second-click with the click event but rather expects a double click to be handled.
Using my test code below, you'll notice that in IE8 writes out the following when Move Down/Up is pressed "fast":
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Double-Click
But with FF/Chrome the following is printed:
Move Down Click
Move Down Click
Move Down Double-Click
Move Down Click
Move Down Click
Move Down Double-Click
Here's the code I'm using to test. I haven't done any tests to see if it's jQuery's event binders that are causing the issues.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<select id="list" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
<script type="text/javascript">
var $DEBUG = null;
$(document).ready(function ()
{
$DEBUG = $("#debug");
$DEBUG.append("Registering Events<br />");
$("#mup").click(moveUpItem);
$("#mdown").click(moveDownItem);
$("#mup").bind("dblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
$("#mdown").bind("dblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});
});
function moveUpItem()
{
$DEBUG.append("Move Up Click<br />");
}
function moveDownItem()
{
$DEBUG.append("Move Down Click<br />");
}
</script>
<div id="debug" style="border: 1px solid red">
</div>
</body>
</html>
EDIT: I can confirm it is IE8 that is the problem. Swap this IE8-specific code in the $(document).ready() handler:
// $("#mup").click(moveUpItem);
$("#mup")[0].attachEvent("onclick", moveUpItem);
// $("#mdown").click(moveDownItem);
$("#mdown")[0].attachEvent("onclick", moveUpItem);
// $("#mup").bind("dblclick", function ()
$("#mup")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Up Double-Click<br />");
});
// $("#mdown").bind("dblclick", function ()
$("#mdown")[0].attachEvent("ondblclick", function ()
{
$DEBUG.append("Move Down Double-Click<br />");
});
Example:
to move 3rd option before 1st option, we can use below jquery:
$('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)'));
I think this will give some ideas of how to do it, you can dynamically place any option before one known position just by knowing the values of both, the one to move and the one of the position:
How would you dynamically order an <option select> list using JQuery?
I know this one is a bit old, but I recently made this simple jQuery plugin to be able to reorder elements in a multiple select element.
Have a look and see if it helps for you, I tested in IE8,IE9,Chrome,FireFox,Opera.
http://fedegiust.github.io/selectReorder/