问:
Error parsing JSON string using parseJSON
Need some help if there is a problem with the code or the data itself. Although I suspect its with the code because I tried to validate the JSON data I received it is properly formatted...

Here is my JSON data

```<code>{"view":"cities","model":{"top10Cities":[{"id":1024,"name":"Mumbai (Bombay)","countrycode":"IND","district":"Maharashtra","population":"10500000"},{"id":2331,"name":"Seoul","countrycode":"KOR","district":"Seoul","population":"9981619"},{"id":206,"name":"São Paulo","countrycode":"BRA","district":"São Paulo","population":"9968485"},{"id":1890,"name":"Shanghai","countrycode":"CHN","district":"Shanghai","population":"9696300"},{"id":939,"name":"Jakarta","countrycode":"IDN","district":"Jakarta Raya","population":"9604900"},{"id":2822,"name":"Karachi","countrycode":"PAK","district":"Sindh","population":"9269265"},{"id":3357,"name":"Istanbul","countrycode":"TUR","district":"Istanbul","population":"8787958"},{"id":2515,"name":"Ciudad de México","countrycode":"MEX","district":"Distrito Federal","population":"8591309"},{"id":3580,"name":"Moscow","countrycode":"RUS","district":"Moscow (City)","population":"8389200"},{"id":3793,"name":"New York","countrycode":"USA","district":"New York","population":"8008278"}],"fusionCharts":{"chart":"{\"showValues\":\"0\",\"caption\":\"Cities by Country Code\",\"theme\":\"zune\"}","data":"[{\"label\":\"Mumbai (Bombay)\",\"value\":\"10500000\"},{\"label\":\"Seoul\",\"value\":\"9981619\"},{\"label\":\"São Paulo\",\"value\":\"9968485\"},{\"label\":\"Shanghai\",\"value\":\"9696300\"},{\"label\":\"Jakarta\",\"value\":\"9604900\"},{\"label\":\"Karachi\",\"value\":\"9269265\"},{\"label\":\"Istanbul\",\"value\":\"8787958\"},{\"label\":\"Ciudad de México\",\"value\":\"8591309\"},{\"label\":\"Moscow\",\"value\":\"8389200\"},{\"label\":\"New York\",\"value\":\"8008278\"}]"}},"cleared":false}
</code>```

Here is the code I used to receive the JSON data

```<code>$(document).ready( function () {

    var jsonD = $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {
        console.log("Success "+ data.toString());
        alert(data);

        $("#fChart").insertFusionCharts({
            type: "column2d",
            width: "450",
            height: "250",
            dateFormat: "JSONURL",
            dataSource: data
        });
    })

});
</code>```

I tried the tips stated on this article but its still not working. Any advice on how to fix this? Thanks

Update 2

modified jquery code as suggested by Nisanth but the chart library is still not working. It says invalid data, maybe this is a problem with fusion charts library itself?

```<code>    $(document).ready( function () {

var jsonD = {};

        $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {

            console.log("Success ");
            alert(data);
            jsonD = data;

        }).done( function () {

            var fcData = JSON.stringify(jsonD);
            console.log("fcData: "+fcData);
            $("#fChart").insertFusionCharts({
                type: "column2d",
                width: "450",
                height: "250",
                dateFormat: "JSON",
                dataSource: fcData
            });
        });
    });
</code>```

The code is working fine i've added a log inside .done function and it showed the value of fcData see below.

Changed fcData = jsonD.model.fusionCharts and received the error below.

```<code>Uncaught TypeError: b.match is not a function
    at Fb (fusioncharts.js:214)
    at constructor._drawCategory (fusioncharts.js:1263)
    at constructor._drawComponents (fusioncharts.js:1223)
    at constructor.draw (fusioncharts.js:1220)
    at k._drawAxis (fusioncharts.js:981)
    at k._updateVisuals (fusioncharts.js:976)
    at k.draw (fusioncharts.js:979)
    at k.init (fusioncharts.js:946)
    at Object.m.createChart (fusioncharts.js:875)
    at n.core.render (fusioncharts.js:1801)
</code>```

Update 3

Code update

```<code>    }).done( function () {
        var cfChart= jsonD.model.fusionCharts.chart;
        var cfData= jsonD.model.fusionCharts.chart;
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: {chart:cfChart,data:cfData}
         });
    });
});
</code>```

Error Log

```<code>Uncaught TypeError: b.match is not a function
    at Fb (fusioncharts.js:214)
    at constructor._drawCategory (fusioncharts.js:1263)
    at constructor._drawComponents (fusioncharts.js:1223)
    at constructor.draw (fusioncharts.js:1220)
    at k._drawAxis (fusioncharts.js:981)
    at k._updateVisuals (fusioncharts.js:976)
    at k.draw (fusioncharts.js:979)
    at k.init (fusioncharts.js:946)
    at Object.m.createChart (fusioncharts.js:875)
    at n.core.render (fusioncharts.js:1801)
</code>```

Working code

```<code>$(document).ready( function () {

    var jsonD = {};

    $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {

        console.log("Success ");
        //alert(data);
        jsonD = data;

    }).done( function () {

        var cfChart= JSON.parse(jsonD.model.fusionCharts.chart);
        var cfData= JSON.parse(jsonD.model.fusionCharts.data);
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: {chart:cfChart,data:cfData}
         });
    });
});
</code>```

答:
Like @nnnnnn mentioned in his comment... $.getJSON doesn't return a json. It always returns a Deferred Object.

If you want to use the data of $.getJSON success function you could do:

```<code>//declaring in global scope
var jsonD={};
$.getJSON("http://localhost:8080/v1/cityData", function ( data ) {
    console.log("Success");
    alert(data);
    //changing the value in local scope
    jsonD = data;
}).done(function(){
        var fcData = jsonD.model.fusionCharts;
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: fcData
         });
 })
</code>```

EDIT

After inspecting your json data I see the data isn't extracted properly. FusionCharts expect theJSON data to have chart and data keys. This data is present in your JSON inside data.model.fusionCharts as string

So, you have to first extract them then parse it to json and then supply it to your dataSource.

So, you're actual fusionChart set up would be something like:

```<code>.done(function(){
            var cfChart= JSON.parse(jsonD.model.fusionCharts.chart);
            var cfData= JSON.parse(jsonD.model.fusionCharts.data);
            $("#fChart").insertFusionCharts({
                 type: "column2d",
                 width: "450",
                 height: "250",
                 dateFormat: "JSON",
                dataSource: {chart:cfChart,data:cfData}
             });
     })
</code>```

Body:
Need some help if there is a problem with the code or the data itself. Although I suspect its with the code because I tried to validate the JSON data I received it is properly formatted...

Here is my JSON data

{"view":"cities","model":{"top10Cities":[{"id":1024,"name":"Mumbai (Bombay)","countrycode":"IND","district":"Maharashtra","population":"10500000"},{"id":2331,"name":"Seoul","countrycode":"KOR","district":"Seoul","population":"9981619"},{"id":206,"name":"São Paulo","countrycode":"BRA","district":"São Paulo","population":"9968485"},{"id":1890,"name":"Shanghai","countrycode":"CHN","district":"Shanghai","population":"9696300"},{"id":939,"name":"Jakarta","countrycode":"IDN","district":"Jakarta Raya","population":"9604900"},{"id":2822,"name":"Karachi","countrycode":"PAK","district":"Sindh","population":"9269265"},{"id":3357,"name":"Istanbul","countrycode":"TUR","district":"Istanbul","population":"8787958"},{"id":2515,"name":"Ciudad de México","countrycode":"MEX","district":"Distrito Federal","population":"8591309"},{"id":3580,"name":"Moscow","countrycode":"RUS","district":"Moscow (City)","population":"8389200"},{"id":3793,"name":"New York","countrycode":"USA","district":"New York","population":"8008278"}],"fusionCharts":{"chart":"{\"showValues\":\"0\",\"caption\":\"Cities by Country Code\",\"theme\":\"zune\"}","data":"[{\"label\":\"Mumbai (Bombay)\",\"value\":\"10500000\"},{\"label\":\"Seoul\",\"value\":\"9981619\"},{\"label\":\"São Paulo\",\"value\":\"9968485\"},{\"label\":\"Shanghai\",\"value\":\"9696300\"},{\"label\":\"Jakarta\",\"value\":\"9604900\"},{\"label\":\"Karachi\",\"value\":\"9269265\"},{\"label\":\"Istanbul\",\"value\":\"8787958\"},{\"label\":\"Ciudad de México\",\"value\":\"8591309\"},{\"label\":\"Moscow\",\"value\":\"8389200\"},{\"label\":\"New York\",\"value\":\"8008278\"}]"}},"cleared":false}

Here is the code I used to receive the JSON data

