jQuery – show / hide button for multiple div containers with AJAX and JSON
This time I will consider another case of loading content into div containers using jQuery, AJAX and JSON request. In an other example I showed you how you can simply load content into one div container using AJAX and provide a user show and hide button.
In this example I want to consider a different case. Sometimes you don't only have one div container which needs to be filled out with content but multiple containers which need to be filled out with content according to the link which was clicked by the user. Again we will provide a functionality of changing the label of our button. We will extend this example by handling a larger amount of data in our response. For that reason we will use build in functionality of jQuery to handle JSON requests.
Loading content into multiple div containers using jQuery and JSON
Because I didn't write anything in a long time and because I just changed the layout of my site, I decided to write a new example about jQuery and extend it this time with JSON. After studying google analytics I noticed that people are mostly interested in jQuery examples and specifically in showing and hiding content after users click. Because I already covered this example, I decided that this time I'll show you, how to load content into different div containers at one time. If you assume that you want to load content into more boxes, you definitely need to use JSON (JavaScript Object Notation). Of course one can say that XML would be suitable for this example as well, but the advantage of JSON is that it doesn't produce that much overhead. Of course XML is more versatile than JSON but with build in function of jQuery you can easily process received date.
New design
Because I am not a CSS guru and I was tired with adjusting my style sheets for every single browser (mostly IE6) I decided to redesign my blog and use YAML framework. I really enjoyed working with it. It gives you plenty of dummy layouts, which you can use and change according to your needs. I am still not fully satisfied with this layout, but it is better than before. If there are any designers around looking at my blog I have an offer for them. I am not a designer, but I can help you with your programming. If you have problems with your site, we can make a deal. If it's not a big project I can write it for you, and you can make a new design for me. How does it sound?:) I'm waiting for your offers.
jQuery drop down – loading content according to option
It was a really busy day for me today, so I came up with a simple code for displaying content according to the option our user chooses from drop down list. What we will try to accomplish is to provide a user a drop down list and load content from a remote PHP file using AJAX request. Additionally we will filter the data and display only the content relevant to the chosen option. We will also make use of chainability of jQuery and add a nice fade in effect after the text is loaded.
Setting boundaries for google map with more markers using jQuery
For a project I'm currently working on I had to display more markers in one google map. No problem at all, but only if all of them are placed in one city. You can just set up default level for the city and display as many markers as you want. In my case I had to display latest markers, which were saved all over the country. One would say no problem at all, just use default zoom level for the country and display the markers. What if 10 latest markers were placed in one city though? It would look stupid if they would be displayed covering each other. Additionally we do not want to use an onload event, therefore, we will use jQuery in this example. For this kind of problem google came up with a pretty nice solution.