I am creating a page in which when an anchor tag is click it pulls in data from the URL associated with that anchor. I want the data pulled in to only display in the div class popup associated with that anchor. Each anchor and div class popup are in a parent div named employee. When it is click now it pull in the data but to every div class popup on the page. I have tried .find and .children but neither is working. Can anyone help me?
(function($) {
function find_page_number(element) {
return parseInt(element.html());
}
$('.leadership').on('click', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
$(".popup").empty();
$('.popup').append($(html).find('.single-member').html());
}
});
})
})(jQuery);
<div class="employee">
<a class="leadership" href="different for each">
<img src="#" />
</a>
<div class="popup"></div>
</div>
<div class="employee">
<a class="leadership" href="different for each">
<img src="#" />
</a>
<div class="popup"></div>
</div>
That's because you're using the class selector .popup and you have multiple popups on the page.
To get a reference to the popup you want, you can go up to the parent and look for a popup in the element, or look at the siblings of .leadership.
Something like this may work:
$('.leadership').on('click', function(event) {
event.preventDefault();
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
// Get a reference to your parent employee div
var parent = $(this).parent();
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
var popup = parent.find(".popup");
popup.empty();
popup.append($(html).find('.single-member').html());
}
});
I think this will do it for you - you need to target the child popup tag with .find()
$('.leadership').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent();
^^^^^^^^^^^^^^^^^^^^
page = find_page_number($(this).clone());
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType: 'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function(html) {
var popup = $this.find(".popup");
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
popup.empty();
popup.append($(html).find('.single-member').html());
}
Related
Here's my Like button,
<a class="wst-click update_data" wst-href="{% url 'data:like' content.id %}" href="{% url 'data:like' content.id %}" >{{ data.likes.count }} Like</a>
This is what I'm doing for 'Like' functionality,
$('.wst-click').click(function(e){
e.preventDefault();
var this_ = $(this);
var wstURL = this_.attr('wst-href');
$.ajax({
url: wstURL,
method: 'GET',
data: {},
success: function (data) {
$('.update_data').text(data);
}
})
});
So, when I press the Like button instead of Returning the number of new Likes, it's returning the raw html code of entire webpage. How can I fix that?
It's working perfectly alright. I have added dummy example here.
<a class="wst-click update_data" wst-href="data/like/10" href="data/like/10" >11 Like</a>
$('.wst-click').click(function(e){
e.preventDefault();
var this_ = $(this);
var wstURL = this_.attr('wst-href');
$('.update_data').text('12 Like');
/*$.ajax({
url: wstURL,
method: 'GET',
success: function (data) {
var like_text = $(data).find('.update_data').html();
$('.update_data').html(like_text);
}
});*/
});
JSFiddle
I am trying to drill down to detail rows when a user clicks on a cell in table R.So when a cell is clicked Table L is loaded and Table R has to be hidden . I tried to use $('#RegionTable').hide but it hides the table when it is loaded .but i want it to be hidden only on second click
`<script type="text/javascript">
$(document).ready(function($) {
$('#lsearch').click(function(){
makeAjaxRequest();
});
$('form').submit(function(e){
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'php/l_search.php?op=1',
data: {name: $('#l').val()},
type: 'get',
success: function(response) {
$('table#R tbody').html(response);
}
});
}
});
$(document).on('click','#loc_code',function() {
var url = $(this).text();
url = 'php/l_search.php?op=2&l_code='+url ;
$.ajax({
url: url,
type: 'get',
success: function(response) {
$('table#L tbody').html(response);
}
});
return false;
$('#R').toggle("slide", { direction: "right" }, 1000);
});
</script> `
Instead of:
.on('click')
do:
$('#loc_code').dblclick(function(){
https://api.jquery.com/dblclick/
actually I used $("#R").hide(); and it works
I want to create one page site by change div content with out load new page.
So, I've implemented my code like this:
HTML:
<title>Post title</title>
<body>
<a class="js-post-bt" href="/post/1" data-id="1"></a>
<a class="js-post-bt" href="/post/2" data-id="2"></a>
<a class="js-post-bt" href="/post/3" data-id="4"></a>
<div id="post-container"></div>
</body>
Script
$(function() {
$(".js-post-bt").on("click", function(e) {
var post_id = $(this).attr("data-id");
$.ajax({
url: "post_title.php?id="+post_id,
success: function(data) {
var title = data;
$.ajax({
url: "post.php?id="+post_id,
success: function(data2) {
// how to change url to post/post_id?
document.title = title;
$("#post-container").html(data2);
}
});
}
});
e.preventDefault();
});
});
Is it possible to create only one ajax call and get returned data either title and post data.
ANd how to change browser address to post/post_id after anchor link clicked.
You can use history api in HTML5
Demo -> http://html5demos.com/history
Howto ->
http://diveintohtml5.info/history.html
http://html5doctor.com/history-api/
If you want to make just one ajax call, which is a good idea, you will also need to change the code on your server.
It should respond a json object:
json_encode( array( "title" => $title, "post_data" => $post_data ) );
And you ajax call becomes:
$(function() {
$(".js-post-bt").on("click", function(e) {
var post_id = $(this).attr("data-id");
$.ajax({
url: "post_title.php?id="+post_id,
dataType: "json",
success: function(json_data){
document.title = json_data["title"];
$("#post-container").html(json_data["post_data"]);
}
});
e.preventDefault();
});
});
I am trying to show and hide loader image only for the element which has been clicked, on ajax process.
Here is my HTML
<table>
<tbody>
<tr>
<td class="status-item">
<!-- element to show/hide -->
<i id="1" title="" rel="tooltip" class="cursor help fa fa-envelope read" data-original-title="Read"></i>
<!-- element to show/hide -->
<span style="display:none" class="loader">
<img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
</span>
</td>
<td class="status-item">
<!-- element to click -->
<i id="2" title="" rel="tooltip" class="cursor help fa fa-envelope unread" data-original-title="Unread"></i>
<!-- element to show/hide -->
<span style="display:none" class="loader">
<img width="24" height="24" alt="loader" src="http://localhost/atlas-dev/application/modules/admin/assets/img/loader.gif">
</span>
</td>
</tr>
</tbody>
</table>
JS code
// when click on read icon
$('.read').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
$('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$('span.loader').hide();
}
});
});
// when click on unread icon
$('.unread').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
$('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$('span.loader').hide();
}
});
});
I have tried $(this).next() but that didn't work and stop even show/hide the loader image
$('.read').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
$(this).next('span.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$(this).next('span.loader').hide();
}
});
});
$('.unread').click(function() {
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/seen/' + id;
$(this).next('span.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
$(this).next('span.loader').hide();
}
});
});
Any idea how to resolve this when the loader image only shows for the element (icon) been clicked?
Use a different varaible for this as it will not work in success callback like,
var $this=$(this);
$.ajax({
type: 'POST',
url: url,
success: function() {
$this.next('span.loader').hide();// use $this here not $(this)
}
});
It can be done by using a simple approach like add a data-type attribute in <i> tag like,
HTML
<i id="1" data-type="seen" data-original-title="Read" ...
......
<i id="2" data-type="unseen" data-original-title="Unread" ...
And in Script try this,
$('.read, .unread').click(function() {
var id = this.id,// use this.id simply
$this=$(this), // take a copy of current jquery object
type=$this.data('type');// seen/unseen see above html
var url = base_url + 'admin/notifications/'+type+'/' + id;
$this.next('span.loader').show();
$.ajax({
type: 'POST',url: url,data:{id:id},
success: function() {
$this.next('span.loader').hide();
}
});
});
Try this :
// when click on read icon
$('.read').click(function() {
var current = $(this);
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
current.parent().find('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
current.parent().find('.loader').hide();
}
});
});
// when click on unread icon
$('.unread').click(function() {
var current = $(this);
var id = $(this).attr('id');
var url = base_url + 'admin/notifications/unseen/' + id;
current.parent().find('.loader').show();
$.ajax({
type: 'POST',
url: url,
success: function() {
current.parent().find('.loader').hide();
}
});
});
Hi from some reason my live() function doesn't work.
i want to add a mew li element with click functionality by clicking on li element inside the ulAllApps. a new li element created inside the ulMyApps but without the click functionality.
HTML:
<div class="MyApps" >
<ul class="ulMyApps">
<li class="MYLinkTR">app1</li>
</ul>
</div>
<div class="AllApps">
<ul class="ulAllApps">
<li class="IECLinkTR">app1</li>
<li class="IECLinkTR">app2</li>
</ul>
</div>
jQuery code:
$(document).ready(function () {
$(".IECLinkTR").click(function () {
var tmp = $(this).html();
$.ajax({
type: "POST",
url: window.location.href+"/addToMyLinks",
data: "{'app': '" + tmp + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$(".ulMyApps").append("<li class=\"MYLinkTR\">"+ tmp +"</li>");
},
error: function (msg) {
alert("You have already have that app");
}
});
});
$(".MYLinkTR").live('click', function () {
var tmp = $(this);
$.ajax({
type: "POST",
url: window.location.href + "/removeFromMyLinks",
data: "{'app': '" + $(this).html() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
tmp.closest('li').remove();
},
error: function (msg) {
}
});
});
});
from some reason the new li element created dynamically dont have the CLICK functionality coming from the Live function......
All I can see is that on your MYLinkTR click function you are trying to remove the tmp.closest('li'). Now looking at the docs I think closest is moving up the DOM looking for the closest next ('li') rather then the one it is on. Are you sure you don't want tmp.remove()?
Perhaps seeing if an alert is thrown first on the click to see if it is firing as you don't do anything on error. Something might be happening here that you are not aware of. The other options is changing LIVE to delegate and attaching this to the ul and see if this fires
$('ul.MyApps').delegate('li', 'click', function(e){
alert('does this at least fire');
});