Rectangle 27 6

And capture only this (do ajax call with this):

Why not test this simplification? As I tested your code, without success on detecting keyup in 'input propertychange' event.

//$("textarea").keyup(function(){
//// ajax call here
//});
$("textarea").on('input propertychange', function() {
  //$(this).trigger(keyup);
  // do ajax call here
});

the latter ignores only some control keys, ie, key without corresponding character input.

I found that use 'input propertychange' in iOS11 and when I delete up to 5 characters, it will show some space between cursor and the last letter.

javascript - How to use "input propertychange" events to capture just ...

javascript textarea jquery
Rectangle 27 7

Below is for AJAX calls, not image or video canvas resources

Sorry, I haven't dealt with CORS images before and thought this question was about an AJAX request.

According to Mozilla Developer Network you need to set image.crossOrigin to anonymous or use-credentials. Also, according to that page today, these attributes are not supported in IE, Safari, or Opera. This test was made to demonstrate that IE9 did not support it and it seems that same test still fails in IE10, so even if Safari and Opera have added support since the MDN article was written, it is quite possible that IE10 still lacks support.

The only tip I can give you is that in general, allow-credentials is incompatible with a wildcard allow-origin. Either drop the allow-credentials or echo the request Origin in the allow-origin.

Early versions of IE10 were known to have AJAX bugs,

so it could be another browser bug. Then again, CORS is deceptively tricky to get right. I recommend the following steps to debug CORS problems.

  • Point the browser at http://test-cors.appspot.com/#technical to get a compatibility report. If anything fails then you have a bug or lack of support for CORS in the browser.
  • If everything passes, use the CORS headers the test is sending as a starting point to get your CORS request working. Then change one header at a time and retest until you get the headers the way you want for your application or you run into a failure you cannot explain or work around.
  • If necessary, post a question about that one tiny change that breaks the CORS request, posting both the working "before" and the failing "after". It always helps if you can include a runnable example.

The complete code for the CORS test client and server (Python script for Google App Engine) is available at https://github.com/rapportive-oss/cors-test to get you started.

Thanks - unfortunately still no luck. 1 reports all ok, however I have all of the headers specified in each of the responses from the test, and I still get the security error. I'm not convinced that this test is really testing 'everything' though - e.g. 1) None of the response headers use the wildcard access-control-allow-origin setting 2) It's not testing drawImage or getImageData at all, and 3) It's not testing the image.crossOrigin = "Anonymous" feature.

BTW - I've found a JSFiddle that shows the problem perfectly (jsfiddle.net/WLTqG/29) - see my updated question for the background.

Thanks for the extra tips. Re the incompatibility - it was my understanding that access-control-allow-credentials was necessary to use 'image.crossOrigin', so we probably wont be able to drop that. As you say, dynamic allow-origin headers may be an option, but TBH I haven't seen any problems using both of these.

access-control-allow-credentials is not needed if you set image.crossOrigin to anonymous. It is only needed when it is set to use-credentials. With AJAX calls I have seen the allow-origin wildcard rejected consistently when use-credentials is set, which is why the CORS AJAX tester does not use wildcard origins. I guess we're seeing the rules are somewhat different for Canvas tainting, but if you do not need credentials to access the image then you can remove the allow-credentials header and rule out that as a possible source of the problem.

Thanks for the clarification. I've now removed the access-control-allow-credentials. (Wasn't causing the IE problem though unfortunately)

javascript - IE10 and Cross-origin resource sharing (CORS) issues with...

javascript html5 internet-explorer cors
Rectangle 27 7

Below is for AJAX calls, not image or video canvas resources

Sorry, I haven't dealt with CORS images before and thought this question was about an AJAX request.

According to Mozilla Developer Network you need to set image.crossOrigin to anonymous or use-credentials. Also, according to that page today, these attributes are not supported in IE, Safari, or Opera. This test was made to demonstrate that IE9 did not support it and it seems that same test still fails in IE10, so even if Safari and Opera have added support since the MDN article was written, it is quite possible that IE10 still lacks support.