$(document).ready( function () {

    var jsonD = $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {
        console.log("Success "+ data.toString());
        alert(data);

        $("#fChart").insertFusionCharts({
            type: "column2d",
            width: "450",
            height: "250",
            dateFormat: "JSONURL",
            dataSource: data
        });
    })

});

I tried the tips stated on this article but its still not working. Any advice on how to fix this? Thanks

Update 2

modified jquery code as suggested by Nisanth but the chart library is still not working. It says invalid data, maybe this is a problem with fusion charts library itself?

    $(document).ready( function () {

var jsonD = {};

        $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {

            console.log("Success ");
            alert(data);
            jsonD = data;

        }).done( function () {

            var fcData = JSON.stringify(jsonD);
            console.log("fcData: "+fcData);
            $("#fChart").insertFusionCharts({
                type: "column2d",
                width: "450",
                height: "250",
                dateFormat: "JSON",
                dataSource: fcData
            });
        });
    });

The code is working fine i've added a log inside .done function and it showed the value of fcData see below.

Changed fcData = jsonD.model.fusionCharts and received the error below.

Uncaught TypeError: b.match is not a function
    at Fb (fusioncharts.js:214)
    at constructor._drawCategory (fusioncharts.js:1263)
    at constructor._drawComponents (fusioncharts.js:1223)
    at constructor.draw (fusioncharts.js:1220)
    at k._drawAxis (fusioncharts.js:981)
    at k._updateVisuals (fusioncharts.js:976)
    at k.draw (fusioncharts.js:979)
    at k.init (fusioncharts.js:946)
    at Object.m.createChart (fusioncharts.js:875)
    at n.core.render (fusioncharts.js:1801)

Update 3

Code update

    }).done( function () {
        var cfChart= jsonD.model.fusionCharts.chart;
        var cfData= jsonD.model.fusionCharts.chart;
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: {chart:cfChart,data:cfData}
         });
    });
});

Error Log

Uncaught TypeError: b.match is not a function
    at Fb (fusioncharts.js:214)
    at constructor._drawCategory (fusioncharts.js:1263)
    at constructor._drawComponents (fusioncharts.js:1223)
    at constructor.draw (fusioncharts.js:1220)
    at k._drawAxis (fusioncharts.js:981)
    at k._updateVisuals (fusioncharts.js:976)
    at k.draw (fusioncharts.js:979)
    at k.init (fusioncharts.js:946)
    at Object.m.createChart (fusioncharts.js:875)
    at n.core.render (fusioncharts.js:1801)

Working code

$(document).ready( function () {

    var jsonD = {};

    $.getJSON("http://localhost:8080/v1/cityData", function ( data ) {

        console.log("Success ");
        //alert(data);
        jsonD = data;

    }).done( function () {

        var cfChart= JSON.parse(jsonD.model.fusionCharts.chart);
        var cfData= JSON.parse(jsonD.model.fusionCharts.data);
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: {chart:cfChart,data:cfData}
         });
    });
});

Body:
Like @nnnnnn mentioned in his comment... $.getJSON doesn't return a json. It always returns a Deferred Object.

If you want to use the data of $.getJSON success function you could do:

//declaring in global scope
var jsonD={};
$.getJSON("http://localhost:8080/v1/cityData", function ( data ) {
    console.log("Success");
    alert(data);
    //changing the value in local scope
    jsonD = data;
}).done(function(){
        var fcData = jsonD.model.fusionCharts;
        $("#fChart").insertFusionCharts({
             type: "column2d",
             width: "450",
             height: "250",
             dateFormat: "JSON",
            dataSource: fcData
         });
 })

EDIT

After inspecting your json data I see the data isn't extracted properly. FusionCharts expect theJSON data to have chart and data keys. This data is present in your JSON inside data.model.fusionCharts as string

So, you have to first extract them then parse it to json and then supply it to your dataSource.

So, you're actual fusionChart set up would be something like:

.done(function(){
            var cfChart= JSON.parse(jsonD.model.fusionCharts.chart);
            var cfData= JSON.parse(jsonD.model.fusionCharts.data);
            $("#fChart").insertFusionCharts({
                 type: "column2d",
                 width: "450",
                 height: "250",
                 dateFormat: "JSON",
                dataSource: {chart:cfChart,data:cfData}
             });
     })


来源: stackexchange

问:
Paperclip not deleting images from S3 on destroy
I am using Paperclip with AWS in my rails app. I have a model that holds the image:

```<code>class PaperclipFile < ActiveRecord::Base
  before_validation :parse_image

  belongs_to :attachment

  attr_accessor :base64_attachment

  has_attached_file :image, preserve_files: false
  validates_attachment :image, presence: true
  do_not_validate_attachment_file_type :image

  private
    def parse_image
      return unless base64_attachment
      image = Paperclip.io_adapters.for(base64_attachment)
      image.original_filename = "img_#{SecureRandom.urlsafe_base64}.jpg"
    end
end
</code>```

Basically I can pass an image in base64 and it processes and stores it correctly on S3. The issue is when I do .destroy

```<code>p = PaperclipFile.first
p.destroy
</code>```

After that the record is gone from the DB but the file is not destroyed from the bucket. I don't get any errors so it doesn't look like it's trying at all.

The output is:

```<code>2.4.0 :005 > PaperclipFile.first.destroy
  PaperclipFile Load (0.8ms)  SELECT  "paperclip_files".* FROM "paperclip_files" ORDER BY "paperclip_files"."id" ASC LIMIT $1  [["LIMIT", 1]]
   (0.2ms)  BEGIN
  SQL (0.7ms)  DELETE FROM "paperclip_files" WHERE "paperclip_files"."id" = $1  [["id", 2]]
   (4.1ms)  COMMIT
 => #<PaperclipFile id: 2, attachment_id: 2, created_at: "2017-04-03 04:02:11", updated_at: "2017-04-03 04:02:11", image_file_name: nil, image_content_type: nil, image_file_size: nil, image_updated_at: nil>
2.4.0 :006 >
</code>```

For the record I use Ruby 2.4, Rails 5.0.2 and as for the gems they look like this:

```<code># Attachments
gem 'paperclip'
gem 'aws-sdk', '~> 2.3'
</code>```

Thanks!

答:
There is nothing wrong with the code that you have written.

If you want to remove the image from S3 as well just make the following changes-

