JavaScript

Hello,
 
When an item is selected it's automatically stretches the textbox with an extra line instead of stay on the same height, when the size is fixed specified, see example: http://jsfiddle.net/g332c2ru/9/
 
is this a issue? because when an item is selected and it's to long we don't want a new line is created. I tried with css to create an solution but nothing worked.
 
greetings,
 
Sander

function CloseGrid() {
                    $('.cross').click(function() {
                       var id = $(this).attr('id').replace('cross', '');
                                                alert(id);
                                          if (confirm("Voulez-vous définitivement supprimer ce graphique?")) {
                                                   gridster.remove_widget($('#li' + id), false);
                                                    DeleteChart(id);
 }
                                              else {
                                                    return false;
 
                                                }
 
                    });
 
                }

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 
  <appSettings />
  <connectionStrings />
  <system.web>
    <compilation debug="true" />
    <authentication mode="Windows" />
    <customErrors mode="Off" />
    <webServices>
      <protocols>
        <add name="HttpSoap" />
        <add name="HttpGet" />
        <add name="HttpPost" />
      </protocols>
    </webServices>
	<httpRuntime maxUrlLength="9999" relaxedUrlToFileSystemMapping="true" maxQueryStringLength="2097151" requestValidationMode="2.0"/>
    <pages validateRequest="false" />
  </system.web>
  <system.webServer>
    <defaultDocument>
      <files>
        <remove value="default.aspx" />
        <remove value="Default.asp" />
        <remove value="index.html" />
        <remove value="iisstart.htm" />
        <remove value="index.htm" />
        <remove value="Default.htm" />
        <add value="webservice.asmx" />
      </files>
    </defaultDocument>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="http://domain.nl" />
                <add name="Access-Control-Allow-Credentials" value="true" />
                <add name="Access-Control-Allow-Headers" value="SOAPAction, Content-Type,Authorization" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
            </customHeaders>
        </httpProtocol>
	  <security>
		  <requestFiltering>
			  <requestLimits maxUrl="10999" maxQueryString="9999" />
		  </requestFiltering>
	  </security>
  </system.webServer>
</configuration>

