Search jQuery

jQuery Forum

Screen name:
coldfusionguy
About Me:
The first real-world program I ever wrote was one involving FFT utilizing the IBM/360 Scientific Subroutine Package and Fortan77 back in 79.

coldfusionguy's Profile

27 Posts

854 Responses

7 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

can't get .indexOf to return expected value
[2Replies]
- 17-Sep-2018 09:10 AM
- Forum: Using jQuery
This question was asked, and I would like to include additional info for the solution.

Original post:
I'm trying to select all elements that has a class that starts with "col-md", but no matter what I do .indexOf("col-md") returns -1.

Html:
1. <div class="col-md-4">
2. Test 1
3. </div>
4. <div class="col-md-8">
5. Test 2
6. </div>
jQuery:
1. if ($col.attr("class").indexOf("col-" + val.toLowerCase()) > -1) {
2. console.log($col);
3. }
val is "MD"
Original post ends here

----------------------------------------------------------------------------------

Take a look at:

https://stackoverflow.com/questions/13878759/jquery-match-part-of-class-with-hasclass

also here is a jsfiddle:

https://jsfiddle.net/Lemnq9ap/

Jim

How jQuery parses the DOM
[2Replies]
- 29-Apr-2018 12:53 PM
- Forum: Using jQuery
Hello,

In the context of a web page with many div tags and some having a class of "changethis" as in:

$("div.changethis")

If I wanted to change the text appearing inside of these as in:

<div class="changethis">This text</div>

to:

<div class="changethis">Hello</div>

