Aktualisieren der Broschüre L.imageOverlay mit jquery serialize ohne Seitenaktualisierung?

Aktualisieren der Broschüre L.imageOverlay mit jquery serialize ohne Seitenaktualisierung?

Ich entwickle eine Anwendung, die Raster-/Bildkarten (png, tif) abruft und in einer Broschürenkarte anzeigt. Allerdings hat mir die Seite und die Kartenaktualisierung beim Absenden des Formulars nicht gefallen.

Außerdem möchte ich, dass die Karte nur die Bildebene aktualisiert. Auf normale Weise ist es voller Verweise. So habe ich es geschafft, diesen Code zum Laufen zu bringen.

$('#forms').on('submit',function(e) { $.ajax({ url:'fun.php', data:$('#forms').serialize(), type:'GET ', success:function(result){ $('#downloads').html(result); } }); e.preventDefault(); });

Und die Bildebene der Broschüre hier.

raster = L.imageOverlay('', [[33.00, 31.00], [43.50, 35.00]]);

So the exact problem is, the $datafile couldn't be echoed on leaflet raster layer and I would like to reset the form values after submit. I tried to use setUrl from leaflet method on image layer but it doesn't work.

The problem is solved. First, I changedecho $datafiletoecho '';This js variable is echoed in the html output page. Then, it was possible to call the js variable, imageUrl.

There, was another problem with the image display. I was hiding the image layer div usingdisplay:nonewhen no file is found. That cause the image not to show. Thus, in the jquery success function, I had to add,$("img.leaflet-image-layer.leaflet-zoom-animated").show();

Then a friend helped me to add a function usingsetUrl()function of leaflet which is used to change the imageUrl asynchronously.

JQuery Tutorials

Scripting languages are programming languages mostly (but not necessarily exclusively) used for scripting that don't require an explicit compilation step. Scripting languages usually sits behind some programming language. These are designed for integrating and communicating with other programming languages. These languages usually have less access to the systems native abilities since they run on a subset of the original programming language. For ex. Javascript will not be able to access your file system.

One common difference between a scripting language and a programming language is that, while a programming language is typically compiled first before being allowed to run, scripting languages are interpreted from source code or bytecode one command at a time. Generally, compiled languages run faster than scripting languages because they are first converted native machine code . Also, compilers read and analyze the code only once, and report the errors collectively that the code might have, but the interpreter will read and analyze the code statements each time it meets them and halts at that very instance if there is some error. Although scripting languages may have less access and are slower, they can be very powerful tools. One factor attributing to a scripting languages success is the ease of updating.

Scripting Language examples

Programming Language examples

Send form to mail via PHP, without page refresh and fields cleared

I have a form on my website, which sends the information to my email via PHP code. It all works like a charm, though when I submit the form it refreshes/reloads the page.

Is there a way to make it so that when the user clicks the submit button that the page won't refresh and the fields will be cleared as well?

I've been finding many posts by people with the same problem here on SO, though it's not all working for me.

What I already tried: using an iFrame. The page then didn't refresh, and the fields wouldn't get cleared.

What's the best thing for me to do?

Remember: Javascript functions are CASE SENSITIVE.

I had a case where I'm pretty sure that my code would run smoothly. But still, got an error and I checked the Javascript console of Google Chrome to check what it is.

And got the same error message:

Nothing seems wrong with the code above but it was not running. I troubleshoot for almost an hour and then compared it with my other running code. My error is that it was set to SetAttribute , which should be setAttribute .

In case there are any morons out there like me, I had this frustrating problem because I forgot a simple

keyword before instantiating a new object.

I just had the same message with the following code (in IcedCoffeeScript):

This seemed to me like regular ICS code. I unfolded the await-defer construct to regular CoffeeScript:

What really happend was that I tried to pass 1 callback function( with 2 parameters ) to function f expecting two parameters, effectively not setting cb inside f , which the compiler correctly reported as undefined is not a function .

The mistake happened because I blindly pasted callback-style boilerplate code. f doesn't need an err parameter passed into it, thus should simply be:

In the general case, I'd recommend to double-check function signatures and invocations for matching arities. The call-stack in the error message should be able to provide helpful hints.

In your special case, I recommend looking for function definitions appearing twice in the merged file, with different signatures, or assignments to global variables holding functions.

Applied jQuery: Being Effective with AJAX

In many cases, you'll want to use various jQuery AJAX functions to update visible Web-site content. Some content updates may be based on the user information for the current user, other updates may be based on requests performed by any user, such as information based on a search performed by the Web-site visitor.

Let's look at some techniques for using jQuery's AJAX methods to update content.

Getting Content Based on the Current User

If you have been developing Web sites even for the shortest period of time, you are likely aware of query strings in the URL. Unless Web-site developers are using methods to hide the strings, you may have seen something similar to this:

Everything past the question mark is a query string that can be used in a GET request to the server. Each item is set up in a name=value pair, which can be easily parsed by scripting languages like jQuery and PHP.

Most forms utilize the POST method to request data from the server, but URLs are limited to the GET method. Most Web developers follow the rule of using GET when only retrieving data and using POST when sending data to the server that will invoke a change on the server.

GET requests are not limited to the URL. You can use GET as a form method or in AJAX. jQuery provides a shorthand method call for making this kind of request to the server, and conveniently, it is called get.

  1. Open chap4/4-2.php to set up a get function to retrieve the current user's pictures into the Web browser. Rather than storing the jQuery code in a different file and including it, let's use a slightly different technique that is very valuable when small jQuery scripts are used.
  2. Locate the closing </body> tag. Just before that tag, the jQuery AJAX get method will be set up to retrieve the user's pictures. Begin by inserting the script tag:
  3. Open the function by making sure that the document (the current Web page DOM information) is completely loaded:
  4. The first critical step in making sure that you get the right information from the database is to assign the value of the cookie set during login to a variable that can be used by jQuery. The information in the cookie is the user's name:
  5. As stated earlier, the get method relies on name=value pairs to do its work properly. Make sure that the get request sends the cookie data to the server as a name=value pair:
  6. Load the information returned into the div with an id of myPhotos:
  7. Close the get function with the data type that is expected to be returned from the PHP script. Once closed, set the closing </script> tag (the </body> tag is shown only for reference):

