teesee07 Posted June 15, 2011 Share Posted June 15, 2011 Hey guys, I'm pretty new here and am just recently learning how to use Ajax. So, I'll get to the point quickly: I am creating a website in which people can create their own blog, and when they do they are able to select the category/categories their blog primarily focuses on (sports, technology, etc.). In addition, on the home page I want to make it so that people can see a list of the most popular blogs and also filter them by selecting (with checkboxes) which category/categories they are looking for. Essentially, I have pretty much created the Ajax page that displays the most popular blogs and allows the users to select one blog category they would like to be used as a filter (i.e. if they select the 'Sports' checkbox then it will show the most popular sports blogs. HOWEVER, my issue has arisen in my desire to allow the users to select several checkboxes (i.e. if they select sports and technology it will display BOTH sports oriented blogs and technology oriented blogs). I was able to accomplish this by creating a <span> field for each of the checkboxes the users can select. For example: they can select the checkboxes 'Sports', 'Technology', 'Business', 'Politics', and 'Other so I created a separate <span> field for each of the 5 checkboxes and when each checkbox is selected the appropriate content is loaded into it. However, I was looking for a more efficient way to display the content of multiple pages (categories) in one <span> field. I want to do this primarily because having multiple <span> fields will leave uneven spacing if the user selects the first, fourth, and fifth checkboxes for example (large space in between the Sports and Politics lists but then small space in between Politics and Other). Also, having to create a <span> tag for each filter option obviously really limits my ability to develop the filtering options further. Sooo, in short.. I am wondering if anyone knows if there is anyway to ADD the content of a page to the end of the text inside of a <span> (or <div>/<p>) tag RATHER than replacing the text present in the span tag. For example, if I select "Sports" then it will list all of the sports oriented blogs in the <span> field. Then, I select "Technology" and I would like it to ADD the list of all technology oriented blogs after all of the sports oriented blogs (in the same <span> field). And if I selected "Business" after that, then I would like it to list the sports, technology, and business oriented blogs all in the same span field. OR, I was thinking of another way to achieve what I am trying to do here. I was thinking... if there is any way I could submit a form with Ajax without refreshing the page, then I could add a submit button (rather than just having the checkboxes) and POST/GET a '1' or '0' value for each checkbox. Then, I could create a separate page (which loads into a single <span> field on the original page obviously) and that separate page would have a bunch of 'if' statements that verify the value of each checkbox and either display (or don't display) the appropriate lists of blogs. One advantage to using this method is that I would be able to separate each list by category with appropriate spacing (unlike the way I currently have it), whereas if I use the method where I add the content to the end of the single <span> field then I would not be able to separate the lists by category (not the end of the world, but I like having flexibility/customization ability). Hopefully this all makes sense to you guys and isn't too too complicated. I've spent several hours now trying different ways to achieve this and haven't been successful thus far. If anyone can help it would be SO greatly appreciated! Here is the code from the appropriate file if it helps at all: <?php include_once "rnheader.php"; ?> <html><head><title>Blogs List Testing</title></head> <body> <center /> <h1>Blogs List Testing</h1> <form name="filter" action=""> <input type="checkbox" name="basket" onClick="sports()" />Sports <input type="checkbox" name="foot" onClick="technology()" />Technology <input type="checkbox" name="base" onClick="business()" />Business <input type="checkbox" name="soccer" onClick="politics()" />Politics <input type="checkbox" name="other" onClick="other()" />Other </form> <span id="sports_result"></span><br /> <span id="tech_result"></span><br /> <span id="business_result"></span><br /> <span id="politics_result"></span><br /> <span id="other_result"></span><br /> <script language="JavaScript" type="text/javascript"> function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); //Not IE } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); //IE } else { alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox."); } } var receiveReq = getXmlHttpRequestObject(); function sports() { if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { receiveReq.open("GET", 'viewblogs_sports.php', true); receiveReq.onreadystatechange = handleFilter1; receiveReq.send(null); } } function technology() { if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { receiveReq.open("GET", 'viewblogs_tech.php', true); receiveReq.onreadystatechange = handleFilter2; receiveReq.send(null); } } function business() { if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { receiveReq.open("GET", 'viewblogs_business.php', true); receiveReq.onreadystatechange = handleFilter3; receiveReq.send(null); } } function politics() { if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { receiveReq.open("GET", 'viewblogs_politics.php', true); receiveReq.onreadystatechange = handleFilter4; receiveReq.send(null); } } function other() { if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { receiveReq.open("GET", 'viewblogs_other.php', true); receiveReq.onreadystatechange = handleFilter5; receiveReq.send(null); } } function handleFilter1() { if (receiveReq.readyState == 4) { document.getElementById('sports_result').innerHTML = receiveReq.responseText; } } function handleFilter2() { if (receiveReq.readyState == 4) { document.getElementById('tech_result').innerHTML = receiveReq.responseText; } } function handleFilter3() { if (receiveReq.readyState == 4) { document.getElementById('business_result').innerHTML = receiveReq.responseText; } } function handleFilter4() { if (receiveReq.readyState == 4) { document.getElementById('politics_result').innerHTML = receiveReq.responseText; } } function handleFilter5() { if (receiveReq.readyState == 4) { document.getElementById('other_result').innerHTML = receiveReq.responseText; } } </script> </body></html> EDIT: I did a lot of Googling to try to find solutions to this and just thought I'd state that I saw some discussions about using jQuery for form submission without refreshing the page (my second proposed idea). I don't know if it would be useful for the first idea (adding the content to existing content in the <span> field), but just thought I'd state that since I know someone is going to say why aren't you using jQuery or whatever. Essentially, I just wanted to see if it is possible to ADD content to a <span> field instead of just replacing the existing content in the field.... and also if the second option would be the best way to achieve what I am looking for if I were to learn jQuery. Thanks again. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.