I would use $("div.changethis).text('Hello');

So using this context and the .text method, the question is:

How does jQuery ( under the hood ) parse each node to find what to change and what not to change.

Is it an iterative process that jQuery uses or a recursive process?

Thanks,
Jim

Adding some css to inner most <ul>
[14Replies]
- 23-Sep-2016 06:51 PM
- Forum: Using jQuery
Hello,

I have a JSFiddle over at:
https://jsfiddle.net/hgbh43jf/

I am also including a screen shot of what I need this page to look like.

What I need is some jQuery code that can traverse this tree and find the most deeply nested <ul> and add the classes as shown above and set the background to yellow for the <li>'s

Thanks,

Jim

Request headers and evil.com
[7Replies]
- 08-Aug-2016 11:35 AM
- Forum: Using jQuery
I was recently looking at the network tab for something and found in the Request Headers. Evil.com

Attaching screen shot.

.spinner and start option
[4Replies]
- 11-Sep-2014 12:34 PM
- Forum: Using jQuery UI
Hello,

I was looking over some JQ UI docs and came across this as an example:
1. ```
 <script>
 $(function() {
 $( "#currency" ).change(function() {
 $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
 });
 
 $( "#spinner" ).spinner({
 min: 5,
 max: 2500,
 step: 25,
 start: 1000,
 numberFormat: "C"
 });
 });
 </script>
```
But if you look over the API, start is an event not an option. Is this a typo, or something left over from a previous version?

Thanks,

Jim

Recreate jQuery
[9Replies]
- 18-Feb-2014 10:30 AM
- Forum: Getting Started
Hello,

I was wondering about the very first bit of jQuery code ever written. I figure it was possibly written inside a script tag as a start.

So I found an article:
http://blog.johnsedlak.com/2013/04/breaking-down-how-jquery-is-built/

And that also comes with a Fiddle:
http://jsfiddle.net/jsedlak/s5bC4/

But the problem is with the above Fiddle if you remove the jQuery link then $ becomes undefined. So the question is how do you modify the Fiddle so that $ becomes ( you can't add the link back ) defined and then build a method so that .addClass2 functions with this minimal script code. When I say remove the jQuery link I mean this link:

<script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript"></script>

Meaning if you have:

<p>blah</p>
<p>blah2</p>
<p>blah3</p>

and upon executing $('p').addClass2('test');

does update the DOM and looks like:

<p class="test" >blah</p>
<p class="test">blah2</p>
<p class="test">blah3</p>

The specific code I am working from is this to build upon or rewrite:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5. <title>HTML</title>
6. <meta name="description" content="">
7. <meta name="author" content="Jim">
8. <style type='text/css'>
9. </style>
10. </head>
11. <body>
12. <div id='log'>
13. </div>
14. <script type="text/javascript">
15. (function (window, undefined) {
16. var
17. version = new Version(2, 0, 0, 0),
18. js = function (selector) {
19. return new js.fn.init(selector);
20. };
21. js.fn = js.prototype = {
22. version: version,
23. init: function (selector) {
24. this.$element = $(selector);
25. return this;
26. }
27. };
28. js.fn.init.prototype = js.fn;
29. window.js = js;
30. function Version(major, minor, build, revision) {
31. this.major = major;
32. this.minor = minor;
33. this.build = build;
34. this.revision = revision;
35. this.toString = function () {
36. return this.major.toString() + '.' + this.minor.toString() + '.' + this.build.toString() + '.' + this.revision.toString();
37. };
38. }
39. })(window);
40. //The author is showing how you can get version info, I am looking for addClass2
41. //Furthermore his version info does not work unless you define the jQuery library.
42. js('#Log').$element.append(js().version.toString() + '\r\n');
43. </script>
44. </body>
45. </html>
So that means that this would also include:
1. ```
$.fn.addClass2 = function(){
```
2. ```
//Use this to build addClass2
```
3. ```
var currentjQueryObject = this; //work with currentObject return this;//you can include this if you would like to support chaining };
```
Thanks,
Jim

Callback with Arguments
[3Replies]
- 08-Oct-2013 08:58 AM
- Forum: Using jQuery
Hello,

I was looking over the jQuery docs and came across the correct way to 'call a callback'.

The jQuery docs use this example;

Right

To defer executing myCallBack() with its parameters, you can use an anonymous function as a wrapper. Note the use of function() {. The anonymous function does exactly one thing: calls myCallBack(), with the values of param1 and param2.
1

2

3

4

5

$.get( "myhtmlpage.html", function() {

myCallBack( param1, param2 );

});
When $.get() finishes getting the page myhtmlpage.html, it executes the anonymous function, which executes myCallBack( param1, param2 ).
The above example works fine as expected. So I then tried to do something similar using the $.trim ultility function so my code inside the <script> tags looks as follows:
<script>
$( document ).ready(function() {

var ws = ' lots   of   extra    whitespace ';
function myCallBack(a1,a2){ alert(a1,a2)    }
$.trim( ws, function() {myCallBack( 5, 9 )});

});
</script>
I was expecting after $.trim executes it would alert 5 and 9 but nothing happens.
I did notice however that the docs on $.trim say this:
jQuery.trim( str )Returns: String

Description: Remove the whitespace from the beginning and end of a string.
version added: 1.0
jQuery.trim( str )
str
Type: String
The string to trim.

The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.
So is it the case that only certain jQuery methods allow you to have as a parameter an anonymous function like the $.get from above?
And how do you tell which ones?
Thanks,
Jim

Using get method and jsonp
[8Replies]
- 29-Sep-2013 07:59 AM
- Forum: Using jQuery
Hello,

I came across this example regarding JSONP and getting results back from a different domain than say one that you control, kind of like a 3rd party API.

The example is at http://www.jquery-tutorial.net/ajax/requesting-a-file-from-a-different-domain-using-jsonp/

The question I have is the author goes to great lengths to discuss JSONP and then you find the docs for $.get()

at: http://api.jquery.com/jQuery.get/    <-- For get method

And no place in the $.get method() is there a datatype called jsonp, only json. Ironically if you set the datatype to jsonp jQuery does not complain, despite the fact this appears to be not a valid datatype.

If you paste this code below into your localhost it should run fine.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>promise demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<ul id="ulUsers"></ul>
<script type="text/javascript">
$(function()
{
    $.get
        (
                "http://tests.jquery-tutorial.net/json.php?callback=?",
                function(data, textStatus)
        {
                $.each(data, function(index, user)
                        {
               $("#ulUsers").append($("<li></li>").text(user.name + " is " + user.age + " years old"));
                        });
        },
                "json"
        );
});
</script>
</body>
</html>



So the question is why are there so many articles on JSONP and cross-domain and then in $.get() JSONP is largely ignored?

Jim

Return statement when using .when()
[3Replies]
- 28-Sep-2013 08:47 AM
- Forum: Using jQuery
Hello,

I am using a modified version of a jQuery example taken from:
http://api.jquery.com/promise/

My code is below and I am just trying to understand the return statement used in this code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>promise demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<script>
var effect = function() {
return $( "div" ).addClass('test');
};

$( "button" ).on( "click", function() {
$( "p" ).append( " Started... " );

$.when( effect() ).done(function() {
$( "p" ).append( " Finished! " );
});
});
</script>
</body>
</html>

Without the return above I get this in console:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

So what I have concluded is, "Without the return statement above, the chaining does not function correctly". Or another way of saying this is, "you need a return statement here in order for jQuery chaining to function correctly"

Is this the purpose of the return ?

Thanks,
Jim

XHR response using ajaxComplete
[3Replies]
- 27-Sep-2013 05:32 PM
- Forum: Using jQuery
Hello,

I was looking over some of the jQuery docs and came across this one:
http://api.jquery.com/ajaxComplete/

So I built a localhost version and came up with this for the 'main' html file;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
</head>
<body>
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
<script>
$(document).ready(function()
{
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax.htm" );
});
});

$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "ajax.htm" ) {
    console.log(event);
    console.log(xhr);
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " + xhr.responseHTML );
}
});
</script>
</body>
</html>

