This document contains the presentation slides for a session titled "How to Develop and Debug Client Side Code" given by Mark Rackley at the SPTechCon San Francisco 2014 conference. The presentation provides an overview of tools and techniques for developing and debugging JavaScript and jQuery code in SharePoint, including jQuery, jQuery UI, DataTables, Bluff Charts, and REST/CSOM/SPServices. It also covers debugging basics, common issues, and best practices.
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
avaScript, REST, CSOM, Office 365 APIs: Like it or not, client-side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn:
"What's possible," including visual enhancements and practical business intelligence
Tips and Tricks for deploying and maintaining scripts
How to get quick wins with little effort using third-party jQuery libraries
How to interact with SharePoint forms and lists using JavaScript and jQuery
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
A Power User's Intro to jQuery Awesomeness in SharePointMark Rackley
The slide deck for my session walking Power Users through adding scripts to pages in SharePoint with demos showing what's possible to do without having to write any JavaScript. Includes links to blog posts with step by step video instructions.
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...Mark Rackley
SharePoint Saturday Twin Cities session on using third party jQuery libraries in SharePoint:
jQueryUI
DataTables.net
FullCalendar
Bluff Charts
StratusForms
JavaScript and jQuery for SharePoint DevelopersRob Windsor
If you’re a SharePoint developer you either are doing JavaScript development now or you will be doing JavaScript development in the near future. There has been an increased focus on client-side development with each of the recent versions of SharePoint and now, with the introduction of the SharePoint 2013 App model, understanding client-side development is a must. In this session, we`ll look at JavaScript development from a SharePoint perspective. In addition to effective use of JavaScript and jQuery in your applications, we`ll look where you can deploy JavaScript files and how to reference those files in your pages and web parts.
The SharePoint & jQuery Guide - Updated 1/14/14Mark Rackley
Latest version of my SharePoint & jQuery slides from SharePoint Saturday St. Louis.
This session introduces people to using jQuery in SharePoint, how to get started, and some best practices.
A Power User's Intro to jQuery Awesomeness in SharePointMark Rackley
The slide deck for my session walking Power Users through adding scripts to pages in SharePoint with demos showing what's possible to do without having to write any JavaScript. Includes links to blog posts with step by step video instructions.
#SPSTC Maximizing the SharePoint User Experience with Free 3rd Party jQuery L...Mark Rackley
SharePoint Saturday Twin Cities session on using third party jQuery libraries in SharePoint:
jQueryUI
DataTables.net
FullCalendar
Bluff Charts
StratusForms
JavaScript and jQuery for SharePoint DevelopersRob Windsor
If you’re a SharePoint developer you either are doing JavaScript development now or you will be doing JavaScript development in the near future. There has been an increased focus on client-side development with each of the recent versions of SharePoint and now, with the introduction of the SharePoint 2013 App model, understanding client-side development is a must. In this session, we`ll look at JavaScript development from a SharePoint perspective. In addition to effective use of JavaScript and jQuery in your applications, we`ll look where you can deploy JavaScript files and how to reference those files in your pages and web parts.
By now you may have heard that JavaScript is becoming a viable solution for SharePoint Development, but where do you get started? This session will start with some of the basics and introduce attendees to a few different Javascript libraries such as jQuery, Knockout, Bootstrap, etc. It will showcase SharePoint's REST API and provide some examples of how to conduct basic CRUD operations which you can repurpose for your own custom SharePoint Apps.
SharePoint Framework, Angular and Azure FunctionsSébastien Levert
Things are moving fast. Sometimes you might even feel that you own comfort zone is getting of control. But in a Mobile-First, Cloud-First world, things are changing to a crazy pace and to stay on the top of your game, you need keep up with the latest and greatest technologies that are available out there. By staying up to date, you will give to yourself new options that will let you be more productive, write better code and push you in a more open and more collaborative world.
With the official shipment of Angular 4 and the current release of the SharePoint Framework, it is now the time to start moving towards those new technologies in your SharePoint Solutions.
In this session, we will cover the modern tool belt of the SharePoint developer by covering the SharePoint Framework as the new surface to express yourself, Angular as a Framework to enable you to build complete applications within your SharePoint modern experiences and Azure Function as the perfect server-side companion for all your Office 365 & Azure development.
This very demo-intensive session will make sure that at the end you get those 3 key takeaways :
- Understand the role of the SharePoint Framework, Angular and Azure Functions in this Cloud-First, Mobile-First world
- Have a complete sample where the modern tool belt is relevant and useful in a real-world scenario
- Change the way you will think for your next SharePoint project
Unmesh Gundecha delivered a session on "Selenium Powertools" at #SeleniumSummit21
Technology focused IT professional offering vast experience leveraging Software Engineering, Agile Software Development, Test Automation & DevOps methodologies to deliver highly effective and creative solutions to business and technology challenges. Utilizes highly attuned analytical skills to develop IT and business strategies employing leading/cutting-edge technologies to increase productivity & efficiency and organised with a strong capacity to prioritize workload, delegation, and steer project completion with established deadlines. Experience in building and leading small to a large specialist team on critical project deliveries. Passionate about Technology, Automation, UI/UX and Design.
To know more about #SeleniumSummit21 please check : https://seleniumsummit21.agiletestingalliance.org/
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Tom Johnson
This is a presentation I gave to the Southwestern Ontario STC chapter on API documentation on Feb 2, 2015. For more details, see my blog at http://idratherbewriting.com. You can listen to the recorded presentation here: http://youtu.be/I8rGe2w1sAo.
Things are moving fast. Sometimes you might even feel that you own comfort zone is getting of control. But in a Mobile-First, Cloud-First world, things are changing to a crazy pace and to stay on the top of your game, you need keep up with the latest and greatest technologies that are available out there. By staying up to date, you will give to yourself new options that will let you be more productive, write better code and push you in a more open and more collaborative world.
With the official shipment of Angular 4 and the current release of the SharePoint Framework, it is now the time to start moving towards those new technologies in your SharePoint Solutions.
In this session, we will cover the modern tool belt of the SharePoint developer by covering the SharePoint Framework as the new surface to express yourself, Angular as a Framework to enable you to build complete applications within your SharePoint modern experiences and Azure Function as the perfect server-side companion for all your Office 365 & Azure development.
This very demo-intensive session will make sure that at the end you get those 3 key takeaways :
- Understand the role of the SharePoint Framework, Angular and Azure Functions in this Cloud-First, Mobile-First world
- Have a complete sample where the modern tool belt is relevant and useful in a real-world scenario
- Change the way you will think for your next SharePoint project
In introduction to the various SharePoint development techniques in SharePoint 2013, this slide deck will give new SharePoint developers an overview of the options available to them to develop against SharePoint. To view audio of this recording go to the Office Mix version at https://mix.office.com/watch/1bgqd4roxtwpe
Tips and Tricks for Building Visual Studio WorkflowsMalin De Silva
This session covers the basics of creating Visual Studio Workflows for SharePoint and common challenges and best practices that can be used to make the development better.
Developing Lightning Components for Communities.pptxDmitry Vinnik
Discover tips and tricks for developing Lightning Components for communities. We'll cover customizing Self-Service templates, including overriding the default header with a custom theme, allowing community administrators to control the look and feel of your custom components with design tokens, and best practices, such as utilizing Lightning Component inheritance.
Similar to SPTechCon 2014 How to develop and debug client side code in SharePoint (20)
A Power User's intro to jQuery awesomeness in SharePointMark Rackley
Okay, we get it. You’re not a developer, but there so many cool things you can do with jQuery and JavaScript in SharePoint!
Maybe you found that script on that blog that you copy and pasted and just can’t get to work. It looks so easy though.
Why should developers have all the fun?
In this session, learn how you, a Power User can take advantage of some of the awesomeness that is client side scripting in SharePoint. You’ll learn:
- How to use some plug and play scripts on the internet to create tabbed web parts, customize SharePoint forms and more
- Do’s and don’ts that will help you figure out why that script isn’t working on your site
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
SPTechCon 2014 How to develop and debug client side code in SharePoint
1. SPTechCon San Francisco 2014
How to Develop and Debug Client Side Code
Mark.Rackley@capSpire.com
April, Twenty Fourteen
2. Mark Rackley / Senior Consultant
• 19+ years software
architecture and development
experience
• SharePoint Junkie since 2007
• Event Organizer
• Blogger, Writer, Speaker
• Bacon aficionado
@mrackley
www.SharePointHillbilly.com
www.MarkRackley.net
www.SharePointaLooza.org
3. What this session is not
In this session I’ll give you the tools to start developing and
debugging JavaScript and jQuery in SharePoint. I will not be
creating SharePoint Apps, Solutions, or features. Visual Studio is
not needed for any of the functionality presented in this session.
To get started from a Visual Studio only approach check out Rob
Windsor's and David Mann’s Pluralsight videos on SharePoint
with JavaScript, CSOM, and REST.
http://www.pluralsight.com/training/Courses/TableOfContents/sharepoint-2013-client-object-
model-rest
4. Agenda
• Some Why’s
• These are a few of my favorite tools
• Common issues & Best practices
• Other helpful tools
• Let’s Do Some Stuff
• Deploy and reference scripts
• Development Basics
• Debugging Basics
All links from this session (and others)
http://bit.ly/POSTCON06
Code Samples Available at
https://github.com/mrackley/SPClientSideDev
5. Why bother with client side dev?
• Stay off the server
• Deployment and maintenance can be easier
• Upgrades can be painless
• You don’t have to be a development guru
• You don’t need expensive tools like Visual
Studio… well you don’t NEED any tools at all.
6. Why is JavaScript development so painful?
• It’s not compiled
• Simple errors hard to track down
• It’s difficult to debug
• Error messages are usually not helpful
• There’s a lot of ways to do the exact same
thing
• Performance can be an issue
• Non-developers are doing it
7. These are a few of my favorite tools
• jQuery (It’s just JavaScript)
• http://jquery.com/
• jQuery UI (Make it prettier and more
interactive)
• http://jqueryui.com/
• jQuery.cookie.js (because it works)
• http://plugins.jquery.com/cookie/
8. These are a few of my favorite tools
• FullCalendar (because sometimes you need
more than one date field)
• http://arshaw.com/fullcalendar/
• DataTables (quick, performant list views)
• http://www.datatables.net/
• SPServices / CSOM / REST (because, what
CAN’T you do??)
9. These are a few of my favorite tools
• SharePoint Designer (yes… really)
• IE and Chrome Developer Tools (It’s like real
debugging)
• Fiddler (Essential when you need to see
what’s really going on)
• http://fiddler2.com/
10. Oh yeah… so, what can’t you do?
• Event Receivers
• Timer Jobs
• Elevate Privileges
• Write to the file system
11. Development basics
• Store scripts in a document library
• To deploy a script across a site collection use a Custom Action
• Avoid directly adding scripts to Master Page
Can be more difficult to maintain and debug
• To deploy script to a page, add a Content Editor Web Part
and link to script
• Avoid placing scripts directly in CEWP
Scripts can get mangled and there is no reuse / backup.
12. Querying a list to populate a drop down box
REST / CSOM / SPSERVICES
13. SPServices Get List Items Query
$().SPServices({
operation: "GetListItems",
async: true,
listName: "Vendors",
CAMLViewFields: "<ViewFields><FieldRef Name='Vendor' /></ViewFields>",
CAMLQuery: "<Query><Where><Neq><FieldRef Name='ID' /><Value
Type='Number'>0</Value></Neq></Where></Query>";, completefunc: function(xData, Status) {
var options = "<option value='0'>(None)</option>";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var Vendor = ($(this).attr("ows_Vendor"));
var ID = $(this).attr("ows_ID");
options += "<option value='"+ ID +"'>"+Vendor+"</option>";
});
$("select[title='<Field Display Name>']").append(options);
}});
14. Client Side Object Model (CSOM) Get List Items
Query
context = SP.ClientContext.get_current();
var speakerList = context.get_web().get_lists().getByTitle("Vendors");
var camlQuery = SP.CamlQuery.createAllItemsQuery();
this.listItems = speakerList.getItems(camlQuery);
context.load(listItems);
context.executeQueryAsync(ReadListItemSucceeded, ReadListItemFailed);
function ReadListItemSucceeded(sender, args) {
var enumerator = listItems.getEnumerator();
var options = "<option value='0'>(None)</option>";
while (enumerator.moveNext()) {
var listItem = enumerator.get_current();
var Vendor = listItem.get_item('Vendor');
var ID = listItem.get_id();
options += "<option value='"+ ID +"'>"+Vendor+"</option>";
}
$("select[title='<Field Display Name>']").append(options);
}
function ReadListItemFailed(sender, args) {
alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}
15. SharePoint 2010 REST Get List Items Query
var call = $.ajax({
url: “http://<Url To Site>/_vti_bin/listdata.svc/Vendors?$select=Vendor,Id&$top=1000”,
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
var options = "<option value='0'>(None)</option>";
for (index in data.d.results) //MIGHT BE IN data.d
{
options += "<option value='"+ data.d.results[index].Id
+"'>"+data.d.results[index].Title+"</option>";
}
$("select[title='<Field Display Name>']").append(options);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
16. SharePoint 2013 REST Get List Items Query
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ListName')/items",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
var options = "<option value='0'>(None)</option>";
for (index in data.d.results)
{
options += "<option value='"+ data.d.results[index].Id
+"'>"+data.d.results[index].Title+"</option>";
}
$("select[title='<Field Display Name>']").append(options);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
17. Reading / Storing List Data
var objArray = [
{ID: 1, Title: "Title 1"},
{ID: 2, Title: "Title 2"},
{ID: 3, Title: "Title 3"},
{ID: 4, Title: "Title 4"},
];
for (index in objArray)
{
var thisTitle = objArray[index].Title;
}
Use REST / CSOM / SPServices to read list data
Store data in arrays and JSON objects
18. Reading / Storing List Data
var objects = {};
objects[1] = {Title: "Title 1"};
objects[2] = {Title: "Title 2"};
objects[3] = {Title: "Title 3"};
for (id in objects)
{
var thisTitle = objects[id].Title;
}
Use REST / CSOM / SPServices to read list data
Store data in arrays and JSON objects
19. Debugging Basics
• Alerts
• Quick sanity checks
• Are your scripts getting executed?
• Developer Tools
• Setting breakpoints
• Evaluating expressions
• Fiddler
• Is the data I’m expecting coming across the
wire?
20. How about some best practices?
• Avoid global variables
• Write scripts in small digestible chunks
• Code with performance in mind
• Minify files, but make updates in un-minified files
• Be consistent in structure and syntax ESPECIALLY if
developing as part of a team
• Document what you’ve done
21. Common issues
Issue Symptom
Script not loaded “Object doesn’t support property or method”
Script loaded more than once /
Different versions of same library
Sporadic errors, sometimes it works, sometimes it doesn’t.
Missing quotes, semicolons,
commas, other syntax errors
“Expected <char>” (not always the right character) or Syntax Error.
Mismatched variable names (foo vs
Foo) or use of initialized variables.
Unable to get property ‘x’ of undefined or null reference.
‘x’ is undefined
No error, but unexpected results.
Timing / Async issues Script errors, unexpected results
Conflicting jQuery libraries Script errors, unexpected results
http://api.jquery.com/jQuery.noConflict/
Changes to script not taking effect Script cached, use cache busting technique of incrementing a rev number on your script.
<script type="text/javascript" src="../../SiteAssets/jquery.min.js?rev=1.0"></script>
22. Other tools
• Visual Studio Express Web (You don’t have to buy it)
http://www.microsoft.com/visualstudio/eng/products/visual
-studio-express-products
• TypeScript
http://www.typescriptlang.org/
• Web Essentials (Does not work with VS Express )
http://visualstudiogallery.msdn.microsoft.com/07d54d12-
7133-4e15-becb-6f451ea3bea6
23. Other tools
• jsLint & jsHint
• Syntax / Quality Checking
• Can be more frustrating than helpful
• http://www.jslint.com/
• http://www.jshint.com/
24. Let’s DO some stuff!!!
I know!! It’s about time? Right?
25. jQueryUI
http://jqueryui.com/
jQuery UI is a curated set of user interface
interactions, effects, widgets, and themes built
on top of the jQuery JavaScript Library.
Whether you're building highly interactive web
applications or you just need to add a date
picker to a form control, jQuery UI is the
perfect choice.
28. DataTables
http://www.datatables.net/
DataTables is a plug-in for
the jQuery Javascript library. It is a highly
flexible tool, based upon the foundations of
progressive enhancement, which will add
advanced interaction controls to any HTML
table.
29. DataTables – Basic Usage
//array of arrays
$('#example').dataTable( {
"aaData": [
["row 1","value"],
["row 2","value 2"],
],
"aoColumns": [ //field count must match column count
{ "sTitle": "Column Name" },
{ "sTitle": "Column Name 2" }
]
});
//array of objects
$('#example').dataTable({
"bProcessing": true,
"aaData": vendors, //array of objects
"aoColumns": [
{ "mData": "Vendor" }
]
});
31. Bluff Charts
http://bluff.jcoglan.com/
Bluff is a JavaScript port of the Gruff graphing
library for Ruby. It is designed to support all the
features of Gruff with minimal dependencies; the
only third-party scripts you need to run it are a
copy of JS.Class (2.6kB gzipped) and a copy of
Google’s ExCanvas to support canvas in Internet
Explorer. Both these scripts are supplied with the
Bluff download. Bluff itself is around 11kB
gzipped.
32. Bluff Charts – Basic Usage
var g = new Bluff.Bar('LineBarChart', '800x400');
g.title = 'Tasks By User';
g.tooltips = true;
g.theme_37signals();
for (index in tasks)
{
g.data(tasks[index].name, [tasks[index].Completed,
tasks[index].Deferred,tasks[index].NotStarted,
tasks[index].InProgress,tasks[index].Waitingonsomeoneelse]);
}
g.labels = {0: 'Completed', 1: 'Deferred', 2: 'Not Started',
3: 'In Progress', 4: 'Waiting'};
g.draw();