```<code>p = PaperclipFile.first
p.destroy # Removes the attachment from DB
p.clear # Deletes the attachment from S3
p.save # To save the model.
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I am using Paperclip with AWS in my rails app. I have a model that holds the image:

class PaperclipFile < ActiveRecord::Base
  before_validation :parse_image

  belongs_to :attachment

  attr_accessor :base64_attachment

  has_attached_file :image, preserve_files: false
  validates_attachment :image, presence: true
  do_not_validate_attachment_file_type :image

  private
    def parse_image
      return unless base64_attachment
      image = Paperclip.io_adapters.for(base64_attachment)
      image.original_filename = "img_#{SecureRandom.urlsafe_base64}.jpg"
    end
end

Basically I can pass an image in base64 and it processes and stores it correctly on S3. The issue is when I do .destroy

p = PaperclipFile.first
p.destroy

After that the record is gone from the DB but the file is not destroyed from the bucket. I don't get any errors so it doesn't look like it's trying at all.

The output is:

2.4.0 :005 > PaperclipFile.first.destroy
  PaperclipFile Load (0.8ms)  SELECT  "paperclip_files".* FROM "paperclip_files" ORDER BY "paperclip_files"."id" ASC LIMIT $1  [["LIMIT", 1]]
   (0.2ms)  BEGIN
  SQL (0.7ms)  DELETE FROM "paperclip_files" WHERE "paperclip_files"."id" = $1  [["id", 2]]
   (4.1ms)  COMMIT
 => #<PaperclipFile id: 2, attachment_id: 2, created_at: "2017-04-03 04:02:11", updated_at: "2017-04-03 04:02:11", image_file_name: nil, image_content_type: nil, image_file_size: nil, image_updated_at: nil>
2.4.0 :006 >

For the record I use Ruby 2.4, Rails 5.0.2 and as for the gems they look like this:

# Attachments
gem 'paperclip'
gem 'aws-sdk', '~> 2.3'

Thanks!

Body:
There is nothing wrong with the code that you have written.

If you want to remove the image from S3 as well just make the following changes-

p = PaperclipFile.first
p.destroy # Removes the attachment from DB
p.clear # Deletes the attachment from S3
p.save # To save the model.


问:
Does CakePHP offer nonce support?
I am on CakePHP 2.4 and I want to block access to a specific endpoint from un-authorized requests (not coming from my site). I believe a nonce is the right tool for this job. Does CakePHP offer support for this? I didn't find it in the docs, but perhaps I overlooked something.

答:
Yes, it does. You can enable it app/Controller/AppController.php
https://book.cakephp.org/2.0/en/core-libraries/components/security-component.html#csrf-protection</p>

```<code>public $components = array(
    'Security' => array(
        'csrfExpires' => '+1 hour'
    )
);
</code>```

Title: Does CakePHP offer nonce support?

Body:
Yes, it does. You can enable it app/Controller/AppController.php
https://book.cakephp.org/2.0/en/core-libraries/components/security-component.html#csrf-protection

public $components = array(
    'Security' => array(
        'csrfExpires' => '+1 hour'
    )
);


问:
Soap UI: ERROR:java.net.SocketException: Connection reset
I am getting ERROR:

java.net.SocketException: Connection reset.

I have followed the below link to resolve the issue. But no luck..

SOAPUI Certificate authentication

http://geekswithblogs.net/gvdmaaden/archive/2011/02/24/how-to-configure-soapui-with-client-certificate-authentication.aspx

I have given the error logs below. Can any one look this and let me know how to resolve this issue?

```<code>Thu Mar 23 16:11:51 IST 2017:ERROR:java.net.SocketException: Connection reset
   java.net.SocketException: Connection reset
    at java.net.SocketInputStream.read(Unknown Source)
    at java.net.SocketInputStream.read(Unknown Source)
    at sun.security.ssl.InputRecord.readFully(Unknown Source)
    at sun.security.ssl.InputRecord.read(Unknown Source)
    at sun.security.ssl.SSLSocketImpl.readRecord(Unknown Source)
    at sun.security.ssl.SSLSocketImpl.performInitialHandshake(Unknown Source)
    at sun.security.ssl.SSLSocketImpl.writeRecord(Unknown Source)
    at sun.security.ssl.AppOutputStream.write(Unknown Source)
    at org.apache.http.impl.io.AbstractSessionOutputBuffer.flushBuffer(AbstractSessionOutputBuffer.java:131)
    at org.apache.http.impl.io.AbstractSessionOutputBuffer.flush(AbstractSessionOutputBuffer.java:138)
    at org.apache.http.impl.conn.LoggingSessionOutputBuffer.flush(LoggingSessionOutputBuffer.java:95)
    at org.apache.http.impl.AbstractHttpClientConnection.doFlush(AbstractHttpClientConnection.java:270)
    at org.apache.http.impl.AbstractHttpClientConnection.flush(AbstractHttpClientConnection.java:275)
    at org.apache.http.impl.conn.AbstractClientConnAdapter.flush(AbstractClientConnAdapter.java:197)
    at org.apache.http.protocol.HttpRequestExecutor.doSendRequest(HttpRequestExecutor.java:258)
    at com.eviware.soapui.impl.wsdl.support.http.HttpClientSupport$SoapUIHttpRequestExecutor.doSendRequest(HttpClientSupport.java:113)
    at org.apache.http.protocol.HttpRequestExecutor.execute(HttpRequestExecutor.java:123)
    at org.apache.http.impl.client.DefaultRequestDirector.tryExecute(DefaultRequestDirector.java:633)
    at org.apache.http.impl.client.DefaultRequestDirector.execute(DefaultRequestDirector.java:454)
    at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:820)
    at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:754)
    at com.eviware.soapui.impl.wsdl.support.http.HttpClientSupport$Helper.execute(HttpClientSupport.java:247)
    at com.eviware.soapui.impl.wsdl.support.http.HttpClientSupport.execute(HttpClientSupport.java:362)
    at com.eviware.soapui.impl.wsdl.submit.transports.http.HttpClientRequestTransport.submitRequest(HttpClientRequestTransport.java:324)
    at com.eviware.soapui.impl.wsdl.submit.transports.http.HttpClientRequestTransport.sendRequest(HttpClientRequestTransport.java:237)
    at com.eviware.soapui.impl.wsdl.WsdlSubmit.run(WsdlSubmit.java:127)
    at java.util.concurrent.Executors$RunnableAdapter.call(Unknown Source)
    at java.util.concurrent.FutureTask.run(Unknown Source)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)
</code>```

答: I think you are using company connection and company firewall is blocking the connection.</p>

Body:
I am getting ERROR:

java.net.SocketException: Connection reset.

I have followed the below link to resolve the issue. But no luck..

SOAPUI Certificate authentication

http://geekswithblogs.net/gvdmaaden/archive/2011/02/24/how-to-configure-soapui-with-client-certificate-authentication.aspx

I have given the error logs below. Can any one look this and let me know how to resolve this issue?

Thu Mar 23 16:11:51 IST 2017:ERROR:java.net.SocketException: Connection reset
   java.net.SocketException: Connection reset
    at java.net.SocketInputStream.read(Unknown Source)
    at java.net.SocketInputStream.read(Unknown Source)
    at sun.security.ssl.InputRecord.readFully(Unknown Source)
    at sun.security.ssl.InputRecord.read(Unknown Source)
    at sun.security.ssl.SSLSocketImpl.readRecord(Unknown Source)
    at sun.security.ssl.SSLSocketImpl.performInitialHandshake(Unknown Source)
    at sun.security.ssl.SSLSocketImpl.writeRecord(Unknown Source)
    at sun.security.ssl.AppOutputStream.write(Unknown Source)
    at org.apache.http.impl.io.AbstractSessionOutputBuffer.flushBuffer(AbstractSessionOutputBuffer.java:131)
    at org.apache.http.impl.io.AbstractSessionOutputBuffer.flush(AbstractSessionOutputBuffer.java:138)
    at org.apache.http.impl.conn.LoggingSessionOutputBuffer.flush(LoggingSessionOutputBuffer.java:95)
    at org.apache.http.impl.AbstractHttpClientConnection.doFlush(AbstractHttpClientConnection.java:270)
    at org.apache.http.impl.AbstractHttpClientConnection.flush(AbstractHttpClientConnection.java:275)
    at org.apache.http.impl.conn.AbstractClientConnAdapter.flush(AbstractClientConnAdapter.java:197)
    at org.apache.http.protocol.HttpRequestExecutor.doSendRequest(HttpRequestExecutor.java:258)
    at com.eviware.soapui.impl.wsdl.support.http.HttpClientSupport$SoapUIHttpRequestExecutor.doSendRequest(HttpClientSupport.java:113)
    at org.apache.http.protocol.HttpRequestExecutor.execute(HttpRequestExecutor.java:123)
    at org.apache.http.impl.client.DefaultRequestDirector.tryExecute(DefaultRequestDirector.java:633)
    at org.apache.http.impl.client.DefaultRequestDirector.execute(DefaultRequestDirector.java:454)
    at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:820)
    at org.apache.http.impl.client.AbstractHttpClient.execute(AbstractHttpClient.java:754)
    at com.eviware.soapui.impl.wsdl.support.http.HttpClientSupport$Helper.execute(HttpClientSupport.java:247)
    at com.eviware.soapui.impl.wsdl.support.http.HttpClientSupport.execute(HttpClientSupport.java:362)
    at com.eviware.soapui.impl.wsdl.submit.transports.http.HttpClientRequestTransport.submitRequest(HttpClientRequestTransport.java:324)
    at com.eviware.soapui.impl.wsdl.submit.transports.http.HttpClientRequestTransport.sendRequest(HttpClientRequestTransport.java:237)
    at com.eviware.soapui.impl.wsdl.WsdlSubmit.run(WsdlSubmit.java:127)
    at java.util.concurrent.Executors$RunnableAdapter.call(Unknown Source)
    at java.util.concurrent.FutureTask.run(Unknown Source)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)


问:
Microsoft.Build.Utilities.Core assembly not found

Basically, I'm trying to create an MSBuild Task by inheriting from Microsoft.Build.Utilities.Task. See here for Microsoft's documentation on the class. The error shown is that the Utilities name doesn't exist in the Microsoft.Build namespace.

I know in the image I'm trying to reference Microsoft.Build.Utilties.Core but this was just due to troubleshooting. Utilities is not found. You can see on the right in the image that I've got a reference to Microsoft.Build.Utilities.Core, which I recently installed from Nuget. I've also tried the Visual Studio Installer, checking the box for developing Visual Studio Extensions. Not sure what I'm missing here.

答: And as it turns out, I had managed to confuse my project names. The project I had added the reference to is not the same as the project this file is in. Oops.</p>


答:
necro post but since a friend of mine has recently asked me the same question and couldn't get your solution to work I thought I'd add a simple function that wrote since I do this very regularly.

It has the flexibility of allowing for a custom header to be used, and retains the same column names provided in the ascii table (without having to enter them explicitly).

```<code>def table2fits(tab, header=None):
    '''
        takes the data from an ascii.table.Table and outputs
        a pyfits.hdu.table.BinTableHDU, creating a blank
        header if no header is provided
    '''
    from astropy.io import fits
    if header is None:
        prihdr = fits.Header()
        prihdu = fits.PrimaryHDU(header=prihdr)
    else:
        prihdu = fits.PrimaryHDU(header=header)

    table_hdu = fits.BinTableHDU.from_columns(np.array(tab.filled()))