The only tip I can give you is that in general, allow-credentials is incompatible with a wildcard allow-origin. Either drop the allow-credentials or echo the request Origin in the allow-origin.

Early versions of IE10 were known to have AJAX bugs,

so it could be another browser bug. Then again, CORS is deceptively tricky to get right. I recommend the following steps to debug CORS problems.

  • Point the browser at http://test-cors.appspot.com/#technical to get a compatibility report. If anything fails then you have a bug or lack of support for CORS in the browser.
  • If everything passes, use the CORS headers the test is sending as a starting point to get your CORS request working. Then change one header at a time and retest until you get the headers the way you want for your application or you run into a failure you cannot explain or work around.
  • If necessary, post a question about that one tiny change that breaks the CORS request, posting both the working "before" and the failing "after". It always helps if you can include a runnable example.

The complete code for the CORS test client and server (Python script for Google App Engine) is available at https://github.com/rapportive-oss/cors-test to get you started.

Thanks - unfortunately still no luck. 1 reports all ok, however I have all of the headers specified in each of the responses from the test, and I still get the security error. I'm not convinced that this test is really testing 'everything' though - e.g. 1) None of the response headers use the wildcard access-control-allow-origin setting 2) It's not testing drawImage or getImageData at all, and 3) It's not testing the image.crossOrigin = "Anonymous" feature.

BTW - I've found a JSFiddle that shows the problem perfectly (jsfiddle.net/WLTqG/29) - see my updated question for the background.

Thanks for the extra tips. Re the incompatibility - it was my understanding that access-control-allow-credentials was necessary to use 'image.crossOrigin', so we probably wont be able to drop that. As you say, dynamic allow-origin headers may be an option, but TBH I haven't seen any problems using both of these.

access-control-allow-credentials is not needed if you set image.crossOrigin to anonymous. It is only needed when it is set to use-credentials. With AJAX calls I have seen the allow-origin wildcard rejected consistently when use-credentials is set, which is why the CORS AJAX tester does not use wildcard origins. I guess we're seeing the rules are somewhat different for Canvas tainting, but if you do not need credentials to access the image then you can remove the allow-credentials header and rule out that as a possible source of the problem.

Thanks for the clarification. I've now removed the access-control-allow-credentials. (Wasn't causing the IE problem though unfortunately)

javascript - IE10 and Cross-origin resource sharing (CORS) issues with...

javascript html5 internet-explorer cors
Rectangle 27 259

To ensure that JQuery isn't caching the results, on your ajax methods, put the following:

$.ajax({
    cache: false
    //rest of your ajax setup
});

Or to prevent caching in MVC, we created our own attribute, you could do the same. Here's our code:

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public sealed class NoCacheAttribute : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
        filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();

        base.OnResultExecuting(filterContext);
    }
}

Then just decorate your controller with [NoCache]. OR to do it for all you could just put the attribute on the class of the base class that you inherit your controllers from (if you have one) like we have here:

[NoCache]
public class ControllerBase : Controller, IControllerBase

You can also decorate some of the actions with this attribute if you need them to be non-cacheable, instead of decorating the whole controller.

If your class or action didn't have NoCache when it was rendered in your browser and you want to check it's working, remember that after compiling the changes you need to do a "hard refresh" (Ctrl+F5) in your browser. Until you do so, your browser will keep the old cached version, and won't refresh it with a "normal refresh" (F5).

I tried everything in the above solution and it does not work for me.

and a +1 to the editor @JotaBe of this answer.

It's my understanding (and I'm no jQuery expert) that cache:false only makes jQuery tack on to the query string a changing value to "trick" the browser into thinking the request is for something else. In theory, this means the browser would still cache the results, just wouldn't use the cached results. Should be more efficient on the client to disable caching via response headers.

Worked only on controller level and not on action level.

Thank you for your answer. I just ran into this issue with IE and MVC 5, using Angular 1.2.16. Chrome didn't have this issue at all, but the overall fix is to create your attribute. Works great now.

I would upvote including such an attribute in the official ASP.NET package :-)

@Frdric, the section of the spec you point to says that caches cannot cache no-store content: The "no-store" response directive indicates that a cache MUST NOT store any part of either the immediate request or response.

