Develop Reference

Pulling page in jQuery when only fragment is needed

I have a function for liking posts in a forum. When called, the function works but reloads the page into the div, resulting in a mess. When the likeit button is clicked, the database pulls a count and this function is called to reload the div. I'm trying to load only the div from the function without the extra HTML; how do I manage this?
I attempted to change the load function to a different php page with only the function related code inside, but this gives me a 500 error. If that should work, it's most likely that I'm not pulling the right code into the separate file.
function like_post(id)
{
$("#like" + id).load("forums.php?t=" . $topic['id'] . "&like=" + id, function() {
$("#likelink" + id).empty();
$(function(){$(".smallrollover").tipTip({delay:10});});
});
}
The load function is pulling all of the HTML from the forums.php page into the like div rather than only the relevant content.

Firstly with regard to syntax, note that . is the PHP concatenation operator, and you don't need the document.ready handler around the tipTip() call.
With regard to load(), the method accepts a selector used to filter the response HTML so that only the elements you target will be appended to the target:
function like_post(id) {
$("#like" + id).load(`forums.php?t=${$topic['id']}&like=${id} #like${id}`, function() {
$("#likelink" + id).empty();
$(".smallrollover").tipTip({ delay: 10 });
});
}
That being said, this isn't a great idea as you're still loading the entire page again and then pulling out the relevant parts when all the HTML has been received. It would make more sense to create a separate endpoint which returns only the required HTML, or even JSON which you then build the required HTML structure from on the clientside.
I would also suggest you look in to using common classes as working with dynamic ids in the manner you are generates some unnecessarily ugly code.

Load more posts with Ajax and JS

I want to scroll down to load more posts instead of loading all posts in the first time.
The one way that I know is using ajax(getpost) and JS(check scroll down)
When JS scrolling down event occurs,use JS to append a new post with html code
so for the append content, I am using '/' at the end of each line and put new element with '"+XXX+"' and need to change " to "
but I think it is not very efficient way for me to change post html code
Is there any other way to do this function instead of every time append a whole bunch of code? since one post may more than 100 lines of code, so it is too inconvenient.
append("<div class='post'>\
<h2>"+title+"</h2>\
<p>"+description+"</p>\
.....\
</div>");

Javascript hyperlinks don't work with jQuery append

I need some help pointing to the right direction. I have a jQuery code what pulls some HTML content via the $.get function after the page is loaded, puts them into the $data variable and it's appended to the div_content.
Everything works perfectly, except after the appending the javascript links in the original content don't work.
The code part:
$(document.body).ready(function() {
$.get("content1.php", {id:"1234" }, function(data) {
// for example this is the pulled data
var data = 'link'
$('.div_content').append(data);
});
});
The standard tags, without javascript aren't affected, they work fine.
I found some advices like this - jQuery Appended elements with href and javascript doesn't work - and this - Appending a link with Jquery - and read the jQuery's .on() function but doesn't seem to resolve my exact problem with appending the content.
I have jQuery 1.10.1, thanks for all the inputs.

Without seeing what data may contain its difficult to see exactly what you're trying to achieve but I can see the fist thing you do after receiving the ajax response is overwrite the returned data which is obviously incorrect.
perhaps you meant something like this?:
$.get("content1.php", {id:"1234" }, function(i,data) {
var link = 'link';
$('.div_content').append(link);
});

Thanks for the responses and comments, mea culpa, it was my, a design error. I had to include the jquery and fancybox JS and CSS into the someotherpage.php (the data-id attribute), and now it's working.

Javascript - Loading filtering external html file

I'm needing some advice on how to filter an external html file.
I can load the file just fine with the following code.
$('body').load('files/my-links.html', function(data) {
document.write(data) ;
}) ;
Since the file contains several classes in the links, I want to filter the links shown by class. Allowing me to put all the external links in one file, then show only the ones I want at any given time. I also want to limit the number of links that I display at any time. So if there's 25 links to the lunchbox class, I can show only 10 at one time.
I've tried putting the whole thing in an array, but that hasn't helped. Any suggestions?

You can supply a selector to .load, for example:
$('body').load('files/my-links.html a:lt(10)');
It would do the same thing as using:
$.get('files/my-link.html',function(html){
$('body').html($(html).find('a:lt(10)'));
});
a:lt(10) means select the first 10 anchor tags.
You can of course filter by your class too while your at it: a.myclass or a.myclass:lt(10)

Adding images from a folder to website dynamically

I have a site which will have a gallery with 3 sections. Each section has up to 30 images. I will store the images in folders relating to the relevant sections (ie "img/gallery/category1", "img/gallery/category2" and "img/gallery/category3")
Basically instead of writing html to display each individual image, I would like to have a javascript loop which will look in the folder and display each image, and place the url within a predefined snippet of code, ie:
<div class="span4">
<img src="img/gallery/category1/IMAGE-FILENAME1">
</div>
<div class="span4">
<img src="img/gallery/category1/IMAGE-FILENAME2">
</div>
... etc, until all images from the folder have been processed... (also, I know I could be a bit smarter with the html above, but I want to communicate that I want each found image url to sit amongst a repeated snippet of code).
I'm still training in javascript, so I wondered whether there was a way I could do this?
Thanks

Javascript can't do this by iteself... however, if you had an XML or JSON formatted list of images and their respective locations, you could use ajax to get that file, parse it's contents, and create your markup.

I found an alternative solution.
I wasn't quite ready to tackle AJAX, JSON or anything listed below just yet. So I decided to look into using PHP. Solution as folows:
I first of all used the following to go to and read the contents of the folder to an array:
$directory = "DIRECTORY"
$dirhandler = opendir($directory);
$nofiles=0;
while ($file = readdir($dirhandler)) {
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}}
And then using a foreach loop I iterated through the array, everytime echoing the html output which referenced the filename found.
Works perfectly.

You cannot look directly at the directory on the server from Javascript. You could make an AJAX call to the server to get the list (in XML or JSON), and then create and append a new div for each file as you loop through the response.