Before you can get the photos from the database, you need to create the photo table. So, run the pephoto.sql file located in the chap4/sql folder of the code download. The SQL file will also insert default data for the photos located in the chap4/photos folder.

In the PHP file chap4/inc/userPhoto.php, the SQL query uses the information contained in the photoUser variable:

The user's photographs are retrieved and placed into a table for viewing. The results are illustrated in Figure 4.6.

Figure 4.6 The user's photographs in tabular form.

Combining user data with the get method is very effective for pages where data unique to the user must be displayed. What about content that is not unique to the user? The get method has a cool little brother called load.

Loading Content Based on Request

Of the jQuery AJAX shorthand methods, load is the simplest and easiest method for retrieving information from the server. It is especially useful if you want to call on new information that does not need data passed to it like you would do with the get or post methods. The syntax for load is short and sweet as well:

Clicking on the Write link (Figure 4.7) invokes the load function, causing chap4/inc/userWrite.php to be loaded into the div with an id of newArticle.

Figure 4.7 The form has been loaded into the page so that the user can write a new article.

There is one other really neat feature that load offers: You can use it to bring in just portions of other pages. For instance, to bring in a div with an id of part1 from another page, the syntax is as follows:

Having the option of loading page portions can give you a great deal of design and organizational flexibility.

In Chapter 6, "Creating Application Interfaces," you'll use an example in which several widgets will be contained in one file that will be called by load as needed to complete the interface.

Not every Web site can use every AJAX feature that jQuery offers, so you'll leave the Photographer's Exchange Web site behind at this point. You'll develop stand-alone examples to demonstrate some of the other features and events available in jQuery's AJAX library.

Loading Scripts Dynamically

There are some cases in which you will need to load JavaScript or jQuery scripts just for one-time use in your Web pages and applications. jQuery provides a special AJAX shorthand method to do just that, getScript.

For this example, you'll use the code contained in chap3/dvdCollection, which is a small personal Web site designed to be used as a catalog of all the DVD and Blu-ray Discs that you own.

From time to time, you'll want to know just how many DVD and Blu-ray Discs you have, but it isn't really necessary to load the script that performs the counts and displays the result every time you use the site. jQuery's getScript method is the perfect remedy for loading scripts that you'll use infrequently.

  1. Set up a script called dvdcount.js and place it in the inc directory of the DVD collection site. This is the script that getScript will load when called upon to do so.
  2. Include the document ready functionality:
  3. Each movie is contained in a div with a class of dvd. Assign the count of those div's to the variable totalCount:
  4. Use jQuery's :contains selector to help count the types of discs in the collection. The :contains selector is very handy for finding elements containing a specific string. Here it is used to find the text "DVD" or "Blu-ray" in the h3 element:

Set up the modal window to show the user the information. This is the same technique used in Chapter 2 and Chapter 3, so I won't cover each step in detail:

The modal will only pop up for a moment before fading out:

The main page for the DVD catalog site is chap4/dvdCollection/4-5.php. Let's take a moment to set it up.

  1. Enter the information for the header:
  2. Include the jQuery file so that all of the interactions will run properly:
  3. Set up the body next:
  4. Set up the menu section carefully, because you'll use these elements to call other scripts:
  5. Set up the div that will house the content of the page:
  6. Create the section containing the jQuery scripts you'll use to load information into the page along with the function that loads chap4/dvdCollection/inc/getdvd.php. The PHP is called by the jQuery load method to get the information about the DVD collection:
  7. Bind the click method to the list item with an id of summary. This will call getScript to run the jQuery script created earlier, dvdcount.js:
  8. Close out the HTML:

Clicking the Summary element on the Web page causes the dvdcount.js script to be loaded and run, showing the modal window complete with counts (Figure 4.8). The modal window then slowly fades away.

Figure 4.8 Clicking on the Summary element loads and runs the script.

You will find many cases where loading and running scripts on the fly will enhance your Web sites and applications.

Next, you'll turn your attention to many of jQuery's AJAX extras and learn how to apply them practically.

Using jQuery's AJAX Extras

In addition to the shorthand methods, jQuery provides many useful methods and helpers to give you ways to use AJAX efficiently. These methods range from low-level interfaces to global event handlers, all of which, when applied properly, will make your programs and Web sites more effective.

Let's look at these extras, starting with the low-level interfaces.

Working with Low-Level Interfaces

jQuery's low-level AJAX interfaces provide the most detailed approach to AJAX functions. This kind of detail makes the low-level interfaces quite flexible but introduces additional complexity due to all of the options available.

One way to combat the complexity of having an extensive choice of options is to use a method to set up options that do not change frequently. Take a look at the simplest of the low-level interfaces, ajaxSetup:

The ajaxSetup method allows you to provide options that will be used with every AJAX request. You can set all of the AJAX options available (over 25 of them!) using ajaxSetup. This is very convenient if you need to make repeated AJAX requests to the same URL or use the same password each time you make a request. In many cases, developers will put all of their server-side AJAX handlers in the same file on the server. Using ajaxSetup shortens their AJAX calls, including the shorthand methods. Given the current example of ajaxSetup, your post method could be configured like this:

The only thing you need to supply to the post function is the data to be handled by ajaxProcessing.php. One advantage of using the ajaxSetup method is that you can override any of the ajaxSetup options in the individual AJAX calls that you make.