c# - Prevent Caching in ASP.NET MVC for specific actions using an attr...

c# jquery .net asp.net-mvc asp.net-mvc-3
Rectangle 27 256

To ensure that JQuery isn't caching the results, on your ajax methods, put the following:

$.ajax({
    cache: false
    //rest of your ajax setup
});

Or to prevent caching in MVC, we created our own attribute, you could do the same. Here's our code:

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public sealed class NoCacheAttribute : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
        filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();

        base.OnResultExecuting(filterContext);
    }
}

Then just decorate your controller with [NoCache]. OR to do it for all you could just put the attribute on the class of the base class that you inherit your controllers from (if you have one) like we have here:

[NoCache]
public class ControllerBase : Controller, IControllerBase

You can also decorate some of the actions with this attribute if you need them to be non-cacheable, instead of decorating the whole controller.

If your class or action didn't have NoCache when it was rendered in your browser and you want to check it's working, remember that after compiling the changes you need to do a "hard refresh" (Ctrl+F5) in your browser. Until you do so, your browser will keep the old cached version, and won't refresh it with a "normal refresh" (F5).

I tried everything in the above solution and it does not work for me.

It's my understanding (and I'm no jQuery expert) that cache:false only makes jQuery tack on to the query string a changing value to "trick" the browser into thinking the request is for something else. In theory, this means the browser would still cache the results, just wouldn't use the cached results. Should be more efficient on the client to disable caching via response headers.

Worked only on controller level and not on action level.

I would upvote including such an attribute in the official ASP.NET package :-)

@Frdric, the section of the spec you point to says that caches cannot cache no-store content: The "no-store" response directive indicates that a cache MUST NOT store any part of either the immediate request or response.

c# - Prevent Caching in ASP.NET MVC for specific actions using an attr...

c# jquery .net asp.net-mvc asp.net-mvc-3
Rectangle 27 256

To ensure that JQuery isn't caching the results, on your ajax methods, put the following:

$.ajax({
    cache: false
    //rest of your ajax setup
});

Or to prevent caching in MVC, we created our own attribute, you could do the same. Here's our code:

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public sealed class NoCacheAttribute : ActionFilterAttribute
{
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
        filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
        filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        filterContext.HttpContext.Response.Cache.SetNoStore();

        base.OnResultExecuting(filterContext);
    }
}

Then just decorate your controller with [NoCache]. OR to do it for all you could just put the attribute on the class of the base class that you inherit your controllers from (if you have one) like we have here:

[NoCache]
public class ControllerBase : Controller, IControllerBase

You can also decorate some of the actions with this attribute if you need them to be non-cacheable, instead of decorating the whole controller.

If your class or action didn't have NoCache when it was rendered in your browser and you want to check it's working, remember that after compiling the changes you need to do a "hard refresh" (Ctrl+F5) in your browser. Until you do so, your browser will keep the old cached version, and won't refresh it with a "normal refresh" (F5).

I tried everything in the above solution and it does not work for me.

It's my understanding (and I'm no jQuery expert) that cache:false only makes jQuery tack on to the query string a changing value to "trick" the browser into thinking the request is for something else. In theory, this means the browser would still cache the results, just wouldn't use the cached results. Should be more efficient on the client to disable caching via response headers.

Worked only on controller level and not on action level.

I would upvote including such an attribute in the official ASP.NET package :-)

@Frdric, the section of the spec you point to says that caches cannot cache no-store content: The "no-store" response directive indicates that a cache MUST NOT store any part of either the immediate request or response.

c# - Prevent Caching in ASP.NET MVC for specific actions using an attr...

c# jquery .net asp.net-mvc asp.net-mvc-3
Rectangle 27 234

Every time you create an ajax request you could use a variable to store it:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

Then you can abort the request:

request.abort();

You could use an array keeping track of all pending ajax requests and abort them if necessary.

THXs, I added a FLAG because I used multiple request at the same time

i have ajax call in function how can I abort it ?

Stop all active ajax requests in jQuery - Stack Overflow

