DAN FOLKES » jQuery

Web Service using JSONP from External Domain – PHP – JQuery

dan — Fri, 03 Feb 2012 15:57:31 +0000

You may want to look at this previous post where I setup a PHP Webservice that uses JSON PDO – Accessed by JQuery AJAX

OK, so this code will use php to generate the JSON code that will get delivered over the internet to the JSONP (JSON Padding) client on an external domain. This allows your webservice to be available too whoever wants to call it.

Here is the PHP Code: (Not all of it, but enough to get the idea)

//http://SERVER_domain.com/webservice.php
private function GetTriviaTag($row) {
	$t = new Tag();
	$t->id = $row['id'];
	$t->triviaid = $row['triviaid'];
	$t->tagid = $row['tagid'];
	return $t;
}
public function GetWhere($where) {
	$retArray;
 
	$sql = "SELECT * FROM trivia_tags WHERE {$where}";
	foreach ($this->pdo->query($sql) as $row)
	{
		$retArray[] = $this->GetTriviaTag($row);
	}
	return $retArray;
}
$where = " (1 = 1)";  // THIS WILL SELECT ALL
$tarray = GetWhere($where);
 
//OUTPUT JSON:
header('Content-type: application/json');
echo $_GET['callback'];  // <-- THIS IS IMPORTANT FOR EXTERNAL DOMAIN ACCESS!!!
echo "(" . json_encode($tarray) . ")";

And now, to access it from javascript in an external domain (non – SERVER_domain.com ):

http://CLIENT_domain.com/Test.html:

<html>
	<head>
		<title>Testtitle>
		<script src="http://code.jquery.com/jquery-latest.js">script>
	head>
	<body>
		<div id="triviaQuestions"> loading... div>
		<script>
			$(function() {
				// THE 'callback=?' in this request is IMPORTANT FOR EXTERNAL DOMAIN ACCESS!!!
				$.getJSON('http://SERVER_domain.com/webservice.php&callback=?', function(data) {
					var items = [];
					var htmlResult = "";
					$.each(data, function(key, val) {
						htmlResult += "
Q: "+ val.id +", '"+ val.question +"";
					});
					$('#triviaQuestions').html(htmlResult);
				});
			});
		
	body>
html>

PHP Webservice that uses JSON PDO – Accessed by JQuery AJAX

dan — Fri, 06 Jan 2012 15:25:58 +0000

You may want to look at this previous post where I setup a Web Service using JSONP from External Domain – PHP – JQuery

The HTML that calls the Javascript:

<div id="taglist"></div>
<input name="searchTags" id="searchTags" type="text" />
<input type="button" name="searchtags" onclick="getTags()" value="search"/>
<div id="tagresult">
</div>

The JavaScript (JQuery) AJAX Request and Response Processing:

function getTags()
	{
		var q = $('#searchTags').val();
		$.getJSON('ws.php?type=tag&wN=name&wO=like&wV=' + q, function(data) {
			var items = [];
			var htmlResult = "";
			$.each(data, function(key, val) {
				//As you can see, you can access the JSON (at the bottom of the page) by doing val.PROPERTYNAME:
				htmlResult += "
Add : \"#\" onclick=\"addTag("+ val.id +", '"+ val.getfullname +"'); return false;\">"+ val.getfullname +"";
			});
			$('#tagresult').html(htmlResult);
		});
	}

PHP Code that returns JSON in the PHP file called by the AJAX: (ws.php)

	$ta = new TagAccess();
	$tarray = $ta->GetTagsWhere(" {$whereName} LIKE '%{$whereVariable}%'");
	header('Content-type: application/json');
	echo "",  json_encode($tarray), "";

The GetTagsWhere Helper Function:

    public function GetTagsWhere($where) {
    	$retArray;
 
    	$sql = "SELECT * FROM tags WHERE {$where}";
    	// THE PDO Object was created previously
	foreach ($this->pdo->query($sql) as $row)
	{
		$retArray[] = $this->GetTag($row);
	}
	return $retArray;
    }

JSON Returned:

[{"id":"4","name":"FICTION","parentid":"3","getfullname":"BOOKS > FICTION"},{"id":"5","name":"NON-FICTION","parentid":"3","getfullname":"BOOKS > NON-FICTION"}]