The low-level interface that you will see in use most is the straight ajax method. It is the function that is wrapped by the shorthand methods and is at the very heart of all of jQuery's AJAX calls. The ajax method is capable of accepting all of the options that can be used with jQuery's AJAX requests. Perhaps the best way to understand the low-level AJAX method is to compare it to one of the shorthand methods you used earlier. Here is the post method that you used to check to make sure the user name was available:

Here is the same request using jQuery's low-level ajax method:

The differences are fairly obvious, such as declaring the method that AJAX should use to convey the information to the server (type: 'POST'), specifying the way that raw data is formatted (data: 'formName=register&penewuser='+newName+'',) and ensuring that the success method is implicitly defined (success: function(data)<. ).

Take a tour of jQuery's ajax API at to see all of the options available for use with this method.

Now that you can send information to the server and receive information back from your server-side processes, you need to make sure that your users are informed that an AJAX action is taking place. jQuery provides several helper functions that make it easy for you to do just that.

Triggering Events Before and After the AJAX Call

In many cases, your jQuery AJAX functions will happen so quickly that users may not even know that their actions achieved the desired result. In other cases, the AJAX process may be lengthy and require that users wait for results. jQuery provides four methods that you can use to keep users informed: ajaxStart, ajaxSend, ajaxComplete, and ajaxStop.

It is important to understand that there is an order to these four functions. You can call any number of AJAX processes during any given event. For this reason, you may want to know not only when the first AJAX function starts, but also when each subsequent AJAX method gets called and completes. Then you may want to register that all of the AJAX calls have completed. If you imagine jQuery AJAX events as a stack of items as in Figure 4.9, you'll see how the jQuery AJAX engine defines the order of the events and their calls.

Figure 4.9 The initial jQuery events are stacked up by the developer and then ordered and processed by jQuery's AJAX engine.

Let's take a close look at how to use the ajaxStart and ajaxStop methods by giving users a visual queue during a data- and file-submission event in the DVD Collection Catalog.

In 4-6.php you will see a form (Figure 4.10 on the next page) that accepts user input and provides a method for uploading a file. This combination is not unusual, but it will require that you pay careful attention when writing the PHP and jQuery to handle the data transfer and file upload.

Figure 4.10 The form that users will fill out to add movies to their personal database.

Two PHP scripts will handle the data supplied in the form: one for the movie cover art upload (not really AJAX, remember?) and one for the data input into the form.

Now that you've completed the PHP script for the file upload, you can create the PHP script that will be called by the jQuery AJAX post method to update the database.

Create a file called postdvd.php and store it in the chap4/dvdCollection/inc folder.

Only two actions are contained in postdvd.php: one to connect to the database and one to run the query that will perform the database update.

Make sure that you run the SQL chap4/dvdCollection/sql/create_collection_table.sql script in your database platform to set up and populate the table for the DVD collection.

With the PHP scripts complete, you can now turn your attention to the jQuery functions. All of the jQuery functions will be placed into the file inc/movieUp.js.

Start the file by defining the ajaxStart method:

The ajaxStart function will be called as soon as an AJAX request is made. The method can be bound to any element available in the DOM and is bound to the body element for use here. You can define any processes that you want within the ajaxStart method.

For this file and data upload, create a modal pop-up window to give the users a visual clue that something is occurring:

The technique used to create the modal window is no different than what you have used previously in the book.

Clear the form elements so that the user can use the form to add another movie. Just like using ajaxStart, you can define any process within the ajaxStop function:

Be very specific with your jQuery selectors when choosing which form elements to clear. For example, using just $('#addMovie input') will also clear the form's buttons, and that would confuse the user.

Once the form data has been processed by the serialize function, concatenate the two strings together in the uploadData variable:

When the movie data form is submitted, the jQuery AJAX engine will see that there is a post occurring during the process, triggering the ajaxStart method. Figure 4.11 shows the modal loading indicator called by ajaxStart.

Figure 4.11 The method has called the waiting indicator.

Once the post process has completed, the ajaxStop method is triggered, causing the modal waiting indicator to fade out.

Now that you have learned to handle AJAX calls and the data they return, you need to learn how to handle one of the Web's fastest-growing data types, JSON.

If you need animated graphics to indicate to your users that something is occurring in the background, check out There you can generate several different animated graphics in a wide array of colors.

Using JSON

JSON (JavaScript Object Notation) has become a popular and lightweight way to transmit data packages for various uses over the Internet. In many ways, JSON is more popular than XML for delivering data quickly and efficiently. JSON data can be easily used with the jQuery AJAX shorthand method especially designed to handle the JSON data type, getJSON.

To understand JSON, you need a little lesson in JavaScript's object literal notation. Object literal notation is an explicit way of creating an object and is the most robust way of setting up a JavaScript object. Here is an example:

The person object has been literally defined as name: value pairs, including a nested array (stats) and a method to make the object walk. It is a very tidy way to describe an object.

The following commands interact with the person object:

JSON is a subset of the object literal notation, essentially the name: value pairs that describe an object. A JSON array can contain multiple objects. The key to being successful with JSON is making sure that it is well-formed. JSON must have matching numbers of opening and closing brackets and curly braces (the braces must be in the correct order) the names and values in the name : value pairs must be quoted properly and commas must separate each name: value pair.

To illustrate this, look at the JSON for the person object:

It's important to note that the JSON object does not contain any methods or functions that can be executed. JSON specifically excludes these from the notation because JSON is only meant to be a vehicle for transmitting data.

Setting Up a JSON Request

Twitter has undoubtedly become one of the most popular social media outlets since the dawn of the Internet. Twitter has made an API available for those who want to extend the use of Twitter to their own Web pages and applications. One of the most popular uses of the Twitter API is to include recent tweets in personal Web sites and blogs.

Taking advantage of the API can be as simple or as complex as you want it to be. Let's build a simple widget to obtain your last ten tweets for inclusion in a Web page.