jquery ajax
Rectangle 27 234

Every time you create an ajax request you could use a variable to store it:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

Then you can abort the request:

request.abort();

You could use an array keeping track of all pending ajax requests and abort them if necessary.

THXs, I added a FLAG because I used multiple request at the same time

i have ajax call in function how can I abort it ?

Stop all active ajax requests in jQuery - Stack Overflow

jquery ajax
Rectangle 27 36

Why are Ajax HTTP Requests not allowed to cross domain boundaries.

Because AJAX requests are (a) submitted with user credentials, and (b) allow the caller to read the returned data.

It is a combination of these factors that can result in a vulnerability. There are proposals to add a form of cross-domain AJAX that omits user credentials.

you could simply add an img, script, or iframe element to the document

None of those methods allow the caller to read the returned data.

(Except scripts where either it's deliberately set up to allow that, for permitted cross-domain scripting - or where someone's made a terrible cock-up.)

Your can do XSS attacks without using this at all. Posting to third party site

That's not an XSS attack. That's a cross-site request forgery attack (XSRF). There are known ways to solve XSRF attacks, such as including one-time or cryptographic tokens to verify that the submission came deliberately from the user and was not launched from attacker code.

If you allowed cross-domain AJAX you would lose this safeguard. The attacking code could request a page from the banking site, read any authorisation tokens on it, and submit them in a second AJAX request to perform the transfer. And that would be a cross-site scripting attack.

this is a great answer, but in the last paragraph i still dont think thats a xss attack. an xss attack is where you inject javascript onto the legitimate sites website.

SQL injection is certainly the most common method to get an XSS, but not the only one. The effects of being able to AJAX cross-domain would be just the same as would result from an SQL injection.

sql injection is not the most common method to get an xss, it's unencoded user submited text sent from the server

Why the cross-domain Ajax is a security concern? - Stack Overflow

ajax security xss
Rectangle 27 38

Then in your ajax call change the success function to this:

$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');

Yes i just found out ! That works great , thanks. But now If you want to call your script in the browser, it wont works unless you made a trick in your code with get params...for param('mode')=1 you encode, and if param('mode') is not defined you print simply your image/png header...anyway. Now it's works it's great . I found this way too,jquery topic loading image ajax but my point is that's ugly. Your method is much better . thanks.

what if i want the image in jpeg format?

data:image/jpeg;base64
data:image/png;base64

Display PNG image as response to jQuery AJAX request - Stack Overflow

jquery ajax image header request
Rectangle 27 37

Then in your ajax call change the success function to this:

$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');

Yes i just found out ! That works great , thanks. But now If you want to call your script in the browser, it wont works unless you made a trick in your code with get params...for param('mode')=1 you encode, and if param('mode') is not defined you print simply your image/png header...anyway. Now it's works it's great . I found this way too,jquery topic loading image ajax but my point is that's ugly. Your method is much better . thanks.

what if i want the image in jpeg format?

data:image/jpeg;base64
data:image/png;base64

Display PNG image as response to jQuery AJAX request - Stack Overflow

jquery ajax image header request
Rectangle 27 36

Then in your ajax call change the success function to this:

$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');

Yes i just found out ! That works great , thanks. But now If you want to call your script in the browser, it wont works unless you made a trick in your code with get params...for param('mode')=1 you encode, and if param('mode') is not defined you print simply your image/png header...anyway. Now it's works it's great . I found this way too,jquery topic loading image ajax but my point is that's ugly. Your method is much better . thanks.

what if i want the image in jpeg format?

data:image/jpeg;base64
data:image/png;base64

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

Display PNG image as response to jQuery AJAX request - Stack Overflow

jquery ajax image header request
Rectangle 27 27

You need to change your datatype in the ajax call.

dataType: "json",
dataType: "html",

Datatype tells that type is json, but you send back the partial view which is html. So it tries to parse it as json data and throws the error.

datatype - type of data you expect back from the server.

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are:

I had to change it to text instead of text/html. It was throwing an error of no conversion from text to text/html. Thanks!

html

parserrror SyntaxError: Unexpected token < - Load Partial View using j...