return fits.HDUList([prihdu, table_hdu])
</code>```

usage would be

```<code>from astropy.io import ascii
myasciitable = asii.read("/path/to/input.file")
myfitstable = table2fits(myasciitable)
myfitstable.writeto("/path/to/output.fits", clobber=True)
</code>```

Title: How is it possible in python to convert an ascii table to a fits table?

Body:
I have a table of data in an ascii file with header and I would like to convert my ascii table to a fits file with header

#ID ra  dec x   y   Umag    Bmag    Vmag    Rmag    Imag
1.0 53.146  -27.8123    3422.98 3823.58 24.4528 24.7995 23.6266 22.64   20.8437
2.0 53.1064 -27.801         3953.49 3994.62 23.3284 22.6716 22.1762 21.6189 21.2141
3.0 53.1322 -27.7829    3608.34 4269.29 21.2676 20.1937 19.6743 19.0707 18.6983
4.0 53.1017 -27.8022    4017.09 3975.24 23.6987 22.84   21.9946 21.0781 19.8616
5.0 53.118  -27.8021    3798.98 3978.42 23.3087 22.1932 21.2205 20.1842 18.6448
6.0 53.1479 -27.8239    3397.92 3648.27 25.0347 24.598  23.7259 22.9945 21.9228
7.0 53.1334 -27.7758    3592.51 4375.76 21.5159 20.4777 19.6065 18.6609 17.188
8.0 53.1048 -27.8259    3974.47 3617.5  22.3266 22.3517 22.0677 21.7664 21.6781
9.0 53.1249 -27.8109    3706.47 3843.89 24.0539 23.3009 22.4001 21.4732 20.1244
10.0 53.1207 -27.7822   3763.3  4278.76 24.417  23.7635 22.9405 22.1379 21.5564
11.0 53.0886 -27.7611   4193.25 4596.77 22.012  22.3081 22.125  21.9488 21.9071
12.0 53.1272 -27.7498   3676.7  4768.82 19.3631 19.7458 19.5979 19.4438 19.4002

any idea how I could manage to do it with python?
cheers.

Body:
necro post but since a friend of mine has recently asked me the same question and couldn't get your solution to work I thought I'd add a simple function that wrote since I do this very regularly.

It has the flexibility of allowing for a custom header to be used, and retains the same column names provided in the ascii table (without having to enter them explicitly).

def table2fits(tab, header=None):
    '''
        takes the data from an ascii.table.Table and outputs
        a pyfits.hdu.table.BinTableHDU, creating a blank
        header if no header is provided
    '''
    from astropy.io import fits
    if header is None:
        prihdr = fits.Header()
        prihdu = fits.PrimaryHDU(header=prihdr)
    else:
        prihdu = fits.PrimaryHDU(header=header)

    table_hdu = fits.BinTableHDU.from_columns(np.array(tab.filled()))

return fits.HDUList([prihdu, table_hdu])

usage would be

from astropy.io import ascii
myasciitable = asii.read("/path/to/input.file")
myfitstable = table2fits(myasciitable)
myfitstable.writeto("/path/to/output.fits", clobber=True)


问:
protractor without selenium server
When I issue the protractor command at the command line, with the following configuration:

```<code>'use strict';

// Protractor configuration
var config = {
  specs: ['test/e2e/*spec.js']
};

if (process.env.TRAVIS) {
  config.capabilities = {
    browserName: 'firefox'
  };
}

exports.config = config;
</code>```

I get this:

```<code>$ protractor
[12:22:23] I/launcher - Running 1 instances of WebDriver
[12:22:23] I/local - Starting selenium standalone server...
[12:22:24] I/local - Selenium standalone server started at http://10.0.0.242:55414/wd/hub
Started
.

1 spec, 0 failures
Finished in 8.223 seconds

[12:22:33] I/local - Shutting down selenium standalone server.
[12:22:33] I/launcher - 0 instance(s) of WebDriver still running
[12:22:33] I/launcher - chrome #01 passed
</code>```

the problem is that it takes 5+ seconds to start up the "selenium standalone server".

Two questions - (1) do I need this server to run the tests? And (2), is there a way to run the server in the background without having to restart the server everytime?

答:
You also use selenium server jar in the protractor configuration. Checkout the sample bellow. this also comes in handy while using phantojs.

seleniumServerJar: '../utils/selenium-server-standalone-2.53.1.jar',

seleniumPort: 4444,

make user seleniumAddress is commented in the config

Title: protractor without selenium server

Body:
When I issue the protractor command at the command line, with the following configuration:

'use strict';

// Protractor configuration
var config = {
  specs: ['test/e2e/*spec.js']
};

if (process.env.TRAVIS) {
  config.capabilities = {
    browserName: 'firefox'
  };
}

exports.config = config;

I get this:

$ protractor
[12:22:23] I/launcher - Running 1 instances of WebDriver
[12:22:23] I/local - Starting selenium standalone server...
[12:22:24] I/local - Selenium standalone server started at http://10.0.0.242:55414/wd/hub
Started
.

1 spec, 0 failures
Finished in 8.223 seconds

[12:22:33] I/local - Shutting down selenium standalone server.
[12:22:33] I/launcher - 0 instance(s) of WebDriver still running
[12:22:33] I/launcher - chrome #01 passed

the problem is that it takes 5+ seconds to start up the "selenium standalone server".

Two questions - (1) do I need this server to run the tests? And (2), is there a way to run the server in the background without having to restart the server everytime?


问:
Shift + Enter no longer adds a new line in Visual Studio
I installed the Visual Studio 2010 productivity power tools, and since then Shift + Enter does not add a new line in the text editor. I've tried disabling all of the productivity tools settings and even uninstalling the productivity power tools entirely, but Shift + Enter still does nothing. I can't find the setting for this.

How can I re-enable shift + enter to add a space (just like enter alone does)?

答:
Go to Tools/Options/Environment/Keyboard.

Switch the "Use new shortcut in:" dropdown to "Text Editor".

Pick the Edit.BreakLine command.

In the Press shortcut keys edit pane press Shift+Enter.

ContentLicense: CC BY-SA 2.5


问:
C++ How to make a variable true if another variable WAS true
I was wonder how could I make a bool true if another bool was true for example with this program :

for(int i=1;i<5;i++){
  if (i == 3){
    x = false;
  } else{
    x = true;
  }

  if(x){
    cout << "true";
  }else{
    cout << "false";
  }
}

output :
true
true
false
true
true
```

<p>how would I make it so that the output is this: </p>

```output:
true
true
false
false
false
```

sorry if this is hard to understand I'm not the best at explaining

答:
```<code>int flag = 0;
for(int i=1;i<5;i++){
  if (i == 3){
    x = false;
    flag = 1;
  } else{
    x = true;
  }

  if(x && flag == 0){
    cout << "true";
  }else{
    cout << "false";
  }
}
</code>```

If you specifically wish to switch your output upon getting 3, you can flag up the case where there is a change in x. See the code above. This is in accordance to your code pattern.

Body:
I was wonder how could I make a bool true if another bool was true for example with this program :

for(int i=1;i<5;i++){
  if (i == 3){
    x = false;
  } else{
    x = true;
  }

  if(x){
    cout << "true";
  }else{
    cout << "false";
  }
}

output :
true
true
false
true
true

how would I make it so that the output is this:

output:
true
true
false
false
false

sorry if this is hard to understand I'm not the best at explaining

Body:
int flag = 0;
for(int i=1;i<5;i++){
  if (i == 3){
    x = false;
    flag = 1;
  } else{
    x = true;
  }

  if(x && flag == 0){
    cout << "true";
  }else{
    cout << "false";
  }
}

If you specifically wish to switch your output upon getting 3, you can flag up the case where there is a change in x. See the code above. This is in accordance to your code pattern.


问:
Using Flexbox with jQueryUI's sortable
I've been working on a UI recently and I really like to use Flexbox CSS for control of the layout. I needed a way to make the boxes I have be sortable and draggable.

I started by trying out jQueryUI's sortable but it doesn't seem to work very well with flexbox. It does sort but I think its got some calculation errors in regards to when its droppable in the new location? Either that or I'm doing something wrong. Either way I'll provide my code and a JSFiddle so you can see for yourself the weirdness. The behavior I'm looking for is nice clean droppable placeholders and for the alignment to be like how jQueryUI's example is. To test click and drag on the legends. Also try dragging the left most item to the far right.

How can I solve this such that it will work with Flexbox?