The tweet data is returned from Twitter in the JSONP format. JSONP is known as "JSON with Padding." Under normal circumstances, you cannot make AJAX requests outside of the domain the request originates from (Figure 4.12 on the next page). JSONP relies on a JavaScript quirk: <script> elements are allowed to make those cross-domain requests.

Figure 4.12 The only way you can make a cross-domain request is with JSONP.

To make this work, the JSON must be returned in a function. Using the JSON object created earlier, the JSONP would look like this:

If it looks like gibberish to you now, don't worry as you walk through the function being built to get JSON data from Twitter, it will become much clearer.

Let's build the entire file, including CSS, from scratch.

  1. Create a file called 4-7.php in the chap4 folder.
  2. Set up the DOCTYPE and include the basic head, title, and character set declarations:
  3. Provide a reference to the jQuery source that you will be using. Make sure that the path is correct in this case the path is inc/jquery-1.5.2.min.js:
  4. Create the style information for the Twitter widget:
  5. Close out the head section of the page:

The body section for the widget is very simple: Add a div with an id of tw to which the tweets will be appended:

The jQuery script to get the tweets is very short but requires that you pay attention to detail. You will make the names and hash tags clickable so that they have the same functionality they have on the Twitter Web site. Any links included in a tweet will also be clickable, opening a new browser window to show the information.

Create the URL to access Twitter and store the URL in the variable twitterURL:

Be sure to replace YOUR_TWITTER_USER_NAME with your actual Twitter user name. It is very important to make sure that the URL is formatted with the query string (name=value pairs) that will be used by getJSON during the request. Send three options to Twitter: your Twitter screen_name, the count of the number of tweets to return, and most important, the callback. It is the callback option that lets Twitter know that you expect the return data to be JSONP.

The callback option for the query string is not the same as the callback for the getJSON request.