jquery ajax asp.net-mvc json asp.net-mvc-4
Rectangle 27 4

in your ajax request, adding:

dataType: "jsonp",
type: 'GET',

This is not a guaranteed fix, and will only work if the receiving domain is configured to respond in JSONP format. If the domain does not have CORS enabled, it's highly unlikely that JSONP will work. Also note that JSON and JSONP are not interchangable.

I have this issue with wikipedia and it's the only fix that work!!!

jquery - CORS header 'Access-Control-Allow-Origin' missing - Stack Ove...

jquery ajax json cors jsonp
Rectangle 27 4

in your ajax request, adding:

dataType: "jsonp",
type: 'GET',

This is not a guaranteed fix, and will only work if the receiving domain is configured to respond in JSONP format. If the domain does not have CORS enabled, it's highly unlikely that JSONP will work. Also note that JSON and JSONP are not interchangable.

I have this issue with wikipedia and it's the only fix that work!!!

jquery - CORS header 'Access-Control-Allow-Origin' missing - Stack Ove...

jquery ajax json cors jsonp
Rectangle 27 50

var delayTimer;
function doSearch(text) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
        // Do the ajax stuff
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
}

javascript - AJAX: Delay for search on typing in form field - Stack Ov...

javascript ajax forms input
Rectangle 27 49

var delayTimer;
function doSearch(text) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
        // Do the ajax stuff
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
}

javascript - AJAX: Delay for search on typing in form field - Stack Ov...

javascript ajax forms input
Rectangle 27 371

It depends on whether you are submitting the form normally or via an AJAX call. You can find lots of information at jquery.com, including documentation with examples. For submitting a form normally, check out the submit() method to at that site. For AJAX, there are many different possibilities, though you probably want to use either the ajax() or post() methods. Note that post() is really just a convenient way to call the ajax() method with a simplified, and limited, interface.

A critical resource, one I use every day, that you should bookmark is How jQuery Works. It has tutorials on using jQuery and the left-hand navigation gives access to all of the documentation.

$('form#myForm').submit();
$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   ... do something with the data...
                 }
    });
});

Note that the ajax() and post() methods above are equivalent. There are additional parameters you can add to the ajax() request to handle errors, etc.

I was missing the serialize method. Obviously, I looked at jQuery.com, but their docs on $.post explicitly deconstruct and reconstruct the form to generate data to submit. Thanks!

if I have some data ready I want to add to the post request (not ajax, form submit post request) before submitting, how do I do that?

@AlexanderSupertramp - in the example above the data is being sent as url-encoded form parameters. You could simply append the data as additional form parameters. $('form#MyForm').serialize() + '&newData=' + newData + '&moreData=' + moreData. Note: the latter two may need to be url encoded using encodeURIComponent(). OR - you could change to use JSON encoding on both ends but then you'd need to put the form data into a JavaScript data structure with your extra data and serialize it. In that case you'd probably use serializeArray on the form and merge your other data in.

"I expect a json response" solved a different issue for me (re: calls to Flask failing).

Submit a form using jQuery - Stack Overflow

jquery
Rectangle 27 18

With the oncomplete attribute and the ajax update attribute.

<p:commandLink action="#{service.computePrefetch(_var)}" update="dlgId" oncomplete="dlg.show()"/>

tyvm! that makes it very clear

its not working in my case here is my code <h:commandLink title="File" action="#{service.fetchDetail(row.sNo)}" update="DlgId" oncomplete="PF('Dlg').show()" />

jsf - Execute p:commandLink action before onclick event? - Stack Overf...

jsf primefaces
Rectangle 27 18

With the oncomplete attribute and the ajax update attribute.

<p:commandLink action="#{service.computePrefetch(_var)}" update="dlgId" oncomplete="dlg.show()"/>

tyvm! that makes it very clear

its not working in my case here is my code <h:commandLink title="File" action="#{service.fetchDetail(row.sNo)}" update="DlgId" oncomplete="PF('Dlg').show()" />

jsf - Execute p:commandLink action before onclick event? - Stack Overf...

jsf primefaces