how to use jquery.before() to insert before Dom elements? - javascript

I'm using this code to insert before all elements in a specific div.
$.post('getcomments.php', {rid:1, frm: 10,to:20}, function(data) {
$("#main_post_comments").before(data);
});
the first time the page loads the function works fine
but after that is always append before the original html element that was written in the original html code not the last appended element that I requested with the $.post
this is the first time the page loads (firs item is comment 102):
This is after inserting the first comment (comment 103 is insrted after 102) correctly:
This is after inserting the second comment (comment 104 also inserted after comment 102)
How to insert the new data before every element in the "#main_post_comments" even if it is inserted dynamically?

Use prepend instead of before
$("#main_post_comments").prepend(data);

Try this:
$.post('getcomments.php', {rid:1, frm: 10,to:20}, function(data) {
$("#main_post_comments").insertBefore(data);
});
Maybe you are looking for insertBefore();
http://api.jquery.com/insertbefore/

Related

Append different div to divs loaded by ajax request(Infinite scroll)

I am using this plugin on my website. You will be able to see the HTML structure it is generating. I am trying to insert custom div after every 5 divs. Since it is loaded asynchronously, I am not able to append div that I wanted. I tried adding the following code which is used in normal situation
$(".alm-reveal:eq(0)").append("<div>Firstdiv</div>");
$(".alm-reveal:eq(1)").append("<div>Second Image</div>");
$(".alm-reveal:eq(2)").append("<div>Third IMage</div>");
$(".alm-reveal:eq(3)").append("<div>Fifth Image</div>");
$(".alm-reveal:eq(4)").append("<div>Sixth Image</div>");
$(".alm-reveal:eq(5)").append("<div>Seventh Image</div>");
$(".alm-reveal:eq(6)").append("<div>Eigth Image</div>");
$(".alm-reveal:eq(7)").append("<div>ninth Image</div>");
which obviously did not work. I also tried adding it in the success function.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal").append("<div>Firstdiv</div>");
}
But since it is in the loop, it is repeating. I am quite not sure how to achieve this. How do I trigger append function every time an ajax request is made and append different divs I wanted in proper place. Hope I am clear.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal:last").append("<div>"+data+"</div>"); //selects last div in that class
}
data should be passed accordingly to get different data in the div.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal:last").append("<div>"+data+"</div>"); //selects last div in that class
}
every time you append, you should append to last div in that particular class
I am answering my own question though I am not sure if this is the efficient way to do. But it works 100% the way I wanted.
if(data.indexOf("aj-l-main-entry-8") > -1) //Making sure AJAX div is loaded
{
if(document.getElementById("element-id") == null) { //Appending div only once
$("#id_of_the_div_you_want_to_append_to").append('<div></div>');
}
}
I have added the above code in the success function.

Dynamically change Tweet Button "data-text" contents

This question comes very closely to what I'm after: Replace an Attribute in the Tweet Button with Jquery
However, the suggested solution works just once. That is, I cannot use it in my switch statement like this:
switch(element.id)
{
case "t1":
$(document).ready(function(){
$('a[data-text]').each(function(){
$(this).attr('data-text', Text_Variant_1);
});
$.getScript('http://platform.twitter.com/widgets.js');
});
break;
case "t2":
$(document).ready(function(){
$('a[data-text]').each(function(){
$(this).attr('data-text', Text_Variant_2);
});
$.getScript('http://platform.twitter.com/widgets.js');
});
...
}
What happens is that the data-text attribute is set according to whichever case happens first and doesn't change afterwards.
How can I change data-text attribute of a Tweet Button as many times as I need?
Update: here's the page I'm working on: http://zhilkin.com/socio/en/
The Traits table can be safely ignored. What I want to do with the Sociotypes table is that when you click on a type, the data-text of the Tweet Button below the description on the right should be changed accordingly.
Right now it works like this: if I hover on or click "Don Quixote", then data-text is set to "... Don Quixote ...", and it stays the same if I click "Dumas" later. And vice versa: if I hover on or click "Dumas", then data-text is set to "... Dumas ..." and doesn't change if I click "Don Quixote". (Other types are empty at the moment.)
So, the Tweet Button is only changed the first time I run the script, but I need it to be updated as many times as the type changes.
I struggled with this for a couple of hours this morning, but finally got it working! The problem is essentially that you can only include the twitter widgets.js script once in the page, and that script evaluates the data-text attribute on load. Therefore, in your example, you dynamically set the data-text attribute before loading the script, which will work as expected. However, you can then make no further updates as the script has already run.
I saw this article suggesting you can call twttr.widgets.load() again at runtime to re-evaluate and re-render the buttons, however that didn't work for me. This is because that function re-evaluates <a> tags, not <iframe> tags!
So the solution, as pointed out here, is to completely remove the rendered <iframe> from the DOM, then make a new <a> element with all the appropriate attributes before calling twttr.widgets.load() to finally re-evaluate it and turn it into an <iframe>.
Please see this fiddle for a working example!
You can also use Twitter's createShareButton API call:
function callAsRequired(){
var nodeID = 'YourTwitterNodeID'
//Remove existing share button, if it exists.
var myNode = document.getElementById(nodeID);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
//Create button and customise
twttr.widgets.createShareButton(
'http://your.custom.url.here/',
document.getElementById(nodeID),
{
count: 'none',
text: 'Your custom tweet here'
});
}
since you are using each loop you can use if statements instead:
$(document).ready(function(){
$('a[data-text]').each(function(){
if (theCase == 1) {
$(this).attr('data-text', Text_Variant_1);
}
else if (theCase == 2) { ... }
})
});

