I´m doing like this. Works fine with just one div with a static name.
Problem is when i want to refresh DIV´s with other names like myDiv1, myDiv2 etc.
I have tried javascript by sending ID to the funciton, my webpage jumps up to the begining, I dont want that to happen. That doesn't happen with the code below.
$(function() {
$("#refresh").click(function(evt) {
$("#myDiv").load("update.php")
evt.preventDefault();
})
})
<div id = 'myDiv" . $row["id"]. "' ><a href='#' id='refresh'> Click Here </a></div>
This Would also work, but then I have to generate one jquery-function for every DIV
$(function() {
$("#refresh1").click(function(evt) {
$("#myDiv1").load("update.php")
evt.preventDefault();
})
})
<div id = "myDiv1" ><a href='#' id='refresh1'> Click Here 1 </a></div>
$(function() {
$("#refresh2").click(function(evt) {
$("#myDiv2").load("update.php")
evt.preventDefault();
})
})
<div id = "myDiv2" ><a href='#' id='refresh2'> Click Here 2 </a></div>
You can access the parent element in the click event and execute the load on it like this:
$(this).parent().load("update.php");
If you don't want a redirection to happen, I would suggest that you don't use a link. Maybe a button or a span
You may selects elements by beginning part of your id:
$('div[id ^= "myDiv"]')
Related
I want every li tag to show the a's clicked href content below that li tag in a div. For example, I have a structure like this:
<ul id="ids">
<li class="res"><a class="item">item1</a></li>
<li class="res"><a class="item">item2</a></li>
<li class="res"><a class="item">item3</a></li>
</ul>
Dynamically if a's href is clicked, accordingly a function that shows the div <div class="testing"><h3>showing item1 here</h3></div> outside the <a> tag needs to be shown. That function could take time so until then Loading... needs to be shown. But I am unable to detect where the user has clicked as class names are the same. Once loading is done, loading should be hidden.
So far I have this:
$(document).on('click', '.item', function(e) {
e.preventDefault();
$(this).append('Loading');
//function code here
$(this).append('<div class="testing"><h3>showing item1 here</h3></div>');
});
Also, the function appends 1 div tag with class 'mydiv', that needs to be hidden. But again, since class names that get appended to every <li> is the same, I don't know where the click has taken place to detect it.
to summarise:
show a list of elements which has anchor tag
click on every element should show the content of the click in a div under that anchor tag
content of anchor tag can take 2 seconds so until then user should see "loading". Once it loads, loading should be hidden
You are looking for $.after() or $.insertAfter():
$(document).on('click', '.item', function(e) {
e.preventDefault();
var aTag = $(this);
if (aTag.siblings('.testing, .loader').length === 0) { //it's not loaded or loading
var loader = $('<div class="loader">Loading</div>');
loader.insertAfter(aTag);
//function code here
loader.remove();
aTag.after('<div class="testing"><h3>showing ' + aTag.html() + ' here</h3></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ids">
<li class="res"><a class="item">item1</a>
</li>
<li class="res"><a class="item">item2</a>
</li>
<li class="res"><a class="item">item3</a>
</li>
</ul>
If you want to avoid multiple loadings check if it exists before:
if(aTag.siblings('.testing, .loader').length === 0){ //it's not loaded or loading
}
You can get the href attribute using `$(this). This should work.
$(document).on('click', '.item', function(e) {
e.preventDefault();
var href = $(this).attr("href");
$(this).append('Loading');
$(this).append('<div class="testing"><h3>showing ' + href + ' here</h3></div>');
});
Also, the code above will append the div inside the a tag. You probably want to put it somewhere else using something like
$("#messageDiv").html('<div class="testing"><h3>showing ' + href + ' here</h3></div>');
To hide the loading message, you can wrap that in a span
$(this).append('<span class="loadingspan">Loading</span>');
Then in the code that runs when the load is complete, you can use
$('.loadingspan').hide();
My site has a column of checkboxes with IDs in sequential order like "keepbox1", "keepbox2", etc. Each checkbox resides within a list item, along with a href attribute like this:
<li>
Title
<br>
<input id="keepbox1" type="checkbox" class="kboxes" name="keepbox1" />
<label for="keepbox1">Keep</label>
<div class="tinybox" alt="tinypic1" id="tinypic1" style="display:none;">
Content Here
</div>
</a>
</li>
There is also an element on the page that I use as button
<a><label class="getFiles" for="lightbox-two">Submit</label></a>
When a user clicks this button, I have a script that loops through each variation of keepbox to see if a user checked it. If a particular keepbox is checked, I'd like to extract the href attribute's value in that particular li.
So if a user had checked keepbox1 from the demo code above, I'd like it to alert back "http://iNeedThisUrl.com".
I'm using the following script which successfully identifies a checked keepbox, but it's returning "undefined" in the alert box. I'm guessing I'm not grabbing the attribute properly. Any ideas? Thank you!
<script type="text/javascript">
$(document).ready(function() {
$('.getFiles').click(function() {
for (i = 1; i <= 100; i++)
{
if ($("#keepbox" + i).prop('checked'))
{
var addressValue = $("#tinypic" + i).closest("li").attr("href");
alert(addressValue);
}
}
});
});
</script>
Two issues:
1) you have closing anchor tag </a> without opening anchor tag as next sibling of div in li. you need to remove it.
2) div elements #tinypic+n are siblings of anchor element. You need to use:
$("#tinypic" + i).siblings("a").attr("href");
or
$("#tinypic" + i).prevAll("a").attr("href");
or
$("#tinypic" + i).closest("li").find("a").attr("href");
$(".kboxes").each(function(){
if ($(this).prop('checked')) {
var addressValue = $(this).closest("a").attr("href");
alert(addressValue);
return false;
}
});
I'm trying to create a html anchor that has a unique ID and then when a user clicks the anchor, the ID gets passed to javascript via the onclick html tag and then a javascript script reads the ID and displays the content in a div. We're using jQuery library for this.
what I have so far:
<a id="MyID1" onclick="var ClickVariable=this.id;return false">1</a>
<a id="MyID2" onclick="var ClickVariable=this.id;return false">2</a>
<script>
var ClickVariable;
var ContentBox = [];
ContentBox[ClickVariable] = "Content for MyID1";
$(ClickVariable).click(function() {
$('.dropdown-menu-content').html(ContentBox);
});
</script>
The above does not work however we have an alternative that works but is not efficient.
<a id="MyID1">1</a>
<a id="MyID2">2</a>
$('#MyID1').click(function() {
$('.dropdown-menu-content').html('Text 1');
});
$('#MyID2').click(function() {
$('.dropdown-menu-content').html('Text 2');
});
As you can see the above one would work but is very repetitive for our needs because we have a large list to enter.
Here is a jsfiddle of the working one that is a tedious repetitive task:
http://jsfiddle.net/2z7o5hn3/
You can reuse the same handler like so:
//mapping id to string to display
var data = {
'MyID1': 'Text 1',
'MyID2': 'Text 2'
}
//shared click handler
var displayEl = $('.dropdown-menu-content');
function handler() {
displayEl.html(data[this.id]);
}
//add click handler to each id
$.each(data, function(k,v) {
$('#'+k).click(handler);
});
http://jsfiddle.net/2z7o5hn3/2/
Give all anchor tags a class and access it like this:
HTML:
<a id="ID1" class="clickVariables" href="#">ID1</a>
<a id="ID2" class="clickVariables" href="#">ID2</a>
JS:
$('.clickVariables').on('click', function(e){
e.preventDefault();
$('.dropdown-menu-content').html($(this).attr('id'));
})
do you mean like this? => DEMO
var texts=['Text 1','Text2'];
$('a[id^=MyID]').click(function() {
$('.dropdown-menu-content').html(texts[$(this).text()-1]);
});
I'm aware that this issue was addressed many times, that's why I read most of the topics on this problem that were already opened on Stack Overflow but none of the suggestions have helped me.
I have a list of div elements, each containing a hyperlink and a span element with additional information. The span elements are initially hidden and they need to be toggled whenever the sibling anchor element is clicked.
<div class="politician">
<a href="">
Антонијо Милошоски
</a>
<span class="additional" style="display: none">
2013ВМРО-ДПМНЕ1997-1
</span>
</div>
<div class="politician">
<a href="">
Силвана Бонева
</a>
<span class="additional" style="display: none">
2013ВМРО-ДПМНЕ1991-1
</span>
</div>
Here's the jQuery code I have written to handle the toggling of the hidden elements:
$('.politician a').click(function (e) {
e.preventDefault();
var $this = $(this).parent().find('span');
$(".politician span").not($this).hide();
$this.toggle();
});
My problem was already stated in the title. I'm expecting the hidden elements to be shown, but instead the page gets refreshed. I guess there has to be something wrong with the way I'm using the preventDefault() method.
EDIT
Here is the piece of code that generates the div.politician elements.
function populateList(politicians) {
var politlist = $("#list").html("");
for (var i in politicians) {
var person = politicians[i];
var politinfo = "<div class=\"politician\">" + person.name + " " + person.surname + "<span class=\"additional\" style=\"display: none\">" + person.lastserved;
for (var j in person.member)
{
var membership = person.member[j]
politinfo += membership.party + membership.enrol + membership.leave;
}
politinfo += "</span></div>";
$(politinfo).appendTo(politlist);
}
}
Since you're adding elements dynamically, you need to use event delegation:
$('#list').on('click', '.politician a', function(e) {
// your code
});
This is happending because your html is not loaded when you add click event listener to it.
Wrap your code in document.ready function, like this:
$(function(){
$('.politician a').click(function (e) {
var $this = $(this).parent().find('span');
$(".politician span").not($this).hide();
$(this).toggle();
e.preventDefault();
});
});
http://plnkr.co/edit/gist:1986619?p=preview
I'm trying to use the same function to slide up and down a text area. using jquery's slidetoggle.
How can I make javascript detect the clicked element in order to know which box to expand.
Here is what I have
function slidedown(id){
$(id+'text').slideToggle(500);
}
that is my function
in my html I have this
<a id="reroof" href="javascript:slidedown(this)">reroof</a>
the section i want to expand is called rerooftext
however when I check the value of id.id I says undefined.
Any ideas?
try the following code:
html code:
<a id="reroof" href="#" onclick="javascript:slidedown(this)">reroof</a>
JS code:
function slidedown(val){
var id = val.id;
alert(id);
$(id+'text').slideToggle(500);
}
In html you are passing the element(this refers the element not an id)
Working Example:
http://jsfiddle.net/jAkMq/
In your HTML:
<a id="reroof" href="#">reroof</a>
In your javascript:
$("#reroof").click(function (e) {
var id = "#" + this.id + "text";
$(id).slideToggle(500);
e.preventDefault();
});
try this
<a id="reroof" href="javascript:void(0)" onclick="slidedown(this)">reroof</a>
function slidedown(obj){
$(obj.id+'text').slideToggle(500);
}
javascript:slidedown(this). here this will be the element not the id