Archive for category jQuery

Web Service using JSONP from External Domain – PHP – JQuery

Posted by dan in Code, Javascript, PHP, jQuery on February 3, 2012

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>Test</title>
		<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 += "<br />Q: "+ val.id +", '"+ val.question +"";
					});
					$('#triviaQuestions').html(htmlResult);
				});
			});
		</script>
	</body>
</html>

, , , , , , , , , , , , , , , , , , , , , , , , ,

No Comments

PHP Webservice that uses JSON PDO – Accessed by JQuery AJAX

Posted by dan in Javascript, PHP, jQuery on January 6, 2012

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 += "<br />Add : <a href=\"#\" onclick=\"addTag("+ val.id +", '"+ val.getfullname +"'); return false;\">"+ val.getfullname +"</a>";
			});
			$('#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"}]

, , , , , , , , , , ,

No Comments

ASP.Net Update Panel – Javascript Event – jQuery Click

Posted by dan in .Net, Code, Javascript, jQuery on November 7, 2011

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" />
1
2
3
4
5
6
7
8
9

<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):

1
2
3
4
5

<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>
1
2
3
4
5
6
7
8
9
10
11
12

<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!

, , , , , , ,

No Comments

Facebook Website Integration – HTML

Posted by dan in Code, Javascript, PHP, jQuery on May 25, 2011


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

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.
  • <script src="http://feeds.feedburner.com/DanielFolkessFacebookStatusUpdates?format=sigpro" type="text/javascript" ></script>
<noscript><p>Subscribe to RSS headline updates from: 
<a href="http://feeds.feedburner.com/DanielFolkessFacebookStatusUpdates"></a>
<br/>Powered by FeedBurner</p> 
</noscript>
  • Preview:

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

, , , , , , , , , ,

No Comments

jQuery – Ajax – Extra Parameters – GET, success

Posted by dan in Javascript, jQuery on February 11, 2011

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);
  }
});

No Comments

JQuery – Example Documents for Presentation

Posted by dan in Code, Javascript, jQuery on April 20, 2010

jquery-selectors

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.

Read the rest of this entry »

No Comments

jQuery: Check All of the Checkboxes

Posted by dan in Code, Javascript, jQuery on December 15, 2009

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.

No Comments