JavaScript | DXSdata

[:de]jQuery val() bleibt leer[:en]jQuery val() stays empty[:]

admin — Tue, 21 Feb 2017 20:51:01 +0000

[:en]If you use jQuery to fetch the current value of a field like

var myvar = $('#myfield').val();

you might encounter issues, even if this syntax is correct. E.g. if a number is entered, it works. If a special char is entered, you might get an empty string.

Solution

A possible cause could be the HTML input tag attributes.

This one works not for special characters or letters:

Using a number type, letters stay in the field (optically), but do not seem to be saved as the value indeed, and jQuery seems to consider that.

Use special input types only if you really need them. In the example above, a value like 1234 works, but not ” 1234″ (with a space) or “=1234” or “1+2” etc.

The following should always work:

If you still encounter issues, you might have indeed no value in the input field. Try .html() or .text() for testing purposes.[:]

[:de]Bootstrap Navigations-Tabs mit Dropdown-Menüs: Weiter-Button implementieren[:en]Bootstrap navigation tabs with dropdown menus: How to implement Next button[:]

admin — Tue, 27 Sep 2016 10:12:48 +0000

[:en]There are many projects on Github which implement wizard-like Next and Previous buttons for Bootstrap tabbed menus. Unfortunately, they seem not to consider there can be dropdown menus inside the tabs, which leads to errors.

So here is some code to show one way how to implement the Next button.

Assuming you have some tabs like those:


	
	
	    Main 1
	    
	
	
	    Sub 1
	    Sub 2
	    Sub 3
	
	
	...

Use this JS / JQuery code:

$('#next-tab').click(function (e) {
    
    var activetab = $('.nav-tabs > .active');   
    children = activetab.find('li');
    var activeHref;

    if (children.length > 0) { //dropdown menu
        var activeSubtab = activetab.find('.active');
        activeHref = activeSubtab.find('a')[0].hash;
    }
    else { //common tab
        activeHref = activetab.find('a')[0].hash;
    }

    var tabIndex = activeHref.replace("#tab", "");

    tabIndex++;
    var nextTabname = "tab" + tabIndex;

    var activeHref = $('a[href$="' + nextTabname + '"]').trigger('click');
  
    e.preventDefault();
});

[:]

JQuery funktioniert nicht nach Wechsel von HTTP auf HTTPSJQuery not working after changing from HTTP to HTTPS

admin — Mon, 08 Jun 2015 08:37:06 +0000

Scenario

You might use a local web server for testing your websites and scripts. Usually, there is no need to use SSL.

After deploying to your HTTPS production environment, some features like JQuery AutoComplete etc. might not work any more, but they do work if you call them via common HTTP.

Have a look at the Firefox F12 Debug Console, there could be also messages that some content was blocked on page load.

Reason

Many JavaScript/CSS libraries like JQuery or Bootstrap offer a current version of their files for direct integration into your code. This is quite comfortable, because you do not have to manage them locally. But if you refer e.g. to HTTP://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css in your code and your site is an SSL site, the browser does not load it, because it could be unsafe.

Solution

You replace the http:// string with https:// in your code.

Better method, which I recommend: Delete the string “http:”. Example:

//code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css

Of course, the site provided has to be accessible via HTTP and HTTPS.

JavaScript / JQuery: Fehler “Das Objekt unterstützt die Eigenschaft oder Methode addEventListener nicht”JavaScript / JQuery: Error “addeventlistener object doesn’t support this property or method”

admin — Thu, 19 Feb 2015 15:15:36 +0000

This error might appear if you have developed a website in your local testing environment which uses JS utilities like Bootstrap, JQuery, Prototype or Scriptaculous, after you have published it e.g. to your local company intranet.

Cause

JQuery and similar utils don’t seem to like IE compatibility mode, which is enabled by default. Additionally, there might be some content missing.

Solution

In most cases the following line solves the problem. Insert it between your tags.

What you also can do is to disable compatibility mode for intranet sites in Internet Explorer. Open Settings -> Compatibility View settings -> uncheck the “intranet” checkbox.