Use regular expressions to locate URLs, @ tags, and hash(#) tags in the tweet so that you can give each the proper treatment. Look for URL's first:

The regular expression /http://S+/g matches text beginning with http:// and ending in a space, which would typically indicate a URL. The /g (global) says to match all URLs in the string contained in tweetText. The URLs are turned into links by replacing the URL with an anchor tag containing the URL as both the href and the text of the link. In JavaScript the #38 property contains the last item matched by a regular expression. Because the URL was the last item matched, it can be replaced into an anchor tag by using the #38 property.

Twitter prefixes user names with the @ symbol. So, search tweetText for words beginning with the @ symbol:

Here, the regular expression /(@)(w+)/g indicates that all words beginning with the @ symbol are replaced by the appropriate anchor tag to open a browser window for users' tweets. The $1 and $2 contain the information matched in each parenthesis, which is used to include those matches in the replacement text.

Figure 4.13 The Twitter widget retrieves the last few posts that you made.

With all of the data traveling back and forth between clients and servers, including servers not under your control, it is only natural to be concerned about the security of the information that you and your Web-site visitors send in AJAX requests. Let's address those concerns next.

4 Answers 4

If the stand alone web application and SharePoint are not in the same domain, the simple answer is that you cannot unless you are using Apps.

The more complex answer is that you would need to have a proxy of some sort to do this. You could write a simple layer 7 proxy inside the non-SharePoint web app that forwards the requests and the authentication or use something like Squid or even IIS itself to do this.

Hi Robert, both applications are in the same network and wouldn't need to make calls across the firewall. Does that make easier to call SP webservices from that html/jquery page?

It's all about the same origin policy, not about networking. Since SharePoint does not support JSONP/CORS, you have to respect the same origin policy. If the systems are not in the same DNS domain (i.e., then by doing an AJAX call to the SharePoint server would be enabling an XSS attack. The only way to accomplish this scenario without a proxy, would be to introduce serious security vulnerability into the your users' browsers.

Another consideration might be hosting the non-SharePoint site in the same domain as SharePoint.

In order to pass the original user's credentials you'll need to configure the WCF to use Kerberos Constrained Deligation.

I am advised to provide detailed answer, sorry about it as it was my first post on SharePoint Stack Exchange. The following is my blog link where I added step by step approach how to perform CRUD operations on a List that resides on another on premises farm. Recently working on an assignment I had faced this issue and could not find any end to end solution hence I documented it at on my blog at following url:

In nutshell, following are the steps required to get a list item added, updated or deleted from one farm to another: Its applicable if you have both the farms in same premises.

Call ContextInfo REST API call and retrieve FormDigestValue value.

Pass the FormDigestValue to subsequent calls to perform CRUD.

Making sure that metadata type for ListItem is correct, in my case my List Name is "OAuthTestList", the SharePoint adds "ListItem" as suffix to the list name, please refer following code line:

How to get Form Digest: I am calling contextinfo REST api call as shown in following function and retrieving value FormDigestValue from GetContextWebInformation object of response. Please pay attention how I am using "Target SharePoint Farm" URLs in hostUrl and how I am using it to construct the appURL value.

Once the FormDigestValue is retrieved then we can save that in a variable and pass it in subsequent REST API Calls. A possible implemention of AddListItem could be as following:

function AddListItem(formDigestValue,appUrl, newTitle) < var jsonMetaData = < __metadata: < type: 'SP.Data.OAuthTestListListItem' >, Title: newTitle > $.support.cors = true

Having said above please note that you have to add an out of box SharePoint page with a Script Editor or content query web part to perform CRUD. Doing in this way you dont need to have an app deployed to SharePoint and simply adding two webpart on a SharePoint Page along with code will do the trick.

Same code can be used from a stand alone website running under a common account, as long as you get a form digest successfully the code will work.

The language of C__ FILE__ 、__ LINE__ And line

__FILE__ is used in C to indicate the filename of the source file in which the statement is written, for example (test.c) :

GCC compiler generates a.out. After execution, the output is:

Compiling results under Windows VC6.0 are as follows:

C : Documents and Settings Administrator Desktop Test.c

__LINE__ in C is used to indicate the position of the statement in the source file. Examples are as follows:

The program is compiled in Linux with GCC, in Windows VC6.0 under the compilation can pass, the execution results are:

__LINE__ can also be reset with the #line statement, for example:

After compilation and execution, the output is:

GCC also supports __func__, which indicates the function, but this keyword is not supported in VC 6.0 under Windows, for example:

    #include < stdio.h> void main()

The output result after compilation is

this is print by function main

Note # “line”, “__LINE__”, “a __FILE__” and “__func__” are case sensitive.

Updating leaflet L.imageOverlay using jquery serialize without page refresh? - Geographic Information Systems

I really like the look and feel of this application as well as the performance!
It's quite professional, but I'm wondering if you would still use this approach?
It seems to perform better than the Angular project and provide better interactions.

If it's fundamentally sound architecture, are there any relatively straightforward revisions to it that you would suggest to ensure it remains viable for the next 10, 15 years (if web apps can last that long!).

I request you to kindly Upload one more article regarding

I have been configured Northwind database by downloaded SQLSript on my local system and changed the connection string but Sample project is not working.

Actually, I am try to run NorthwindWebApplication .

I was looking for one consolidated example of grid, partial view, MVVM , Knockout and I got all of these here.

Very useful article.
One query: In the MVVM structure diagram, why the section 'View Model' has been added to all parts like Model, controller and view?

to NorthWindDataGrid.cs and a jQuery onchange to call the Inquiry with the hidden values
pagedDataGrid = new NorthwindWebControls.NorthwindDataGrid("SupplierInquiryGrid")
means a jquery call like
SupplierInquiry($("#SupplierInquiryGridCurrentPageNumber").val(), $("#SupplierInquiryGridSortExpression").val(), $("#SupplierInquiryGridSortDirection").val())

Respected sir, can you mail me at [email protected]

In this senario, Price & Qty is Input field in Grid row and after lost focus from either price or qty , Total would be calculate [Price * Qty = Total] automatically in the same row last column.

Great article!!
I´m not able to open this solution. Can someone explain me how can open it?
I have VS 2010 and also VS 2012 but when I open the solution, all the projects are unavailable and it´s not possible to reload them.

General News Suggestion Question Bug Answer Joke Praise Rant Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.


Used to load and display a video player over specific bounds of the map. Extends ImageOverlay .

A video overlay uses the <video> HTML5 element.

Usage example


Factory Description
L.videoOverlay( video, bounds, options?) Instantiates an image overlay object given the URL of the video (or array of URLs, or even a video element) and the geographical bounds it is tied to.


Option Type Default Description
autoplay Boolean true Whether the video starts playing automatically when loaded.
loop Boolean true Whether the video will loop back to the beginning when played.
keepAspectRatio Boolean true Whether the video will save aspect ratio after the projection. Relevant for supported browsers. See browser compatibility
muted Boolean false Whether the video starts on mute when loaded.
Option Type Default Description
opacity Number 1.0 The opacity of the image overlay.
alt String '' Text for the alt attribute of the image (useful for accessibility).
interactive Boolean false If true , the image overlay will emit mouse events when clicked or hovered.
crossOrigin Boolean|String false Whether the crossOrigin attribute will be added to the image. If a String is provided, the image will have its crossOrigin attribute set to the String provided. This is needed if you want to access image pixel data. Refer to CORS Settings for valid String values.
errorOverlayUrl String '' URL to the overlay image to show in place of the overlay that failed to load.
zIndex Number 1 The explicit zIndex of the overlay layer.
className String '' A custom class name to assign to the image. Empty by default.
Option Type Default Description
bubblingMouseEvents Boolean true When true , a mouse event on this layer will trigger the same event on the map (unless L.DomEvent.stopPropagation is used).
Option Type Default Description
pane String 'overlayPane' By default the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default.
attribution String null String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.


Event Data Description
click MouseEvent Fired when the user clicks (or taps) the layer.
dblclick MouseEvent Fired when the user double-clicks (or double-taps) the layer.
mousedown MouseEvent Fired when the user pushes the mouse button on the layer.
mouseup MouseEvent Fired when the user releases the mouse button pushed on the layer.
mouseover MouseEvent Fired when the mouse enters the layer.
mouseout MouseEvent Fired when the mouse leaves the layer.
contextmenu MouseEvent Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).
Event Data Description
add Event Fired after the layer is added to a map
remove Event Fired after the layer is removed from a map
Event Data Description
popupopen PopupEvent Fired when a popup bound to this layer is opened
popupclose PopupEvent Fired when a popup bound to this layer is closed
Event Data Description
tooltipopen TooltipEvent Fired when a tooltip bound to this layer is opened.
tooltipclose TooltipEvent Fired when a tooltip bound to this layer is closed.


Returns the instance of HTMLVideoElement used by this overlay.

Sets the opacity of the overlay.

Brings the layer to the top of all overlays.

Brings the layer to the bottom of all overlays.

Changes the URL of the image.

Update the bounds that this ImageOverlay covers

Changes the zIndex of the image overlay.

Get the bounds that this ImageOverlay covers

Adds the layer to the given map or layer group.

Removes the layer from the map it is currently active on.

Removes the layer from the given map

Removes the layer from the given LayerGroup

Returns the HTMLElement representing the named pane on the map. If name is omitted, returns the pane for this layer.

Used by the attribution control , returns the attribution option.

Binds a popup to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .

Removes the popup previously bound with bindPopup .

Opens the bound popup at the specified latlng or at the default popup anchor if no latlng is passed.

Closes the popup bound to this layer if it is open.

Opens or closes the popup bound to this layer depending on its current state.