I then built the ajax.htm file in the same directory as is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='red'>red</div>
</body>
</html>

Everything works fine except when I try to output the
```
xhr.responseHTML <---- This is undefined but this below exists
xhr.responseText <-- this exists, the xhr object does exist just not the 
xhr.responseHTML ??

Anyone know why?

Jim
```

Using Selectors in jQuery
[2Replies]
- 27-Sep-2013 06:57 AM
- Forum: Using jQuery
Hello,

I was looking over some examples of using jQuery selectors and I came across this one that doesn't make sense to me:

$("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.

So I built the below code and it looks like this:

<p>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</p>

<p>
<ul>
<li>Coffee1</li>
<li>Milk1</li>
</ul>
</p>

Should the sentence above describe it like so?
$("p ~ ul"): Selects all elements matched by <ul> that follow a parent element matched by <p> ??

Or maybe my code example is wrong? If it is wrong then how would you build (html code) based on the original selector that reads:
$("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.

Jim

Using selectors to find element with name=
[2Replies]
- 17-Sep-2013 08:34 AM
- Forum: Using jQuery
Hello,

I have this code below and it works ok. I was trying to figure out if there are other ways to use different methods to accomplish the same thing. Maybe using find, or attr or anything else? I am only asking for one here which would be the best for selecting name=test2 .

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
</style>
</head>
<body>
<div id="sc" class="content">
<div class="test" name="test1">
    <h4>Test 1</h4>
    <p>Duis sagittis nisl in nibh feu</p>
</div>
<div class="test" name="test2">
    <h4>Test 2</h4>
    <p>Lorem ipsum dolor sit amet feu</p>
</div>
<div class="test" name="test3">
    <h4>Test 3</h4>
    <p> Cras pellentesque aliquet. </p>
</div>
</div>
<script>
$(document).ready(function(){
the_content = $("#sc div[name^='test2']"); //Alternative way to get same div node
console.log(the_content[0].innerHTML); //Outputs <h4>Test 2</h4> <p>THE LATIN TEXT</p>
});
</script>
</body>
</html>

Thanks,
Jim

Using previous posts as an example
[0Replies]
- 16-Sep-2013 09:09 PM
- Forum: About the jQuery Forum
Hello,

A question came up earlier where I believed it was going to be a duplicate of a previous question asked maybe a week ago. So I tried to do a search on this site, (search box just above where I am typing this text ) and I ended up getting a blank page. The search I tried was file:// and also file:/// , and like I said a blank page came up.

Is there some special characters to include when using file:/// as a search term? I used that because I am pretty sure the old post had file:/// in it.

Thanks,
Jim

Using clone method and .is()
[5Replies]
- 29-Aug-2013 12:36 PM
- Forum: Using jQuery
Hello,

I have this Fiddle: using .is()   http://jsfiddle.net/BCAKs/1/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<ul>
    <li>
        <span>
            <i>Foo</i>
        </span>
    </li>
    <li class='special'>Bar</li>
</ul>

<ul>
    <li>
        <span>
            <i>Foo111</i>
        </span>
    </li>
    <li>Bar222</li>
</ul>
<script>
$(document).ready(function()
{
var $a = $( 'li' ).clone();
var $b = $( 'li' ).clone();
console.log($a.is($b)); // Should print true but prints false
});
</script>
</body>
</html>

To learn more about the clone method.

I cloned an object twice and then compared the 2 objects together. I thought they are the same,
but I am getting they are not.

Maybe I am using the wrong method?

Jim

Understanding .end() in jQuery
[6Replies]
- 14-Aug-2013 09:30 AM
- Forum: Using jQuery
Hello,

I found this code in a tut and can't figure out how to get .end() to work and even further what it means. Also the author of this seems to imply .prevObject() is the same as .end()

Below is the example he gives:

var jqObject = jQuery('a');
jqObject.selector; // => "a"

One thing that's important to note is that jQuery will sometimes give you new jQuery objects to work with. If you run a method that changes the collection in some way, such as '.parents()', then jQuery won't modify the current object; it'll simply pass you a brand new one:

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();
originalObject === anotherObject; // => false

All methods that appear to mutate the collection in some way return a brand new jQuery object — you can still access the old object though, via '.end()', or more verbosely, via '.prevObject'.

So what exactly is the old object and how do you get .end() to work on it?

Thanks,
Jim

Drilling down thru objects using each method
[9Replies]
- 10-Aug-2013 11:22 AM
- Forum: Using jQuery
Hello,

I have this object below called cars. I can't figure out how to parse thru the object to produce the static code I have listed for Honda. What I want is the same document structure for each "makes" and then model then the option( even though option is not a key). I can create a much simpler object that I can parse thru, but I am trying to parse thru this one as is.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parsing </title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>

<h1>Honda</h1>
<ul>Accord
<li>2dr</li>
<li>3dr</li>
</ul>
<ul>CRV
<li>2dr</li>
<li>Hatchback</li>
</ul>
<ul>Pilot
<li>base</li>
<li>superDuper</li>
</ul>
<script>
var cars = [
{makes: "Honda", models:{ Accord:["2dr","3dr"], CRV:["2dr","Hatchback"],Pilot:["base","superDuper"]}},
{makes:"Toyota",models:{Prius:["green","reallyGreen"], Camry:["sporty","square"],Corolla:["cheap","super"]}},
{makes:"Jeep", models:{Liberty:["1dr","SUV1"],Wrangler:["2dr","SUV2"],Patriot:["3dr","SUV3"]}}
];
//console.log(cars[0]);
//for (var i=0;i<cars.length;i++)
//{
/*$.each(cars, function(index, val) {
console.log(index + ': ' + val);
$.each(cars.makes, function(index2, val2) {
console.log(index2 + ': ' + val2);
});
});*/
//}
</script>
</body>
</html>

Can anyone figure out how to do this?

Jim

Here is the Fiddle; http://jsfiddle.net/jsfididlejpf/3HjEd/

Bubbling up?
[10Replies]
- 01-Aug-2013 06:51 PM
- Forum: Using jQuery
Hello,

I was reading a tutorial on event bubbling. It comes with this illustration: Forget about 3B unless it is needed.

I can't figure out how the code would work for this. I was thinking something like
1. I'm A and I was clicked.
2. I'm P and I know A was just clicked because A told me..
3. I'm Document and I just got my info from P.

I believe the doc structure would look like this:

<body>
<p> < a > click here </a> </p>
</body>

Can anyone reproduce this in jQuery?

Thanks,
Jim

Underlying objects in jQuery
[0Replies]
- 30-Jul-2013 09:33 AM
- Forum: Using jQuery
Hello,

I came across a website that uses diagrams to show what objects look like in memory,

http://www.objectplayground.com/

He defines 2 types of inheritance, Classical and Resig. So my question is does jQuery ( the framework ) just use Resig style inheritance and would that style be prototype instead of classical? The author seems to suggest that classical is better then prototype. And at the same time jQuery is based on prototype - "Resig style".

In jQuery is it always one way or the other, or does the framework use classical as well? If you had to choose one style to learn would this be prototype for jQuery?

Also how would you convert: ( Classical Inheritance Example )

// Parent class constructor
function Parent() {
this.a = 42;
}

// Parent class method
Parent.prototype.method = function method() {};

// Child class constructor
function Child() {
Parent.call(this);
this.b = 3.14159
}

// Inherit from the parent class
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// Child class method
Child.prototype.method = function method() {
Parent.prototype.method.call(this);
};

// Instantiate
this.instance = new Child();

TO RESIG Inheritance?

Thanks,
Jim

Drilling down syntax

[2Replies]

18-Jul-2013 11:18 AM
Forum: Getting Started

Hello,

I am reading from a jQuery ebook and I came across this syntax:
$("div>ul a"); $("div#main p strong"); $("div.main p>li a");

My question is regarding the > and then sometimes a space then another 
html tag like p or strong etc.

Can 
$("div.main p>li a");
be rewritten as:
$("div.main>p>li>a"); // ? is this the same?

Does a space as in 
$("div#main p strong"); // mean $("div#main>p>strong");

Thanks,
Jim

Applying theme to all page elements
[2Replies]
- 08-Jul-2013 09:40 AM
- Forum: jQuery Mobile
Hello,

Using this simple code:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

<div data-role="page" data-theme="b">

    <div data-role="header">
        <h1>My Title</h1>
    </div>

    <div data-role="content">
        <p>Hello world</p>
    </div>

    <div data-role="footer" >
        <h1>My Footer</h1>
    </div>

</div>

</body>
</html>

I am trying to apply theme b to all elements on the page. Specifically the header content background should change as I change the theme, but it does not. I thought when the theme is set on data-role="page" that all elements inherit from this. I know I can do <div data-role="header" data-theme="d"> but the question is more on inheritance. Also I do not wish to use any jQuery programming solution, just markup here.

Thanks,
Jim

Displaying a custom label for Geobytes AutoComplete
[10Replies]
- 05-Jul-2013 10:17 AM
- Forum: Using jQuery UI
Hello,

I have this code below that runs fine: ( except for image error which means nothing ):

<!DOCTYPE HTML>
<html>
<head>
<title>AUTO</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-menu .ui-menu-item a,.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
    text-align:left;
    font-size:14px;
    }
.ui-autocomplete-loading { background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat; }
</style>
</head>
<body>
<form action="" method="post" name="form_demo" id="form_demo" enctype="multipart/form-data" onsubmit="return false;">
<p><b>Please enter</b> your city here to see it work. <input class="ff_elem" type="text" name="ff_nm_from[]" value="" id="f_elem_city"/>
</form>

<script type="text/javascript">
jQuery(function ()
{
    jQuery("#f_elem_city").autocomplete({
        source: function (request, response) {
        jQuery.getJSON(
            "http://gd.geobytes.com/AutoCompleteCity?callback=?&filter=USCA&q="+request.term,
            function (data) {
            response(data);
            }
        );
        },
        minLength: 3,
        select: function (event, ui) {
        var selectedObj = ui.item;
        jQuery("#f_elem_city").val(selectedObj.value);
        return false;
        },
        open: function () {
        jQuery(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
        jQuery(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
    jQuery("#f_elem_city").autocomplete("option", "delay", 100);
    });
</script>
</body>
</html>

Try typing los and you get choices but you will notice all choices have United States at the end of each choice. I was wondering if there is any way display a custom label so that United States is not seen?

Thanks,
Jim

P.S. Geobytes API is located here: http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

Hiding OAuth secrets in jQuery

[5Replies]

29-Jun-2013 12:04 PM
Forum: Using jQuery

Hello,

Below is some sample code from Yelp:

<!--
This example is a proof of concept, for how to use the Yelp v2 API with javascript.
You wouldn't actually want to expose your access token secret like this in a real application.
-->

<html> 
<head> 
<title>Yelp OAuth Example</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script>
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script>
<script type="text/javascript" src="https://raw.github.com/padolsey/prettyPrint.js/master/prettyprint.js"></script>
<script type="text/javascript">
var auth = { 
  //
  // Update with your auth tokens.
  //
  consumerKey: "YOUR_CONSUMER_KEY", 
  consumerSecret: "YOUR_CONSUMER_SECRET",
  accessToken: "YOUR_TOKEN",
  // This example is a proof of concept, for how to use the Yelp v2 API with javascript.
  // You wouldn't actually want to expose your access token secret like this in a real application.
  accessTokenSecret: "YOUR_TOKEN_SECRET",
  serviceProvider: { 
    signatureMethod: "HMAC-SHA1"
  }
};

var terms = 'food';
var near = 'San+Francisco';

var accessor = {
  consumerSecret: auth.consumerSecret,
  tokenSecret: auth.accessTokenSecret
};

parameters = [];
parameters.push(['term', terms]);
parameters.push(['location', near]);
parameters.push(['callback', 'cb']);
parameters.push(['oauth_consumer_key', auth.consumerKey]);
parameters.push(['oauth_consumer_secret', auth.consumerSecret]);
parameters.push(['oauth_token', auth.accessToken]);
parameters.push(['oauth_signature_method', 'HMAC-SHA1']);

var message = { 
  'action': 'http://api.yelp.com/v2/search',
  'method': 'GET',
  'parameters': parameters 
};

OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message, accessor);

var parameterMap = OAuth.getParameterMap(message.parameters);
parameterMap.oauth_signature = OAuth.percentEncode(parameterMap.oauth_signature)
console.log(parameterMap);

$.ajax({
  'url': message.action,
  'data': parameterMap,
  'cache': true,
  'dataType': 'jsonp',
  'jsonpCallback': 'cb',
  'success': function(data, textStats, XMLHttpRequest) {
    console.log(data);
    var output = prettyPrint(data);
    $("body").append(output);
  }
});
</script>
</head> 
<body>

</body>
</html>

This code runs fine when you plug in the values for the various 
keys assigned to you. The question is can you hide this info 
from the client when they do a view source of the page? I looked 
at obfuscate techniques but they merely make it harder to find 
out the secrets. Anyone have any ideas on this?

Thanks,
Jim

jQuery callbacks and JSONP

[7Replies]

20-Jun-2013 05:55 PM
Forum: Using jQuery

Hello,

I am trying to fully understand callback names. I see this code in the jQuery docs:

// Using YQL and JSONP
$.ajax({
 url: "http://query.yahooapis.com/v1/public/yql",
 
 // the name of the callback parameter, as specified by the YQL service
 jsonp: "callback",
 
 // tell jQuery we're expecting JSONP
 dataType: "jsonp",
 
 // tell YQL what we want and that we want JSON
 data: {
 q: "select title,abstract,url from search.news where query=\"cat\"",
 format: "json"
 },
 
 // work with the response
 success: function( response ) {
 console.log( response ); // server response
 }
});

So say I go to the YQL console at:
http://developer.yahoo.com/yql/console/

and I name the callback there jims . Is the whole thing with respect to jQuery AJAX is to now name the above piece of code from above:

 // the name of the callback parameter, as specified by the YQL service
 jsonp: "jims",

Is this what the naming of callback functions is all about? Also can I just name the callback in YQL to whatever I want, like jims?

Thanks,
Jim

Writing datepicker value to console
[4Replies]
- 17-Jun-2013 12:53 PM
- Forum: Using jQuery UI
Hello,

I have this code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
var x = $( "#datepicker" ).datepicker();
</script>
</body>
</html>

What I want to do is write x , where x is the date selected to the console using console.log . How would this be done?

Thanks,
Jim

Using .slideToggle()
[2Replies]
- 14-Jun-2013 05:35 AM
- Forum: Using jQuery
Hello.

I am trying to figure out how to use some of the options for .slideToggle() . I have a small snippet of code below:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div id="clickme">click me</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<script>
$(window).load(function() {

$('#clickme').click(function() {

var test = $('#book').slideToggle(600, 'linear', function() {
// Animation complete.
}).done(function() {});
//console.log($(test).done());
//test.done();
});

});

</script>
</body>
</html>

I am trying to use the done method. I figure I can use chaining here as well. But when I try and chain the .done method I get an error of, "Uncaught TypeError: Object [object Object] has no method 'done'"

Anyone know what is wrong?

Jim

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend

Right