I have the following information in my html
<div idd="8327" id="like" class="geen">Like</div>
<div idd="8329" id="like" class="geen">Like</div>
<div idd="8330" id="like" class="geen">Like</div>
<div idd="8331" id="like" class="geen">Like</div>
I want to send the ID to a specific php page to execute with .get.
it works. but it only works for the first div. The script is only executed when clicking the div with id 8327. When clicking another div, nothing happens :
What can be wrong ?
<script type="text/javascript">
$(document).ready(function() {
$("#like").click(function(event){
var code = $(this).attr("idd");
$.get("like.php", { code1: code, code2: "Kim" } );
alert("Thanks for clicking!");
});
});
</script>
when you use the id selector in Jquery you only select the first element so to get all elements use a class selector instead. So change:
$("#like").click(
To
$(".geen").click(
Switch your selector to use the class. jQuery assumes that # (id) is unique and will use the built in browser function document.getElementById().
$(".geen").click(function(event){
var code = $(this).attr("idd");
$.get("like.php", { code1: code, code2: "Kim" } );
alert("Thanks for clicking!");
});
use your class as selector because id can not be duplicate( which is in your case)
So through this
$(".geen").click(function(event){
var code = $(this).attr("idd");
$.get("like.php", { code1: code, code2: "Kim" } );
alert("Thanks for clicking!");
});
Related
My homepage loads pages with jquery ajax call. In the Pictures subpage there is 3 div, and each loads a php with ajax, too. I would like to include a gallery js to every sub-subpage. However, the js does not loads. Here is my code in the index.php for the subpages:
<script type="text/javascript">
$(function()
{
var actualmenu = 'fooldal.html';
$('#tartalom').load('fooldal.html');
$('.fooldal').click(function()
{
$('#tartalom').load('fooldal.html');
actualmenu = 'fooldal.html';
}
);
$('.kepek').click(function(){
$('#tartalom').load('kepek.php', function(){
$(document.body).on('click', 'a[rel=gallery_view]' ,function(){
$(this).KeViewer('gallery', {'percent' : 70});
return false;
});
});
actualmenu = 'kepek.php';
});
});
</script>
And there is my kepek.php page:
<script type="text/javascript">
$(function()
{
$('#galeria').load('kepek_csenge.php');
$('#csenge').click(function()
{
$('#galeria').load('kepek_csenge.php');
}
);
);
</script>
<div id="albums">
<div class="album" id="csenge">
Csenge
<br/>
<img src="albumok/csenge/01.jpg" alt="csenge"/>
</div>
</div>
<div style="clear:both;"></div>
<div id="galeria" width="500"></div>
Inside kepek_csenge.php there are rows like this, which should trigger the gallery:
<a class="thumb_wrapper" href="albumok/csenge/01.jpg" title="Első" rel="gallery_view"><img alt="" class="thumb" src="albumok/csenge/thumbs/01.jpg" /></a>
Unfortunately it just loads a new page with the selected picture. How can i use the galleryviewer js in this page?
It is important to understand that the document you are loading into was ready long before you load anything with ajax
This means that the code wrapped in $(function() in your ajax pages will fire as soon as it is encountered. If that code precedes the html it references then it won't find those elements since they don't exist yet.
Try moving all the script tags in the ajax loaded content to after the html.
It is generally easier to put all the scripts into one and wrap different parts in functions and then just call those functions in the success callback of load();
function loadPage(page){
var url = '...' +page;
$('#selector').load(url, function(){
initViewer();
});
}
I'm developing a PHP class for pagination using $_GET. It is standart, found from the web.
Here it works good :
page.php :
<form method ="GET">
<?php
$pages = new Pagination();
echo "<br/>";
?>
</form>
I want to use this page.php in index.php with ajax / jquery and staying in the index.php
<!DOCTYPE html>
<body>
<div id ="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.post('./page.php',
function (data) {
$('#result').html(data);
}
);
});
</script>
</body>
</html>
Is this possible way ?
Is it possible that instead of using jquery's $.post, that you can replace $.post with $.get?
So instead of $.post as you said its looking for $_GET['page']
So you could do something like this:
<script>
$(document).ready(function(e) {
var page_num = 1;
$('.nextpage').on('click',function(e){
e.preventDefault(); // stop the link from going anywhere
$.get('./page.php',
{
page: page_num // this is the same as $_GET['page']
},
function (data) {
$('#result').html(data);
page_num++;
}
);
});
$('.nextpage').click(); // emulate the click to get the first page
});
</script>
and in your body something like this:
Next page
It's worth noting that on your page.php you don't need to have that form as i cannot see it's going to be doing much
UPDATE
So to have the pagination manipulated on the index.php from page.php you could have page.php return a hidden div called .hidden_pagination along with its full content.
<script>
$(document).ready(function(e) {
$('.pagination').on('click','a',function(e){
e.preventDefault(); // stop the link from going anywhere
var next_page = $(this).attr('data-id'); // get the next page from the link data-id attribute
$.get('./page.php',
{
page: next_page // this is the same as $_GET['page']
},
function (data) {
$('#result').html(data);
$('.pagination').html($('#result').children('.hidden_pagination').html()); // add the new pagination to the current pagination
}
);
});
$('.nextpage').click(); // emulate the click to get the first page
});
</script>
<div class="pagination">
Next page
</div>
<div id="result">
this will be replaced with the ajax response
</div>
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I have a link that opens a modal when clicked, however that element also has a data-id="#id here" attribute that I need to grab so I can pass it to my php script for processing. How can I accomplish this?
My JS code:
$(document).ready(function() {
$('#edit_general').click(editModal);
});
function editModal(event)
{
var modal = $('#editModal');
modal.modal({
show: true
});
}
My html:
<li><a id="edit_general" href="#editModal" data-uid="<?php echo $u->id; ?>">Edit General</a></li>
I tried using the this keyword but it didn't work.
How can I accomplish this?
Try this: Demo http://jsfiddle.net/szS2J/1/ or http://jsfiddle.net/ug7ze/
$(this).data('uid')
Hope it fits the cause :)
like this:
$('#edit_general').click(editModal);
$(this).data('uid')
full
$(document).ready(function() {
$('#edit_general').click(editModal);
});
function editModal(event) {
alert($(this).data('uid'));
var modal = $('#editModal');
modal.modal({
show: true
});
}
You can get the value using the attr method: $(this).attr('data-uid')
Like this stored in data_id.
$(document).ready(function() {
$('#edit_general').click(function() {
var data_id = $(this).data('uid');
var modal = $('#editModal');
modal.modal({
show: true
});
});
});
With this javascript I'm printing list of records:
<script type="text/javascript">
$(document).ready(function(){
function hide(){
$('#friend_list').fadeIn(100);
$('#friend_list').load("friend_list.php");
};
setInterval( hide,100 );
});
</script>
in friend_list.php I'm getting all the records relevant for user and returning it like this:
echo "<div class='friend' id='friend'>" . $a["username"] . "<input type='hidden' value='$id'/>" . "</div>";
And I'm using this simple script to make overlay:
<script type="text/javascript">
$(document).ready(function(){
function overlayerOn(){
$('#overlayer').fadeIn(800);
}
function overlayerOff(){
$('#overlayer').fadeOut(800);
};
$('#board').click(function(e){e.stopPropagation();});
$('.friend').click(function(e){
e.preventDefault();
overlayerOn();
var $br = $('#board');
$br.css('display', 'block');
});
$('#overlayer').click(function(e){
overlayerOff();});
});
</script>
Overlay is working as long as I trigger it with some other id or class than the one used from friend_list.php. But that is the one I need. Any idea why overlay is not working when triggered by class .friend?
Thank you...
Use (live is deprecated)
$('.friend').live('click', function(e){
// your code
});
If you are using latest version of jquery then use
$('body').on('click', 'div.friend' , function(e){
// your code
});
It's happening because you are loading content dynamically using
$('#friend_list').load("friend_list.php");
so click is not working because those contents were not in the DOM when it was loaded.