Returns true if the popup bound to this layer is currently open.

Sets the content of the popup bound to this layer.

Returns the popup bound to this layer.

Binds a tooltip to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .

Removes the tooltip previously bound with bindTooltip .

Opens the bound tooltip at the specified latlng or at the default tooltip anchor if no latlng is passed.

Closes the tooltip bound to this layer if it is open.

Opens or closes the tooltip bound to this layer depending on its current state.

Returns true if the tooltip bound to this layer is currently open.

Sets the content of the tooltip bound to this layer.

Returns the tooltip bound to this layer.

Adds a listener function ( fn ) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick' ).

Adds a set of type/listener pairs, e.g.

Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to on , you must pass the same context to off in order to remove the listener.

Removes a set of type/listener pairs.

Removes all listeners to all events on the object. This includes implicitly attached events.

Fires an event of the specified type. You can optionally provide an data object — the first argument of the listener function will contain its properties. The event can optionally be propagated to event parents.

Returns true if a particular event type has any listeners attached to it.

Behaves as on(…) , except the listener will only get fired once and then removed.

Adds an event parent - an Evented that will receive propagated events

Removes an event parent, so it will stop receiving propagated events

11 Answers 11

Chrome documentation states that Ctrl + F5 or Shift + F5 should do "Reloads your current page, ignoring cached content. "

If it is not working, you can file a bug report, but it looks like quite a few other people are having the same issue.

[Existing bug log on this issue] Closed as a duplicate, the issue remmains:

In the opened developer tools ( Ctrl + Shft + I or ⌘ + ⌥ + I ):

  1. Select the Network tab
  2. Activate Disable cache check-box.
  3. DO NOT CLOSE Developer tools - otherwise cache is re-enabled.

On a Mac, it's Shift+Command+R, or holding down Shift while clicking the reload button (as opposed to Command+R or a normal click for a regular refresh).

For Shift+Command+R, cache is simply ignored and resources are requested like no cache existed.

For Command+R, Chrome will issue If-Modified-Since or Etag requests to the web server, even for things that are actually cached. For most, if not all, content the server should then respond with 304 Not Modified . This is true for most, if not all, modern browsers.

The only way to force relying on the cache (without the browser even asking for possible changes) seems to be clicking a link on the web page, or by following a bookmarked link, or by going into the URL location bar and hitting Return there (Command+L, Return).

However: a longstanding known issue in Chrome, Chrome Forced Refresh does not ignore cache (and the more recent Reload/Refresh does not refresh), or maybe actually a feature in WebKit, Dynamically inserted subresources aren't revalidated even when the containing document is reloaded, makes Chrome not clear ALL related caches when using the above methods. A Chromium developer explains:

The network tab of the developer tools show a waterfall of all resources as they are loaded. There are two vertical lines at the right hand side. one of them is labeled "Load event fired" on hover. Anything loading after that point is not officially part of the page (a page can keep issuing requests for hours) [. ] so it will NOT be "refreshed" with any combination of f5. This is by design.
[. ]
Caching [of any resource, before and after the "Load event fired" line] is determined by the HTTP headers of the response, not by the time the request was issued.

Chrome DevTools' Disable Cache invalidates the disk cache (great for developing!), but.. only while devtools is visible.

Updating leaflet L.imageOverlay using jquery serialize without page refresh? - Geographic Information Systems

paste.throw_errors True pylons.action_method > pylons.controller pylons.environ_config <'session': 'beaker.session', 'cache': 'beaker.cache'>pylons.pylons