SOAPClientParameters = (function () {
    function SOAPClientParameters() {
        var self = this;
 
        self.list = new Array();
    }
 
    SOAPClientParameters.prototype.add = function (name, value) {
        var self = this;
 
        self.list[name] = value;
        return self;
    };
 
    SOAPClientParameters.prototype._serialize = function (o) {
        var s = "";
        switch (typeof (o)) {
            case "string":
                s += o; //real code is a little different but includes &gt
            case "number":
            case "boolean":
                s += o.toString(); break;
            case "object":
                // Date
                if (testNull(o)) { s += ""; }
                else if (typeof o === 'Date') {
                    dateToSqlString(o); // custom external function to create date to string suitable for MSSQL
                }
                else if (typeof o === 'Array') {
                    for (var p in o) {
                        if (!isNaN(p))   // linear array
                        {
                            (/function\s+(\w*)\s*\(/ig).exec(o[p].constructor.toString());
                            var type = RegExp.$1;
                            switch (type) {
                                case "":
                                    type = typeof (o[p]);
                                case "String":
                                    type = "string"; break;
                                case "Number":
                                    type = "int"; break;
                                case "Boolean":
                                    type = "bool"; break;
                                case "Date":
                                    type = "DateTime"; break;
                            }
                            s += "<" + type + ">" + SOAPClientParameters._serialize(o[p]) + "</" + type + ">"
                        }
                        else    // associative array
                            s += "<" + p + ">" + SOAPClientParameters._serialize(o[p]) + "</" + p + ">"
                    }
                }
                else
                    for (var p in o)
                        s += "<" + p + ">" + SOAPClientParameters._serialize(o[p]) + "</" + p + ">";
                break;
            default:
                throw new Error(500, "SOAPClientParameters: type '" + typeof (o) + "' is not supported");
        }
        return s;
    }
 
    SOAPClientParameters.prototype.toXml = function () {
        var self = this;
 
        var xml = "";
        for (var p in self.list) {
            if (typeof self.list[p] !== 'function') {
                xml += "<" + p + ">" + self._serialize(self.list[p]) + "</" + p + ">";
            }
        }
        return xml;
    }
 
    return SOAPClientParameters;
}());
 

SOAPClient = (function () {
    function SOAPClient(url, async) {
        var self = this;
 
        self.xmlHttp = null;
 
        if (window.XMLHttpRequest) {
            self.xmlHttp = new XMLHttpRequest();
            // patch for Moz (some versions)
            if (self.xmlHttp.readyState == null) {
                self.xmlHttp.readyState = 1;
                self.xmlHttp.addEventListener("load",
                                    function () {
                                        self.xmlHttp.readyState = 4;
                                        if (typeof self.xmlHttp.onreadystatechange == "function")
                                            self.xmlHttp.onreadystatechange();
                                    },
                                    false);
            }
            //req.withCredentials = true; // tried this, but didn't work
        } else {
            throw 'This browser is not supported!';
        }
 
        self.xmlHttp.async = async;
        if (self.xmlHttp !== null) {
            self.xmlHttp.open("POST", url, self.xmlHttp.async);
            self.xmlHttp.url = url;
            self.xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
            self.xmlHttp.onerror = function () { // handle eg. 40x errors
                if (self.xmlHttp.async) {
                    // resend it synchronous and catch the exception
                    var errorClient = new SOAPClient(self.xmlHttp.url, false);
                    var exception = errorClient.invoke(self.xmlHttp.func, self.xmlHttp.parameters, function () { }, function () { });
                    self.xmlHttp.errorCallback(isnull(exception.message, 'Unknown error...'));
                }
            }
 
            self.xmlHttp.onload = function () { // handle eg. 50x errors
                if ((self.xmlHttp.readyState === 4) && (self.xmlHttp.status !== 200)) {
                    self.xmlHttp.errorCallback(self.xmlHttp.statusText);
                }
            }
        }
    }
 
    SOAPClient.prototype.result = function (data) {
        return data;
    };
 
    SOAPClient.prototype.invoke = function (method, parameters, successCallback, errorCallback) {
        var self = this;
 
        var ns = 'http://domain.com/';
        var sr = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
            "<soap:Envelope " +
            "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " +
            "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" " +
            "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
            "<soap:Body>" +
            "<" + method + " xmlns=\"" + ns + "\">" +
            parameters.toXml() +
            "</" + method + "></soap:Body></soap:Envelope>";
 
        var soapaction = ((ns.lastIndexOf("/") != ns.length - 1) ? ns + "/" : ns) + method;
 
        self.xmlHttp.function = method;
        self.xmlHttp.parameters = parameters;
        self.xmlHttp.errorCallback = errorCallback;
 
        self.xmlHttp.setRequestHeader("SOAPAction", soapaction);
 
        if (self.xmlHttp.async) {
            self.xmlHttp.onreadystatechange = function () {
                if ((self.xmlHttp.readyState == 4) && (self.xmlHttp.status === 200)) {
                    self.onSuccess();
                }
            }
        }
 
        try {
            self.xmlHttp.send(sr);
            if (!self.xmlHttp.async) {
                self.onSuccess();
            }
        } catch (ex) {
            return ex;
        }
    }
 
    SOAPClient.prototype.onSuccess = function () {
        var self = this;
 
        if ((self.xmlHttp.readyState == 4) && (self.xmlHttp.status === 200)) {
            var o = null;
            var responseText = self.xmlHttp.response;
 
            // do the success callback here
        }
    }
 
    return SOAPClient;
}());

I have a form containing data and a file input fields,
I want to submit and validate this form using jquery and ajax through one script.
 
Below is my form:
 
    <form id="datas" method="post" enctype="multipart/form-data">
        <input type="text" name="firstName" value="" />
        <input name="pic" type="file" />
        <button>Submit</button>
    </form>
 
Now I have this code to validate the data
 
    $('#datas').validate({
        rules: {
            firstName:{
                required: true,
                minlength: 2,
                maxlength: 100
            }
 
        },
        messages: {
            firstName: {
                required: "Please Enter first name",
                minlength: jQuery.format("Enter at least {0} characters"),
                maxlength: jQuery.format("Enter atmost {0} characters"),
            }
        }
    });
 
Then I have a seperate code that could submit the form
 
    $("#datas").submit(function(){
 
        var formData = new FormData($(this)[0]);
 
        $.ajax({
            url: sucess.php,
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
 

**QUESTION:**
 
Please how can I combine these two scripts to validate the file and data fields and also submit to the success page.