Add table row using after() and load()

My question is very similar to this topic. I'm trying to use jquery, so that when you click on a table row, it loads certain information from another page and insert as a new row below the one clicked on.
If I didn't have to load the data from another page, I could just use something like:
clicked.after('<tr><td>Something</td><td>Something</td></tr>');
If I wanted to load and insert into something other than a table, I could use something like:
clicked.after($('<div>').load("Page2.aspx"));
So how do I go about combining these two together? If I have on the first page:
clicked.after($('<div>').load("Page2.aspx"));
And have Page2.aspx returning:
<tr><td>Something</td><td>Something</td></tr>
I would get this:
<tr><td>...</td><td>...</td></tr><div><tr><td>Something</td><td>Something</td></tr></div>
Which is not valid HTML.
Any suggestions?
Use after in the callback of a get rather than load.
$('.clicked').click( function() {
var $clicked = $(this);
$.get('Page2.aspx', function(html) {
$clicked.after(html);
});
});

SCRIPT 600 Error : Invalid target element for this operation

I have a php site that works fine in FireFox and Chrome, but breaks completly in IE.
Here is just one of the scripts that is throwing an error...
SCRIPT600: Invalid target element for this operation.
function loadDeals() {
$.get("modules/recommendations/viewrecommendations.php",{},function(response){
document.getElementById("dealdata").innerHTML = response;
});
}
It throws the error on the line that sets the innerHTML...Any ideas why this is happening?
IE has a problem replacing TBODY contents with innerHTML. The jQuery given above works; if you are not using jQuery, another solution is to have a <div id='helper' style='visibility:hidden'/> somewhere in the page - when the response arrives, put the value with a surrounding <table> tag into the hidden div, then use the DOM to remove the old contents from your visible tag and insert the elements from the hidden tag 1 by 1:
var a=document.getElementById("dealdata");
while(a.firstChild!=null)
a.removeChild(a.firstChild);
var b=document.getElementById("helper");
b.innerHTML="<table>"+this.responseText+"</table>";
while(b.tagName!="TR") {
if(b.tagName==null)
b=b.nextSibling;
else
b=b.firstChild;
}
for(;b!=null;b=b.nextSibling)
a.appendChild(b);
Try this: are you using jquery?
also looks like you have an extra set of brackets in there (i think between ,{},)
function loadDeals() {
$.get("modules/recommendations/viewrecommendations.php",function(response){
$("#dealdata").html(response);
});
}

How to add jquery events to added classes?

I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)
this is the html . the id page, is the highlighted number
<div class="grid_1 pagelink" id="page"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:
$('.pagelink').live('click', function(e){
e.preventDefault();
var frame = $(this).text() - 1;
var frames = 240 * frame;
// $('#gal').animate({marginLeft:'500px'},'slow');
$('#gal').animate({marginLeft: "+="+frames+'px'},'slow');
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
// $('#book').animate({ left: '50' });
})
I thought that the .live() would do that for me but it is not working.
I hope you could help
thank you
Previous, this is because you are removing the class of link "pagelink" which were used to map the clicked event.
Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like
$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');
live should work fine. i think you have a bug in your code, and its probably here:
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
what exactly are you trying to accomplish with this code?
when you click on page2, the you set the div's id to be page, but now you have 2 elements with an id of page, and when you select that id, you get the first one (ie page1), but you still remove the class pagelink from page2
in other words, the bug is that at some point you will have 2 elements with the same id (and ids must be unique btw) so when you select that id with $('#page') you always get the first one

Categories