ASP.Net Update Panel – Javascript Event – jQuery Click

dan — Mon, 07 Nov 2011 19:38:47 +0000

I needed to add a onclick event to a textbox in asp.net to change it to remove text from a textbox onClick when it is clicked.
The normal code would look something like this:

1	<asp:TextBox ID="txtStoreLocatorZip" ValidationGroup="CustomerServiceEmail" runat="server" Text="Enter Zip" CssClass="txtStoreLocatorZip_CssClass" />

<script>
        if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
            $('.txtStoreLocatorZip_CssClass').click(function () {
                if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
                    $('.txtStoreLocatorZip_CssClass').val('');
                }
            });
        }
script>

But, this won’t quite work because my textbox is in a UpdatePanel’s ContentTemplate and the javascript is not read on postback.

So, This is what I ended up doing (a simplified version):

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<asp:TextBox  ID="txtStoreLocatorZip" ValidationGroup="CustomerServiceEmail" runat="server" Text="Enter Zip" CssClass="txtStoreLocatorZip_CssClass" />
	ContentTemplate>
asp:UpdatePanel>

<script>
	Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
	function endRequestHandler(sender, args) {
		if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
			$('.txtStoreLocatorZip_CssClass').click(function () {
				if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
					$('.txtStoreLocatorZip_CssClass').val('');
				}
			});
		}
	}
script>

This will add an endRequest handler to the end of the partial page postback so that you can call a nice little function at the end of it.

Hope this helps some people!

Facebook Website Integration – HTML

dan — Wed, 25 May 2011 15:40:03 +0000

To integrate Facebook on to a website without the use of a facebook app you need these things:

Facebook Page RSS Feed (can be tricky)
Feedburner Account (free,easy) (here)

Once you have both of those things you can do this in feedburner:

Add a new feed (your facebook url)
Go to the publicize tab
Go to BuzzBoost
Sroll down and fill out the form, you will be given html code.

Preview:

And that’s it!
You can now style it up a little bit with some CSS and stuff.

jQuery – Ajax – Extra Parameters – GET, success

dan — Fri, 11 Feb 2011 16:20:56 +0000

Here is the standard jQuery Ajax call with success handler as well as the ability to pass another parameter to an external function:

	$.ajax({
			type: "GET",
			url: Humancurl,
			dataType: "xml",
			success: function(data){
				NameOfFunctionToParseReturnedData(data,ExtraParameter);
			}
		});

Here is the standard jquery ajax call with success handler:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.'+data);
  }
});

JQuery – Example Documents for Presentation

dan — Tue, 20 Apr 2010 16:30:58 +0000

I gave a presentation at work on JQuery.

So, I made a documentation page and a example html page with jquery calls at the bottom.

This should be able to help someone out there in internet land.

View the post to see code.

Here is the PDF Documentation:
jQuery Documentation

		<script src="./jquery-1.4.2.min.js" type="text/javascript">script>

<div id="holder">
<div id="alp_holder">
<div id="aaa" class="top2">
					aaadiv>
<div id="bbb" class="top2">
					bbbdiv>
<div id="ccc" class="bottom2">
					ccc
					<a href="#alynnlee.com">alynnlee.coma>
					<a href="#alynnlee.com">alynnlee.coma>
					<a href="#alynnlee.com">alynnlee.coma>div>
<div id="ddd" class="bottom2">
<form>
<input name="name" type="text" />
<input name="password" type="text" />
<input name="option1" type="checkbox" value="Milk" /> Milk
<input checked="checked" name="option2" type="checkbox" value="Butter" /> Butter
<input checked="checked" name="option3" type="checkbox" value="Cheese" /> Cheese
<input type="submit" value="Submit" />
					form>div>
div>
div>
<script type="text/javascript">script>

jQuery: Check All of the Checkboxes

dan — Tue, 15 Dec 2009 16:18:32 +0000

This will check all of the checkboxes inside of an element (div,span,table) with a class of outerClassName

$(".outerClassName :checkbox").attr('checked', true);

Tip: you must have the jQuery library referenced before using this line of code.

JQuery – Example Documents for Presentation