JSFiddle: https://jsfiddle.net/95pv6cn2/5/

Compare this with jQueryUI and how its supposed to operate (https://jqueryui.com/sortable/#placeholder)

HTML

```<code><body>
   <div class="header">
     <div class="logo">Sample Login System</div>
     <div class="logoutarea">
       <div class="loggedInAs">Logged in as (joe).</div>
       <div class="logout">Logout</div>
     </div>
   </div>
   <div class="content">
     <div class="actionarea" id="sortable">
       <div class="statusset">
         <fieldset>
           <legend>Status:</legend>
           <div class="startbtn" status="off">Start Taking Calls/Text</div>
           <div class="callstatusarea">
             <span class="callstatusheader">Call/Text Status:</span>
             <span class="status" status="free">Free</span>
           </div>
         </fieldset>
       </div>
       <div class="textmessageset">
         <fieldset>
           <legend>Send Outbound Text Message:</legend>
           <div class="inputline sendtextfrom">
             <div class="label">Send Text From:</div>
             <select class="fromselect">
               <option value="+19998887777">+19998887777</option>
               <option value="+16665554444">+16665554444</option>
             </select>
           </div>
           <div class="inputline sendtextto">
             <div class="label">Send Text To:</div>
             <input class="phoneinput sendtexttoinput" type="text" placeholder="To Phone Number..."/>
           </div>
           <div class="inputline sendtextresponsebackto">
             <div class="label">Response Number: </div>
             <input class="phoneinput sendtextresponsebackinput" type="text" placeholder="Your Phone Number..." title="(If no response back number given or response back number known to be busy in the system, then the system will automatically determine who to send text to)"/>
           </div>
           <div class="inputline sendtextwithmessage">
             <div class="label">With Message:</div>
             <textarea class="sendtextwithmessage_textarea" placeholder="Enter text message here..."></textarea>
           </div>
           <div class="inputline sendtextwithpicture">
             <div class="label">Media URL:</div>
             <input class="sendtextpictureurlinput" type="text" placeholder="http://a.com/image.jpg"/>
           </div>
           <button class="sendtextbtn">Send Outbound Text</button>
         </fieldset>
       </div>
       <div class="otherset">
         <fieldset>
           <legend>Some Other Random Set:</legend>
           Here is some text
         </fieldset>
       </div>
       <div class="callset">
         <fieldset>
           <legend>Start Outbound Call:</legend>
           <div class="inputline sendcallfrom">
             <div class="label">Caller ID From:</div>
             <select class="fromcalleridselect">
                <option value="+19998887777">+19998887777</option>
               <option value="+16665554444">+16665554444</option>
             </select>
           </div>
           <div class="inputline sendcallto">
             <div class="label">Send Call To:</div>
             <input class="phoneinput sendcalltoinput" type="text" placeholder="To Phone Number..."/>
           </div>
           <div class="inputline andMyPhone">
             <div class="label">Initiate To My Phone:</div>
             <input class="phoneinput initiatecalltomyphoneinput" type="text" placeholder="My Phone Number..."/>
           </div>
           <button class="inputline startoutboundcallbtn">Start Outbound Call</button>
         </fieldset>
       </div>
     </div>
   </div>
   <div class="footer">
     © 2017 Sample Company LLC
   </div>
</body>
</code>```

CSS

```<code>/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/* Main.Less */
.header {
  height: 20px;
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  /* IE6-9 */
  text-align: left;
  padding: 20px;
  color: white;
  font-weight: bold;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: space-around;
  align-items: space-around;
}
.footer {
  height: 20px;
  background: #b3dced;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0);
  /* IE6-9 */
  text-align: center;
  padding: 5px;
}
.logoutarea {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: space-around;
  align-items: space-around;
  text-align: right;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.loggedInAs {
  -webkit-align-self: center;
  align-self: center;
}
.logout {
  text-align: right;
  cursor: pointer;
  padding-left: 30px;
  -webkit-align-self: center;
  align-self: center;
}
.logout:hover {
  color: blue;
}
.logo {
  width: 100%;
  align-self: center;
  -webkit-align-self: center;
}
.error {
  color: blue;
}
/* Sticky Footer */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
}
/* End Sticky Footer */
.startbtn {
  display: inline-box;
  width: 200px;
  cursor: pointer;
  text-align: center;
}
.startbtn[status="off"] {
  background: #34d960;
  background-image: -webkit-linear-gradient(top, #34d960, #139e54);
  background-image: -moz-linear-gradient(top, #34d960, #139e54);
  background-image: -ms-linear-gradient(top, #34d960, #139e54);
  background-image: -o-linear-gradient(top, #34d960, #139e54);
  background-image: linear-gradient(to bottom, #34d960, #139e54);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.startbtn[status="on"] {
  background: #e62020;
  background-image: -webkit-linear-gradient(top, #e62020, #bd1b1b);
  background-image: -moz-linear-gradient(top, #e62020, #bd1b1b);
  background-image: -ms-linear-gradient(top, #e62020, #bd1b1b);
  background-image: -o-linear-gradient(top, #e62020, #bd1b1b);
  background-image: linear-gradient(to bottom, #e62020, #bd1b1b);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.startbtn:hover[status="off"] {
  background: #58a862;
  background-image: -webkit-linear-gradient(top, #58a862, #2d472d);
  background-image: -moz-linear-gradient(top, #58a862, #2d472d);
  background-image: -ms-linear-gradient(top, #58a862, #2d472d);
  background-image: -o-linear-gradient(top, #58a862, #2d472d);
  background-image: linear-gradient(to bottom, #58a862, #2d472d);
  text-decoration: none;
}
.startbtn:hover[status="on"] {
  background: #de2a3c;
  background-image: -webkit-linear-gradient(top, #de2a3c, #4d2323);
  background-image: -moz-linear-gradient(top, #de2a3c, #4d2323);
  background-image: -ms-linear-gradient(top, #de2a3c, #4d2323);
  background-image: -o-linear-gradient(top, #de2a3c, #4d2323);
  background-image: linear-gradient(to bottom, #de2a3c, #4d2323);
  text-decoration: none;
}
.callstatusheader {
  font-weight: bold;
  color: black;
}
.callstatusarea {
  font-size: 18px;
  padding: 10px;
  text-align: left;
}
.callstatusarea .status {
  padding-left: 10px;
}
.callstatusarea .status[status="free"] {
  color: green;
}
.callstatusarea .status[status="busy"] {
  color: red;
}
.callstatusarea .unbusy[status="free"] {
  display: none;
  font-size: 12px;
  cursor: pointer;
  padding-left: 20px;
}
.callstatusarea .unbusy[status="busy"] {
  display: inline;
  font-size: 12px;
  cursor: pointer;
  padding-left: 20px;
}
.callstatusarea .unbusy:hover {
  font-size: 12px;
  cursor: pointer;
  padding-left: 20px;
  color: blue;
}
.actionarea {
  display: flex;
  flex-wrap: wrap;
}
.actionarea .label {
  display: inline-block;
  width: 125px;
}
.actionarea input {
  padding: 5px;
  margin: 5px;
}
.actionarea select {
  margin-left: 5px;
}
.actionarea textarea {
  padding: 5px;
  margin: 5px;
}
.actionarea button {
  margin-top: 10px;
}
.actionarea legend {
  cursor: pointer;
}
.actionarea .inputline {
  margin: 5px;
  display: flex;
  align-items: center;
}
.actionarea .textmessageset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.actionarea .callset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.actionarea .otherset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.actionarea .statusset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.ui-state-highlight {
  width: 50px;
}
/*# sourceMappingURL=main.css.map */
</code>```

JavaScript

```<code>$(document).ready(function(){
    //@JA - Logout Fuction
    $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
    });
    $( "#sortable" ).disableSelection();
});
</code>```

答:
Use some of sortable's event handlers to create a "ghost" element in place of the element you are moving. This will help preserve the flex calculations.

Example: https://jsfiddle.net/CRHain88/vv636vj4/

```<code>$(document).ready(function() {
  //@JA - Logout Fuction

  // Create a reusable spacer element. I added a background
  // style to give indication that there was once something
  // there. If you're going to style it with more complex
  // design, consider making it have it's own class.
  var placeholderElement = jQuery('<div style="background-color: #eee;"></div>');

  $("#sortable").sortable({
    placeholder: "ui-state-highlight",

    // Add it before the element you're dragging.
    // This assumes that you can only ever drag one element at a time.
    activate: function(event, ui) {
      placeholderElement.insertBefore(ui.item[0]);

      // Explicitly set the height and width to preserve
      // flex calculations
      placeholderElement.width(ui.item[0].offsetWidth);
      placeholderElement.height(ui.item[0].offsetHeight);
    },

    // Remove it when you're done dragging.
    deactivate: function() {
      placeholderElement.remove();
    }
  });

  $("#sortable").disableSelection();
});
</code>```

Title: Using Flexbox with jQueryUI's sortable

Body:
I've been working on a UI recently and I really like to use Flexbox CSS for control of the layout. I needed a way to make the boxes I have be sortable and draggable.

I started by trying out jQueryUI's sortable but it doesn't seem to work very well with flexbox. It does sort but I think its got some calculation errors in regards to when its droppable in the new location? Either that or I'm doing something wrong. Either way I'll provide my code and a JSFiddle so you can see for yourself the weirdness. The behavior I'm looking for is nice clean droppable placeholders and for the alignment to be like how jQueryUI's example is. To test click and drag on the legends. Also try dragging the left most item to the far right.

How can I solve this such that it will work with Flexbox?

JSFiddle: https://jsfiddle.net/95pv6cn2/5/

Compare this with jQueryUI and how its supposed to operate (https://jqueryui.com/sortable/#placeholder)

HTML

Sample Login System

Logged in as (joe).

Logout

         <fieldset>
           <legend>Status:</legend>

Start Taking Calls/Text

             Call/Text Status:
             Free

         </fieldset>

         <fieldset>
           <legend>Send Outbound Text Message:</legend>

Send Text From:

             <select class="fromselect">
               <option value="+19998887777">+19998887777</option>
               <option value="+16665554444">+16665554444</option>
             </select>

Send Text To:

             <input class="phoneinput sendtexttoinput" type="text" placeholder="To Phone Number..."/>

Response Number:

             <input class="phoneinput sendtextresponsebackinput" type="text" placeholder="Your Phone Number..." title="(If no response back number given or response back number known to be busy in the system, then the system will automatically determine who to send text to)"/>

With Message:

             <textarea class="sendtextwithmessage_textarea" placeholder="Enter text message here..."></textarea>

Media URL:

             <input class="sendtextpictureurlinput" type="text" placeholder="http://a.com/image.jpg"/>

           <button class="sendtextbtn">Send Outbound Text</button>
         </fieldset>

         <fieldset>
           <legend>Some Other Random Set:</legend>
           Here is some text
         </fieldset>

         <fieldset>
           <legend>Start Outbound Call:</legend>

Caller ID From:

             <select class="fromcalleridselect">
                <option value="+19998887777">+19998887777</option>
               <option value="+16665554444">+16665554444</option>
             </select>

Send Call To:

             <input class="phoneinput sendcalltoinput" type="text" placeholder="To Phone Number..."/>

Initiate To My Phone:

             <input class="phoneinput initiatecalltomyphoneinput" type="text" placeholder="My Phone Number..."/>

           <button class="inputline startoutboundcallbtn">Start Outbound Call</button>
         </fieldset>

     © 2017 Sample Company LLC

CSS

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/* Main.Less */
.header {
  height: 20px;
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  /* IE6-9 */
  text-align: left;
  padding: 20px;
  color: white;
  font-weight: bold;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: space-around;
  align-items: space-around;
}
.footer {
  height: 20px;
  background: #b3dced;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0);
  /* IE6-9 */
  text-align: center;
  padding: 5px;
}
.logoutarea {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: space-around;
  align-items: space-around;
  text-align: right;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.loggedInAs {
  -webkit-align-self: center;
  align-self: center;
}
.logout {
  text-align: right;
  cursor: pointer;
  padding-left: 30px;
  -webkit-align-self: center;
  align-self: center;
}
.logout:hover {
  color: blue;
}
.logo {
  width: 100%;
  align-self: center;
  -webkit-align-self: center;
}
.error {
  color: blue;
}
/* Sticky Footer */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
}
/* End Sticky Footer */
.startbtn {
  display: inline-box;
  width: 200px;
  cursor: pointer;
  text-align: center;
}
.startbtn[status="off"] {
  background: #34d960;
  background-image: -webkit-linear-gradient(top, #34d960, #139e54);
  background-image: -moz-linear-gradient(top, #34d960, #139e54);
  background-image: -ms-linear-gradient(top, #34d960, #139e54);
  background-image: -o-linear-gradient(top, #34d960, #139e54);
  background-image: linear-gradient(to bottom, #34d960, #139e54);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.startbtn[status="on"] {
  background: #e62020;
  background-image: -webkit-linear-gradient(top, #e62020, #bd1b1b);
  background-image: -moz-linear-gradient(top, #e62020, #bd1b1b);
  background-image: -ms-linear-gradient(top, #e62020, #bd1b1b);
  background-image: -o-linear-gradient(top, #e62020, #bd1b1b);
  background-image: linear-gradient(to bottom, #e62020, #bd1b1b);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.startbtn:hover[status="off"] {
  background: #58a862;
  background-image: -webkit-linear-gradient(top, #58a862, #2d472d);
  background-image: -moz-linear-gradient(top, #58a862, #2d472d);
  background-image: -ms-linear-gradient(top, #58a862, #2d472d);
  background-image: -o-linear-gradient(top, #58a862, #2d472d);
  background-image: linear-gradient(to bottom, #58a862, #2d472d);
  text-decoration: none;
}
.startbtn:hover[status="on"] {
  background: #de2a3c;
  background-image: -webkit-linear-gradient(top, #de2a3c, #4d2323);
  background-image: -moz-linear-gradient(top, #de2a3c, #4d2323);
  background-image: -ms-linear-gradient(top, #de2a3c, #4d2323);
  background-image: -o-linear-gradient(top, #de2a3c, #4d2323);
  background-image: linear-gradient(to bottom, #de2a3c, #4d2323);
  text-decoration: none;
}
.callstatusheader {
  font-weight: bold;
  color: black;
}
.callstatusarea {
  font-size: 18px;
  padding: 10px;
  text-align: left;
}
.callstatusarea .status {
  padding-left: 10px;
}
.callstatusarea .status[status="free"] {
  color: green;
}
.callstatusarea .status[status="busy"] {
  color: red;
}
.callstatusarea .unbusy[status="free"] {
  display: none;
  font-size: 12px;
  cursor: pointer;
  padding-left: 20px;
}
.callstatusarea .unbusy[status="busy"] {
  display: inline;
  font-size: 12px;
  cursor: pointer;
  padding-left: 20px;
}
.callstatusarea .unbusy:hover {
  font-size: 12px;
  cursor: pointer;
  padding-left: 20px;
  color: blue;
}
.actionarea {
  display: flex;
  flex-wrap: wrap;
}
.actionarea .label {
  display: inline-block;
  width: 125px;
}
.actionarea input {
  padding: 5px;
  margin: 5px;
}
.actionarea select {
  margin-left: 5px;
}
.actionarea textarea {
  padding: 5px;
  margin: 5px;
}
.actionarea button {
  margin-top: 10px;
}
.actionarea legend {
  cursor: pointer;
}
.actionarea .inputline {
  margin: 5px;
  display: flex;
  align-items: center;
}
.actionarea .textmessageset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.actionarea .callset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.actionarea .otherset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.actionarea .statusset {
  display: flex;
  padding: 5px;
  max-width: 500px;
}
.ui-state-highlight {
  width: 50px;
}
/*# sourceMappingURL=main.css.map */

JavaScript

$(document).ready(function(){
    //@JA - Logout Fuction
    $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
    });
    $( "#sortable" ).disableSelection();
});

Body:
Use some of sortable's event handlers to create a "ghost" element in place of the element you are moving. This will help preserve the flex calculations.

Example: https://jsfiddle.net/CRHain88/vv636vj4/

$(document).ready(function() {
  //@JA - Logout Fuction

  // Create a reusable spacer element. I added a background
  // style to give indication that there was once something
  // there. If you're going to style it with more complex
  // design, consider making it have it's own class.
  var placeholderElement = jQuery('<div style="background-color: #eee;"></div>');

  $("#sortable").sortable({
    placeholder: "ui-state-highlight",

    // Add it before the element you're dragging.
    // This assumes that you can only ever drag one element at a time.
    activate: function(event, ui) {
      placeholderElement.insertBefore(ui.item[0]);

      // Explicitly set the height and width to preserve
      // flex calculations
      placeholderElement.width(ui.item[0].offsetWidth);
      placeholderElement.height(ui.item[0].offsetHeight);
    },

    // Remove it when you're done dragging.
    deactivate: function() {
      placeholderElement.remove();
    }
  });

  $("#sortable").disableSelection();
});


问:
Same MDB instance for similar messages
I have a queue on Wildfly 8.2 (JMS with default HornetQ) which receives messages relative to different entities with different MDB Classes as consumers (one MDB Class for each Entity).

I use The JMSType to send messages relative to Entity A to the MDB_A and so on.

Now I want that all messages relative to the same instance of Entity A are managed by the same instance of MDB_A. Before I insert the message in the queue I set the same value for the property JMSXGroupID for messages relative to the same instance of A.

Then I print out in the MDB an identifier of the MDB and the JMSXGroupID of the message, but I see that messages with same JMSXGroupID are managed by different MDBs.

I found this thread talking of this issue for AciveMQ, but I'm using HornetQ so I don't know what is behaviour in this case.

In that thread an answer was

In this case the Message Listener is the MDB container not the
  individual MDB instances. MDB container is free to select any mdb
  instance to process the message it received.So I think the JMSXGroupID
  has no significance here.

but if messages with same JMSXMessageID are processed by different instances, what is the purpose of this property? Isn't it the same as setting a JMSType for the messages?

I also found that setting the JMSXMessageID for messages on a Queue without selectors let all the messages be processed by the same instance of MDB, even if I have multiple instances available.

答:
You could try using JMS message selectors to ensure that specific types of messages are processed by specific MDBs.

For example, if you set a property on a JMS message like the following:

```<code>message.setStringProperty("mdbType", "orderMDB")
</code>```

or

```<code>message.setStringProperty("mdbType", "registrationMDB")
</code>```

Then for each MDB, you can specify which messages it is interested in processing by annotating it with something like:

```<code>@ActivationConfigProperty(propertyName = "messageSelector",
        propertyValue = "mdbType= 'orderMDB' OR mdbType= 'registrationMDB'")
</code>```

Title: Same MDB instance for similar messages

Body:
You could try using JMS message selectors to ensure that specific types of messages are processed by specific MDBs.

For example, if you set a property on a JMS message like the following:

message.setStringProperty("mdbType", "orderMDB")

or

message.setStringProperty("mdbType", "registrationMDB")

Then for each MDB, you can specify which messages it is interested in processing by annotating it with something like:

@ActivationConfigProperty(propertyName = "messageSelector",
        propertyValue = "mdbType= 'orderMDB' OR mdbType= 'registrationMDB'")


问:
Connect dynamically to signals of dynamically created objects
The title might be a bit confusing, but my intent is pretty simple:

I have a [Repeater/Instantiator] which creates multiple instances of a arbitrary delegate. I want to react to all changes of the properties (only first-level, so no properties of properties) of the instances of the delegate, calling a function

```<code>function update(index, propertyName)
</code>```

This seems to be easy, but I fail. This is my code

TestObj.qml

```<code>Repeater {
    onItemAdded: {
        var keys = Object.keys(item)
        console.log(keys)
        for (var k = 0; k < keys.length; k++) {
            if (item[keys[k] + 'Changed'] !== undefined  && keys[k] !== 'objectName') {
                var key = keys[k]
                var str = "function() { console.log('Property, " + key + " of " + index + " changed') }"
                console.log(str)
                item[key + 'Changed'].connect(function() { console.log('Property', key, 'of', index, 'changed') })
            }
        }
    }
}
</code>```

main.qml:

```<code>import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQml 2.2
import QtQuick.Controls 1.4 as Ctrl
import '.'
import 'test.js' as Test

ApplicationWindow {
    id: root
    visible: true
    minimumWidth: 500
    minimumHeight: 500
    property var blub: []

    Column {
        spacing: 5
        TestObj {
            model: 5
            delegate: Row {
                spacing: 2
                property int p1: 0
                property int p2: 2
                property int p3: 4

                Button {
                    text: parent.p1
                    onClicked: parent.p1++
                }
                Button {
                    text: parent.p2
                    onClicked: parent.p2 *= 2
                }
                Button {
                    text: parent.p3
                    onClicked: parent.p3 *= parent.p3
                }
            }
        }
    }
}
</code>```

It succesfully connects something, but I can't get the key properly locked. Whichever property I change, I always get the info, I had changed property p3 in my example.

How can I lock the key, so that I get propertyName when I change the the property with the corresponding name?

答:
What you want to do is to introspect objects' property changing at runtime. Therefore thanks to Qt's powerful meta-system, it is more intrinsic to do this using the metaobjects in the QObject.

The main idea is to use a custom C++ extension for QML which can analyze and gather all the properties in a QML object, and connect the notifySignals of these properties to our custom slots if any. Below are some code snippets, and the complete demo can be found in my Github repo: https://github.com/cjmdaixi/PropertySpy

define PropertySpy

```<code>class PropertySpy : public QObject
{
    Q_OBJECT
public:
    explicit PropertySpy(QObject *parent = 0);

    Q_INVOKABLE void spy(QObject * object);
public slots:
    void onPropertyChanged();
};
</code>```

the implementation of spy:

```<code>void PropertySpy::spy(QObject *object)
{
    auto slotIndex = metaObject()->indexOfSlot("onPropertyChanged()");
    if(slotIndex == -1){
        qDebug()<<"The index of onPropertyChanged is invalid!";
        return;
    }
    auto slotMethod = metaObject()->method(slotIndex);
    if(!slotMethod.isValid()){
        qDebug()<<"cannot find onPropertyChanged!";
        return;
    }
    for(auto i = 0; i != object->metaObject()->propertyCount(); ++i){
        auto prop = object->metaObject()->property(i);
        auto sig = prop.notifySignal();
        if(!sig.isValid()) continue;
        connect(object, sig, this, slotMethod);
    }
}
</code>```

the implementation of onPropertyChanged. Here in the demo, we simply print the property and it's value. Actually you can do whatever you want:

```<code>void PropertySpy::onPropertyChanged()
{
    auto senderObj = sender();
    auto signalIndex = senderSignalIndex();
    for(auto i = 0; i != senderObj->metaObject()->propertyCount(); ++i){
        auto prop = senderObj->metaObject()->property(i);
        if(prop.notifySignalIndex() == signalIndex){
            qDebug()<<prop.name()<<prop.read(senderObj);
        }
    }
}
</code>```

register PropertySpy to the qml engine in main.cpp

```<code>qmlRegisterType<PropertySpy> ("PropertySpy", 1, 0, "PropertySpy");
</code>```

use PropertySpy in qml, usually in Component.onCompleted of some qml objects that you are interested. For example, the following codes show how to introspect the changes of MouseArea's properties:

```<code>PropertySpy{
    id: propSpy
}

Rectangle{
    id: rect
    anchors.centerIn: parent
    color: "red"
    width: 100
    height: 50
    radius: 8

    MouseArea{
        anchors.fill: parent
        id: mouseArea

        Component.onCompleted: propSpy.spy(mouseArea)
    }
}
</code>```

Then you can get notified when any property is changed like below:

Body:
The title might be a bit confusing, but my intent is pretty simple:

I have a [Repeater/Instantiator] which creates multiple instances of a arbitrary delegate. I want to react to all changes of the properties (only first-level, so no properties of properties) of the instances of the delegate, calling a function

function update(index, propertyName)

This seems to be easy, but I fail. This is my code

TestObj.qml

Repeater {
    onItemAdded: {
        var keys = Object.keys(item)
        console.log(keys)
        for (var k = 0; k < keys.length; k++) {
            if (item[keys[k] + 'Changed'] !== undefined  && keys[k] !== 'objectName') {
                var key = keys[k]
                var str = "function() { console.log('Property, " + key + " of " + index + " changed') }"
                console.log(str)
                item[key + 'Changed'].connect(function() { console.log('Property', key, 'of', index, 'changed') })
            }
        }
    }
}

main.qml:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQml 2.2
import QtQuick.Controls 1.4 as Ctrl
import '.'
import 'test.js' as Test

ApplicationWindow {
    id: root
    visible: true
    minimumWidth: 500
    minimumHeight: 500
    property var blub: []

    Column {
        spacing: 5
        TestObj {
            model: 5
            delegate: Row {
                spacing: 2
                property int p1: 0
                property int p2: 2
                property int p3: 4

                Button {
                    text: parent.p1
                    onClicked: parent.p1++
                }
                Button {
                    text: parent.p2
                    onClicked: parent.p2 *= 2
                }
                Button {
                    text: parent.p3
                    onClicked: parent.p3 *= parent.p3
                }
            }
        }
    }
}

It succesfully connects something, but I can't get the key properly locked. Whichever property I change, I always get the info, I had changed property p3 in my example.

How can I lock the key, so that I get propertyName when I change the the property with the corresponding name?

Body:
What you want to do is to introspect objects' property changing at runtime. Therefore thanks to Qt's powerful meta-system, it is more intrinsic to do this using the metaobjects in the QObject.

The main idea is to use a custom C++ extension for QML which can analyze and gather all the properties in a QML object, and connect the notifySignals of these properties to our custom slots if any. Below are some code snippets, and the complete demo can be found in my Github repo: https://github.com/cjmdaixi/PropertySpy

define PropertySpy

class PropertySpy : public QObject
{
    Q_OBJECT
public:
    explicit PropertySpy(QObject *parent = 0);

    Q_INVOKABLE void spy(QObject * object);
public slots:
    void onPropertyChanged();
};

the implementation of spy:

void PropertySpy::spy(QObject *object)
{
    auto slotIndex = metaObject()->indexOfSlot("onPropertyChanged()");
    if(slotIndex == -1){
        qDebug()<<"The index of onPropertyChanged is invalid!";
        return;
    }
    auto slotMethod = metaObject()->method(slotIndex);
    if(!slotMethod.isValid()){
        qDebug()<<"cannot find onPropertyChanged!";
        return;
    }
    for(auto i = 0; i != object->metaObject()->propertyCount(); ++i){
        auto prop = object->metaObject()->property(i);
        auto sig = prop.notifySignal();
        if(!sig.isValid()) continue;
        connect(object, sig, this, slotMethod);
    }
}

the implementation of onPropertyChanged. Here in the demo, we simply print the property and it's value. Actually you can do whatever you want:

void PropertySpy::onPropertyChanged()
{
    auto senderObj = sender();
    auto signalIndex = senderSignalIndex();
    for(auto i = 0; i != senderObj->metaObject()->propertyCount(); ++i){
        auto prop = senderObj->metaObject()->property(i);
        if(prop.notifySignalIndex() == signalIndex){
            qDebug()<<prop.name()<<prop.read(senderObj);
        }
    }
}

register PropertySpy to the qml engine in main.cpp

qmlRegisterType<PropertySpy> ("PropertySpy", 1, 0, "PropertySpy");

use PropertySpy in qml, usually in Component.onCompleted of some qml objects that you are interested. For example, the following codes show how to introspect the changes of MouseArea's properties:

PropertySpy{
    id: propSpy
}

Rectangle{
    id: rect
    anchors.centerIn: parent
    color: "red"
    width: 100
    height: 50
    radius: 8

    MouseArea{
        anchors.fill: parent
        id: mouseArea

        Component.onCompleted: propSpy.spy(mouseArea)
    }
}

Then you can get notified when any property is changed like below:


问:
Check if timestamp older than 30 seconds
I am trying to determine if a timestamp is older than 30 seconds, but for some reason it is coming back as older than 30 seconds when it hasn't even been a couple seconds. </p>

<p>Example: https://ideone.com/KLIIBz </p>

```<code>public static Boolean cooldown(int id) {

    Calendar now = Calendar.getInstance();
    now.add(Calendar.SECOND, -secondsAgo);
    long timeAgo = now.getTimeInMillis();
    if ( cooldown.containsKey(id) ) {

        System.out.println(cooldown.get(id) + " | " + timeAgo);

        // Stored timestamp always older than timeAgo
        if ( cooldown.get(id) < timeAgo ) {

            cooldown.remove(id);

        } else {

            // This code should be executed, as I am running the function one after another from same UUID not even a second or two apart.
            return false;

        }

    }

    now = Calendar.getInstance();
    cooldown.put(id, now.getTimeInMillis());

    return true;

}
</code>```

答:
This:

```<code>Calendar now = Calendar.getInstance();
now.add(Calendar.SECOND, -secondsAgo);
long timeAgo = now.getTimeInMillis();
</code>```

is too much overhead or just getting the actual time stamp in your app... you can just call

```<code>System.currentTimeMillis();
</code>```

and verify this condition between cooldown.get(id) and  timeAgo

so they meet cooldown.get(id) - timeAgo < 30*1000 or not...

Body:
I am trying to determine if a timestamp is older than 30 seconds, but for some reason it is coming back as older than 30 seconds when it hasn't even been a couple seconds.

Example: https://ideone.com/KLIIBz

public static Boolean cooldown(int id) {

    Calendar now = Calendar.getInstance();
    now.add(Calendar.SECOND, -secondsAgo);
    long timeAgo = now.getTimeInMillis();
    if ( cooldown.containsKey(id) ) {

        System.out.println(cooldown.get(id) + " | " + timeAgo);

        // Stored timestamp always older than timeAgo
        if ( cooldown.get(id) < timeAgo ) {

            cooldown.remove(id);

        } else {

            // This code should be executed, as I am running the function one after another from same UUID not even a second or two apart.
            return false;

        }

    }

    now = Calendar.getInstance();
    cooldown.put(id, now.getTimeInMillis());

    return true;

}

Body:
This:

Calendar now = Calendar.getInstance();
now.add(Calendar.SECOND, -secondsAgo);
long timeAgo = now.getTimeInMillis();

is too much overhead or just getting the actual time stamp in your app... you can just call

System.currentTimeMillis();

and verify this condition between cooldown.get(id) and  timeAgo

so they meet cooldown.get(id) - timeAgo < 30*1000 or not...


问:
iPhone : form like new contact
I have some questions about the Apple iPhone Contact App. I want to use the same methode to create and modify information.

Here's two pics :

alt text http://grab.by/4ZjQ
alt text http://grab.by/4ZjR

So we have the creation and the edition. The form looks like an UITableView with a groupedStyle but I don't know how to re-creat all of this. Have you got an idea or a tutorial that might explain how to do it ?

Thanks a lot !

答:
the top bit is a UIView with a UIImageView and a UITableView, this view is set as the header of the overall UITableView.

As for the editing, you need to swap out the UILabel, with a UITextField, which has the same frame, and font-size. move the content from one view to another.

Title: iPhone : form like new contact


问:
Align a child class vertically to parent class
I am developing a webpage in which a user can show the larger image or preview of every thumbnails by hovering it.

I am using this Jquery code to show and center the larger image on the screen responsively.

```<code>var timer;
$(".theme-preview").hover(function() {
    var self = $(this);

    timer = setTimeout(function() {
      timer = false;

      $(self).children('.popup-preview').fadeIn("slow");

      $(self).children('.popup-preview').css("position", "fixed");
      $(self).children('.popup-preview').css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2));
      $(self).children('.popup-preview').css("left", ($(window).width() / 2) - ($(self).children('.popup-preview').outerWidth() / 2));

    }, 800);

    //return false;
  },
  function() {
    if (timer) {
      clearTimeout(timer);
      timer = false;
    } else {
      $(this).children('.popup-preview').fadeOut("fast");
    }

    //return false;
  }
);
</code>```

How can I align the larger image vertically the same with the parent class?

Here is my working sample code.

Update: Example is when the thumbnail is on the top or bottom of the screen and was hovered. The larger image should display vertically center of the screen.

答:
How can I align the larger image vertically the same with the parent class?

Use getBoundingClientRect() function to get the current boundary of theme-preview div. Then calculate the respective left and top.

```<code>var currentRect = self[0].getBoundingClientRect();

...

var previewPopup = self.children('.popup-preview');
      previewPopup.fadeIn("slow");

      previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top - 20)
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));
</code>```

jsFiddle v1

Updated. This should center it according to parent width and height.
jsFiddle v2

```<code>previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top + ((self[0].clientHeight/2) - (self.children('.popup-preview').outerHeight() / 2)))
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));
</code>```

Body:
I am developing a webpage in which a user can show the larger image or preview of every thumbnails by hovering it.

I am using this Jquery code to show and center the larger image on the screen responsively.

var timer;
$(".theme-preview").hover(function() {
    var self = $(this);

    timer = setTimeout(function() {
      timer = false;

      $(self).children('.popup-preview').fadeIn("slow");

      $(self).children('.popup-preview').css("position", "fixed");
      $(self).children('.popup-preview').css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2));
      $(self).children('.popup-preview').css("left", ($(window).width() / 2) - ($(self).children('.popup-preview').outerWidth() / 2));

    }, 800);

    //return false;
  },
  function() {
    if (timer) {
      clearTimeout(timer);
      timer = false;
    } else {
      $(this).children('.popup-preview').fadeOut("fast");
    }

    //return false;
  }
);

How can I align the larger image vertically the same with the parent class?

Here is my working sample code.

Update: Example is when the thumbnail is on the top or bottom of the screen and was hovered. The larger image should display vertically center of the screen.

Body:
How can I align the larger image vertically the same with the parent class?

Use getBoundingClientRect() function to get the current boundary of theme-preview div. Then calculate the respective left and top.

var currentRect = self[0].getBoundingClientRect();

...

var previewPopup = self.children('.popup-preview');
      previewPopup.fadeIn("slow");

      previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top - 20)
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));

jsFiddle v1

Updated. This should center it according to parent width and height.
jsFiddle v2

previewPopup
        .css("position", "fixed")
        .css("top", currentRect.top + ((self[0].clientHeight/2) - (self.children('.popup-preview').outerHeight() / 2)))
        .css("left", ( currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth() / 2));