Javascript disable all readonly Dropdowns and send via Form

Readonly select-Tags are not allowed in HTML until now, but can be used.

An alternative would be to use the disabled = true attribute, but this will not send the select value on form submission.

An easy solution would be to disable the selection with Javascript and leave it readonly:

$( document ).ready(function() {
    $('select[readonly="readonly"]').css('pointer-events','none');
});

The only problem is, that you can still tab throw the form and select elements with your keyboard but the mouse can not select element from the dropdown.

Cross domain Ajax requests

From home, cross domain Ajax requests are not allowed for safety reasons, because as foreign malicious code when the client can be downloaded and executed.

Anyway to send a successful AJAX request to a different domain or subdomain or even from HTTP to HTTPS, do you need the access-control-allow-origin.

You must use not jsonp, How many propose, but can use regular json (the AJAX request is sent from www.mydomain1.de):

<script>
    $.ajax({
        url: "http://www.mydomain2.de/ajax.php",
        type: 'GET',
        crossDomain: true,
        dataType: 'json',
        success: function(data) {
            console.log( data );
            $( ".result" ).html( data );
        },
        error: function( data) {
            console.log("error ajax");
            console.log( data );
        }
    });
</script>
<div class='result'></div>

Only the following code must be included on the own mydomain2.de/ajax.php page, to bypass the access-control-allow-origin:

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://www.mydomain1.de');

echo json:encode("it works");
die();

JavaScript replace all css background images with retinal images

If you are faced with the problem, that dynamically generated CSS background images used, to images on a Web page to represent and this then also for retina display you want to look good, can I use the following script. It additionally checked via an AJAX request, If the images exist / exist.

A prerequisite is, that a naming convention for non-retina used images and retina is such as:

for non-retinal images

and

for retinal images

<!--Retina Fix for dynamic background images-->
        <script type="text/javascript">
            function isRetinaDisplay()
            {
                var dpr = 1;
                if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
                return dpr >= 2;
            }

            var notRetinaString = "@1x";
            var retinaString = "@2x";

            $(document).ready(function() {
                //if we have a retina display
                if(isRetinaDisplay())
                {
                    //select all elements having background images
                    var $elementsWithBackground = $('*').filter(function() {
                        if (this.currentStyle)
                            return this.currentStyle['backgroundImage'] !== 'none';
                        else if (window.getComputedStyle)
                            return document.defaultView.getComputedStyle(this,null)
                                .getPropertyValue('background-image') !== 'none';
                    });
                    //replace their background-image with retina images
                    $elementsWithBackground.each(function( index ) {
                        $backGroundImage = $(this).css('backgroundImage');
                        /*console.log($backGroundImage);*/
                        //when it is no retina image
                        if($backGroundImage.indexOf(notRetinaString) !== -1)
                        {
                            //replace with retina image
                            $newBackgroundRetinaImage = $backGroundImage.replace(notRetinaString,retinaString);
                            $newBackgroundRetinaImageUrl = $newBackgroundRetinaImage.replace('url("','').replace('")','');
                            //check if retina file exists
                            var $myThis = this;
                            $.ajax({
                                url:$newBackgroundRetinaImageUrl,
                                type:'HEAD',
                                cache: true,
                                success:function() {
                                    console.log($newBackgroundRetinaImage);
                                    $($myThis).css('backgroundImage', $newBackgroundRetinaImage);
                                },
                                error:function() {
                                    console.log("no retina image found for: " + $backGroundImage);
                                }
                            });

                        }
                    });
                }
            });
        </script>

jQuery Ajax call asynchronous callback success function

Programming asynchronous functions with AJAX facing the problem, that the function have no return value in the traditional sense. The the following function returns not the variable response back, Although the AJAX request was successful due to the asynchrony.

function test()
 {
 $.ajax({
 async: true,
 cache:false,
 url: "testUrl.php",
 beforeSend: function (jqXHR, settings) {
 url = settings.url;
 console.log(url);
 },
 success: function (response) {
 console.log("Ajax Call Success");
 },
 error: function (response) {
 handleError(response);
 }
 }
 );
 return response;
 }

A the result of an asynchronous call (AJAX) to be able to be processed, can you either call a function (bad, Because fixed binding): more…

jQuery animate ruckelt im Chrome

The following code jerky in Chrome:

        $('#foo')
            .animate({
            'marginLeft' : '100px'
        }, 900) ;

The solution was quite simple:

        $('#foo').css({WebkitTransform: 'translateX(0px)'})
            .animate({
            'marginLeft' : '100px'
        }, 900) ;

Beautiful problemen: jQuery update to the latest version (1.8.2.)

Javascript Page Cookie setzen

To set a cookie with Javascript, the only valid on the current page is For example,. foo.de/mySite3.php have to set the appropriate path, you can read out with Javascript following measured. I use to set cookies, the Lib jQuery Cookies. The path must be in the format “/mySite3.php” be set, to this, the front part of the URL to cut after the domain.

    function setCurrentPageCookie(expiresHours) {
        var domain = document.domain;
        var path = document.URL;
        console.log(domain);
        console.log(path);
        var relativePath = path.substring(path.indexOf(domain) + domain.length);
        console.log(relativePath);
        $.cookies.set('cookieName', '1', {
            path: relativePath,
            hoursToLive : expiresHours
        });
    }

jQuery UI Autocomplete with extraParams for additional GET variables

In jQuery UI, there is a very good AutoComplete function, I on the side CD Shop Berlin have installed (Quick Find top left). Here you type will submit proposals.

$(document).ready(function() {
 $("input#suche").autocomplete(
 {
 autoFocus: false,
 delay:300,
 minLength: 3,
 select: function(event, ui) {document.advanced_search.submit();},
 source: function(request, response) {
 $.ajax({
 url: "autocomplete.php",
 dataType: "json",
 data: {
 term : $('#schnellsuche').val(),
 verkauf : $('input[name=verkauf]').is(':checked'), },
 success: function(data) {
 response(data);
 }
 });
 }
 }
 );
});

It should be noted, dass der Parameter extraParams von jQuery UI 1.8 is currently ignored and you have to solve this using the built-Ajax request.

Server-side stand then the variable with $ _GET['term'], $_GET['Sale']available.

 

move of absolutely positioned elements with jQuery

For example, if you all of the elements. will move from generated HTML, offers itself jQuery.

I received the following HTML from PDF to HTML conversion program:

<div style="position:absolute;top:97;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:121;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:145;left:333"><nobr><span class="ft1"> </span></nobr></div>
<div style="position:absolute;top:170;left:293"><nobr><span class="ft2">Text </span></nobr></div>

To change the inline styles and move the div to 100px blocks to the right and down the following code can be used:

        $(document).ready(function() {
            $('div').each(function() {
                var offset = $(this).offset();
                alert("left: " + offset.left + ", top: " + offset.top );
                $(this).css('left', offset.left + 100);
                $(this).css('top', offset.top + 100);
            });
        });