pylons.routes_dict <'action': u'auth_form', 'controller': u'', 'label': u'2011-12-19T124447/Ministerstvo-financxed-u010ceskxe9-republiky-_-Pu0159xedprava-rozpou010dtu.pdf'>repoze.who.identity repoze.who.logger repoze.who.plugins <'openid': , 'friendlyform': , 'ckan.lib.authenticator:UsernamePasswordAuthenticator': , 'auth_tkt': , 'ckan.lib.authenticator:OpenIDAuthenticator': > routes.route routes.url webob._parsed_query_vars (GET([]), '') webob.adhoc_attrs <'language': 'en-us'>wsgi process 'Multiprocess' wsgi.file_wrapper wsgiorg.routing_args ( , <'action': u'auth_form', 'controller': u'', 'label': u'2011-12-19T124447/Ministerstvo-financxed-u010ceskxe9-republiky-_-Pu0159xedprava-rozpou010dtu.pdf'>) >>>" dread 1661 Wrong Routes version installed by CKAN package ckan defect assigned 2012-01-16T12:47:41Z 2012-06-15T15:25:49Z "Jaakko Louhio reported that the wrong Routes version got installed during CKAN's package install. He is using Ubuntu 10.04 and he believes it install Routes 1.12.3 instead of what we use which is 1.11." dread 2331 Search should AND terms not OR terms ckan defect kindly reopened 2012-04-28T18:24:45Z 2012-12-25T22:25:44Z "Appears current default search in CKAN ORs terms rather than ANDing them (i.e. adding more terms increasing number of items found rather than reducing it). Not sure when this crept in or if it has been there for a long time." rgrp 2405 Improvements to data viewer embed ckan defect icmurray assigned 2012-05-21T06:59:25Z 2012-06-25T14:53:01Z " * Decent powered by icon for the Embed for the DataHub? (make this text customizable and allow html . ) * Current icon and text looks really bad * Embed link uses uuid rather than dataset name (this goes to perma-url question . ) * Data viewer embed url includes all the resource info (not needed -- just url and backend info . ) * Embed extension urls do not respect original domain but instead use site_url (I'm guessing). E.g. domain ends up with links to embed on " rgrp 2412 More than one resource invalidatiing breaks dataset edit form ckan defect zephod assigned 2012-05-22T20:05:48Z 2012-05-28T11:07:14Z "When attempting to add more than one resource at once, if more than one resource invalidates, this results in a js error, leaving the form in an inconsistent state. Repro: 1. Go to /dataset/new 2. Add a new resource. Fill in one of the fields with an invalid value. eg - last_modified, or size. 3. Add another resource, doing the same thing: make one of the fields invalid. 4. Try to save the dataset. 5. The entered resource information will be lost, and a js error ""Uncaught Error: Can't add the same model to a set twice,: backbone.js:586"" will be thrown." icmurray 2745 Password reset returns an exception if the key parameter is missing ckan defect new 2012-07-24T16:05:31Z 2012-07-24T16:05:31Z "Instead of showing a notice, the password reset page throws an exception if the key parameter is missing: <<< Module ckan.controllers.user:329 in perform_reset c.reset_key = request.params.get('key') if not mailer.verify_reset_link(user_obj, c.reset_key): h.flash_error(_('Invalid reset key. Please try again.')) abort(403) if not mailer.verify_reset_link(user_obj, c.reset_key): Module ckan.lib.mailer:100 in verify_reset_link if not user.reset_key or len(user.reset_key) dataset/foo-bar/resource/" dominik 2951 Paster command for building css from less ckan enhancement new 2012-10-01T19:12:20Z 2012-10-02T10:50:30Z "With the latest template, css and js changes in 2.0, there are a number of things that need preparation prior to a production deployment. One of these is: - the less files should be compiled to css (main.css, not just main.debug.css) This ticket is to provide a paster command which will compile the .less into the main.css file. The idea of the paster command is that it will be run by developers, and they will check in the resulting .css files. It will also provide a convenient mechanism for production scenarios with node.js installed on the production server, as they will be able to compile the .less there as well. ## Background The .css files that need to be served are built using `less`. The css files that are generated *are* checked-in to the repo but they are a build artifact. So the general workflow is: - commit changes to the less files - build the main.css file and commit This paster command slots into the above workflow for convenience. ## Notes - doc/frontend-development.rst - bin/less to run this paster command, `Node` will be required. So that dependency should be checked. ## The paster command This is the proposed behaviour of the paster command: - ensure `custom.less` does not exist - for each colour in: - generate a `custom.less` file for $colour. There's a paster command that does this already: `paster color . - generate the `css` from the `less` files. ie - the equivelant of running `bin/less --production`. - this will generate a `main.css` file, which should be renamed to `$color.css`. - ensure `custom.less` does not exist - generate the `css` from the `less` files. This will create a `main.css` with the default colour scheme. - call the paster command that minifies css and js files. (This command does not exist yet, see #2950)" icmurray 2952 incorporate javascriopt translations into translations workflow ckan enhancement seanh new 2012-10-01T19:15:45Z 2012-10-01T19:15:45Z There are now javascript translations. There's a paster command, `trans js`. This is a ticket to ensure that using `trans js` is documented in the normal ckan translation workflow (which is followed after a feature freeze, prior to release). And to see if there's any need for further incorporation into the current translation process. icmurray 2996 Fix behaviour of View Profile button in user popover when already on user's profile ckan enhancement new 2012-10-17T14:30:38Z 2012-10-17T14:30:38Z "The user popovers that appear when you hover the mouse over a user in an activity stream include a View Profile button that takes you to that user's profile page. If you are already on that user's profile page then it simply reloads the same page, but it sends you to the Datasets tab if you were on another tab. Possible solutions: Don't show button if already on user's page? Button just makes popover disappear, if already on user's page? Button does reload the page, but reloads the same tab (datasets, followers, activity stream) that you were on. Marking this low priority" seanh 3026 Support icons on nav_named_link ckan enhancement amercader new 2012-11-30T18:51:56Z 2012-11-30T18:51:56Z nav_named_link won't include the nice icon even when passing the icon keyword param. amercader 2277 Use the new atom feeds in IATI ckan refactor icmurray new 2012-04-02T17:10:28Z 2012-04-02T17:10:28Z Atom feeds have been implemented in core in #1593. The IATI-specific implementation can now be removed when IATI move to CKAN >= 1.6.1 icmurray 2603 Remove deprecated 'fields' parameter from resource_search ckan refactor icmurray new 2012-06-26T17:10:01Z 2012-06-26T17:10:01Z The fields parameter of resource_search was deprecated when fixing #2438. It can be removed in release 1.9, and the action tidied up as a result. icmurray 2621 Remove the deprecated 'fields' parameter from tag_search and tag_autocomplete ckan refactor icmurray new 2012-06-28T16:22:49Z 2012-06-28T16:22:49Z "This was deprecated in 1.8 as it wasn't accessible via GET requests due to being a dict. See #2439 In a future release of CKAN (probably 1.9) it can be removed. Internal uses of it were removed in #2439, but there are tests that still use it." icmurray 1544 delete old git branches ckan task new 2011-12-12T15:10:10Z 2011-12-12T15:10:10Z "We have 150 odd branches (<<>>) - most of them old - we should prune them. At very least, branches that have been merged in should be deleted. Look at old branches that haven't been merged in and wonder why. May be of some use: <<< git branch --merged git branch --no-merged >>>" dread 1261 Investigate dots in extras search ckan defect new 2011-08-03T10:19:28Z 2011-08-03T10:19:28Z It seems that searching for extras_foo:value works with solr, but doesn't. No theory on why. pudo 1317 password reset - improve user search ckan defect assigned 2011-09-07T17:12:19Z 2012-06-20T11:20:21Z "In password reset, it gets confused if you have two similar users. This is because with the string the user provides, it searches several fields, not just name but also fullname and email address, allowing you to search for these. But only name is unique. Specific problem: Ira searches for ""Irina"" then it finds both: <<< >>> (I think) Maybe need to choose which field it searches?" dread 2656 Feed with few results has bad paging link, causing exception ckan defect seanh new 2012-07-11T10:05:12Z 2012-07-11T10:05:12Z "This page has 0 results and contains a link to which the page=0 causes this exception: <<<'>: SOLR returned an error running query Error: ""'start' parameter cannot be negative"" >>>" dread 1260 Remove duplicate functions from _util.html ckan enhancement new 2011-08-03T10:17:32Z 2011-08-15T09:44:59Z There seems to be both a list view for dictized and non dictized data structures for all entities in _util.html at the moment. Probably in the back of someone's mind already, but cleanup here would be nice. pudo 1647 add links to ckan discuss & dev to thedatahub ckan enhancement new 2012-01-16T00:30:52Z 2012-01-16T09:49:43Z In the footer as well as more clearly & directly on the About page shevski 1823 Spring clean bin directory ckan enhancement new 2012-02-20T21:28:51Z 2012-05-28T11:12:34Z Huge number of accumulated (and likely unnecessary) scripts in /bin directory. rgrp 1096 [super] CKAN Hosted ckan defect rufuspollock new 2011-04-19T17:44:22Z 2012-06-15T15:34:44Z "Many users of CKAN want to have their own instance without much effort. Setting these up in separate places is a maintenance nightmare, we should much rather have some tenant separation in core CKAN. Some ideas: * introduce model.Site and * site has: custom CSS, extra_template_path, title, languages list, package_form, group_form (all configured via web UI) * Subdomain detector to activate sites. * use site in Authorizer instead of System, have a NullSite for global things * allow cross-site search * packages are in a list of sites, m:n rather than 1:n * list of sites is string-based, can contain sites not in site table to express harvested external material which is not editable locally. " pudo 1182 "Comments from deleted packages appear in ""Recent Comments"" feed" ckan defect new 2011-06-09T22:24:11Z 2012-06-15T15:31:59Z "When a package has been deleted, say for spam moderation, comments still appear in the recent comments section. This is a problem because non-admin users will be shown a warning that they're not authorised to view the package if they click on the link. At currently, this affects the most recent comment." timmcnamara 1185 Administrators can't delete packages from web UI ckan defect new 2011-06-15T04:23:38Z 2012-06-15T15:31:29Z "Administrators have ""View"", ""Edit"" and ""History"" tabs. However, I can't see a way to delete a package from the web UI. Version: as of today" timmcnamara 1203 "Moderated edits: html code shows as ""changed"" although it is not" ckan defect johnglover new 2011-06-28T15:29:30Z 2011-08-15T09:46:19Z "I've installed the Moderated Edits extension (ckanext-moderatededits) and am editing a package imported from, with an extra field which contains a bit of HTML. The editor indicates the field has changed, although the content hasn't (see screenshot). All I can find so far is a minor difference: in the field content, there is a code — and in the rendered table that is an &mdash" rolf 1355 Package extras property does not include the newly created ones ckan defect new 2011-09-26T10:48:46Z 2012-06-15T15:27:36Z "The extras in the package object sent to the extensions after editing ( do not include the newly added. " amercader 1457 Bug with DataNL instance ckan defect new 2011-11-10T11:37:21Z 2011-11-10T11:37:21Z " ""when logging into with OpenID, the /user/me page gives a 404. CKAN version 1.3.4."" n the manual it says an API key kan be created via /. However, when I try the corresponding, I get a 404 error (not found). " jilly.mathews 1642 Extra link generators generate garbled HTML ckan defect new 2012-01-12T15:29:31Z 2012-06-15T15:26:07Z "I had a package descriptions with URLs that contain ""group:foo"". This produces garbled output as the system tries to generate two sets of links: the outer link and an inner link. Need to fix the parser. Text: Webdienst basierende Bereitstellung von Geobasisdaten der Freien und Hansestadt Hamburg. Folgende Geobasisdaten werden als WebMapTileService (WMT-S) für die Dauer des Wettbewerbs netzbasiert unter der Creative Commons Lizenz zur Verfügung gestellt: Digitale Orthophotos 40 cm Auflösung (Layer: apps4d_DOP40), Digitale Stadtkarte (Layer: apps4d_DISK), Digitale Regionalkarte (Layer: apps4d_DIRK), Digitale Karte 1:5000 (Layer: apps4d_DK5). Metadateneinträge zu den Daten im PortalU: * [apps4d_DOP40]( * [apps4d_DISK]( * [apps4d_DIRK]( * [apps4d_DK5]( One fix is quoting the URLs" pudo 1668 repoze version discrepency ckan defect new 2012-01-17T12:02:26Z 2012-01-17T12:02:26Z "There's a discrepency in repoze.who versions between the source and package installs: * repoze.who - package 1.0.18 vs source 1.0.19 * repoze.who-friendlyform - package 1.0b3 vs source 1.0.8 We get a test failure [1] with the 1.0b3 version (from the ubuntu 10.04 python-repoze.who-plugins package). But we've not noticed any problems on s057 instances (br, no, ie etc) which have the package versions of repoze.who. The reason the package install uses the earlier packaged versions rather than the ones we'd like is that repoze uses all sorts of horrendous import hacks, making it too difficult to put into our 'ckan-conflict' source package. James suggests we 'do something horrible like dynamically patch repoze on CKAN import'. [1] ERROR: ckan.tests.functional.test_user.TestUserController.test_user_create_unicode" dread 2197 Storage Metadata API: add/update not working with local file storage (Pairtree) ckan defect assigned 2012-02-28T09:29:37Z 2012-09-03T08:48:48Z "If OFS is configured with Pairtree to use a local file storage, all POST requests to add/update metadata ( /api/storage/metadata/

Bureau of Statistics

Geography Social indicators Population indicators Poverty & income Health Population Size of the resident population. Country My list of countries

Watch the video: Image Overlay Tutorial for Google Earth