‘Javascript’ Archive

jquery ajax read xml text and attribute

Below is example about using Jquery ajax to read text & attribute for each node of an internal xml file.

1. Example of the XML file included is below

<dates>
	<date value="2009-11-24">Tuesday, November 24</date>
	<date value="2009-11-25">Wednesday, November 25</date>
	<date value="2009-11-26">Thursday, November 26</date>
	<date value="2009-11-27">Friday, November 27</date>
	<date value="2009-11-28">Saturday, November 28</date>
	<date value="2009-11-29">Sunday, November 29</date>
	<date value="2009-11-30">Monday, November 30</date>
</dates>

2. Javascript jquery ajax call use to read text & attribute of the xml file above

function update_date_list()
{
    var dates = document.getElementById("ddl_date");
    var i = 0;
    jQuery.ajax({
		type: "GET",
		url: "date.xml",
		dataType: "xml",
		success: function(xml)
		{
			jQuery(xml).find('date').each(function(){
                dates.options[i] = new Option(jQuery(this).text(), jQuery(this).attr('value'));
				i++;
			});
		}
	});
}

3. For each xml node, we will use to create drop down list items

<select id="ddl_date" name="ddl_date">
	<option value="2009-11-24">Tuesday, November 24</option>
	<option value="2009-11-25">Wednesday, November 25</option>
	<option value="2009-11-26">Thursday, November 26</option>
	<option value="2009-11-27">Friday, November 27</option>
	<option value="2009-11-28">Saturday, November 28</option>
	<option value="2009-11-29">Sunday, November 29</option>
	<option value="2009-11-30">Monday, November 30</option>
</select>

To see the real resutl, let’s check it out and view page source.

Date: November 24, 2009
Comments: No Comments
Filed under HTML, Javascript, XML
Tags: , , ,

Example Google Analytics script

First we need to register a Google Analytics accout.

Below is a javascript code to embed your GA into your site. Don’t forget to replace _your_ga_account_id_ by your own.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("_your_ga_account_id_");
pageTracker._trackPageview();
} catch(err) {}</script>
Date: November 8, 2009
Comments: No Comments
Filed under Javascript
Tags:

Javascript manual track google analytics events

By using Javascript call pageTracker._trackPageview with an argument specifying a name for the event:

<script type="text/javascript">
pageTracker._trackPageview("your_event_here");
</script>

You can assign a page filename, function or action to any webpage, javascript or event Flash action.

If you leave _trackPageview() argument empty, Google Analytics will use whatever URL in the URL address box.

Before you can call pageTracker._trackPageview, don’t forget to include GA ga.js before _trackPageview()

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("Your_GA_Profile_ID");
pageTracker._trackPageview();
} catch(err) {}</script>
Date: November 1, 2009
Comments: 1 Comment
Filed under HTML, Javascript, Resources
Tags: , , ,

Jquery load twitter JSON feed as news ticker

You should go to Jquery website to get latest version.
In this post, I used a Jquery Newsticker plugin, go to this link for more details.

From this post, we can learn how to use Jquery to read JSON file.

Below is a example to show your feeds on Twitter as News Ticker

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Example using Jquery to show Twitter Json Feeds as News Ticker | rapid-DEV.net
</title>
<script type="text/javascript" src="http://rapid-dev.net/wp-includes/js/jquery/jquery.js?ver=1.2.6"></script>
<script type="text/javascript" src="http://rapid-dev.net/wp-includes/js/jquery/jquery.newsticker.js"></script>
</head>
<body>
	<div><a href='http://rapid-dev.net'>Back to rapid-DEV.net</a></div>
	<h3>Example using Jquery to show Twitter Json Feeds as News Ticker</h3>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        upd_twitter("huynhtronghoan",5);
    });

    function upd_twitter(username,feed_num)
    {
        jQuery("#twitter_feed").html("Loading ...");

        var twitter_text = "<ul id=\"twitter_feed_items\">";
        var url = "http://twitter.com/status/user_timeline/" + username + ".json?count=" + feed_num + "&callback=?";
        jQuery.getJSON(url,
        function(data){
            jQuery.each(data, function(i, item) {
                twitter_text += "<li>" + item.text + " (" + item.created_at + ")</li>";
            });
            twitter_text += "</ul>";
            jQuery("#twitter_feed").html(twitter_text);
            jQuery("#twitter_feed_items").newsTicker();
        });
    }

</script>
<div id="twitter_feed"></div>
</body>
</html>

Let check it out

Date: October 24, 2009
Comments: 1 Comment
Filed under JSON, Javascript
Tags: , ,

Jquery process trigger click after press enter button

What are we learning from this post?

  • 1. Jquery process focus
  • 2. Jquery process blur
  • 3. What the enter key code is (13)
  • 4. Jquery trigger function
  • 5. Jquery append innerhtml of an object and scroll to bottom

Code example:

<style type="text/css">
	.divChatMessages{ height:178px; width:200px; overflow-y:scroll;overflow-x:hidden; padding:5px; margin-bottom:5px;}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	var is_txtChatMessage_focus = 0;

	$("#btnChat").click(function(){
		$("#wd_chat_message").append("<p>" + $("#txtChatMessage").val() + "</p>");

		var objDiv = document.getElementById("wd_chat_message");
		objDiv.scrollTop = objDiv.scrollHeight;
		$("#txtChatMessage").val("");
	});

	$(document).keypress(function(e){
		if(e.keyCode == 27 && popupStatus == 1)
		{
			disablePopup("InviteForm");
		}
		else if(e.keyCode == 13 && is_txtChatMessage_focus == 1)
		{
			$("#btnChat").trigger("click");
			return false;
		}
	});
	$("#txtChatMessage").focus(function () {
		 is_txtChatMessage_focus = 1;
	});

	$("#txtChatMessage").blur(function () {
		  is_txtChatMessage_focus = 0;
	});
});
</script>
<div id="wd_chat_message" class="divChatMessages"></diinput D
	<input type="text" class="txtChatMessage" id="txtChatMessage" />
	<input type="button" value="Click or enter" class="btnChat" id="btnChat" />
</div>

Let try online demo: default_action_after_enter.html

Date: September 30, 2009
Comments: No Comments
Filed under Javascript
Tags: , , , , , , ,
« Older Entries