问:
View History of payment and update it in database
I have a problem with creating a website using ASP.NET.

I am doing a View History feature in which a user, after making a payment and attending the event, can write feedback in a Review page that contains the seminar details and payment details.

When I am retrieving from the database and have some Review History from a past event, it works. This is done by manual adding a review and a rating for an id through a Review table.

However, when I want to retrieve a seminar that the user has attended, BUT NOT reviewed the seminar, the error message occurs:

```<code>system.ArgumentOutOfRangeException: Index was out of range.
</code>```

The line producing the error is the following:

```<code>Review c = reviews[gvSeminar.SelectedIndex];
</code>```

Upon debugging, I realized that the value: reviews has a value of Count: 1. The funny thing is that when I clicked on an id THAT HAS a review and a rating, the value: reviews also has a value of Count: 1. Therefore, for the id that DID NOT have a review, the program showed an Out Of Range message since there is no review or ratings under this portion.

```<code> Review c = reviews[gvSeminar.SelectedIndex];
 tbxRating.Text = c.Rating.ToString();
 tbxRemarks.Text = c.Remarks;
</code>```

I want to make it work if the data is null, since there are no reviews or ratings by default, so the user can write some feedback into the View History.

View History (when selecting the past event or new event in the gridview of ViewHistory.aspx):

```<code>...
{
    Panel1.Visible = true;
    Member m = (Member)Session["user"];
    List<ShoppingCart> shoppingcarts = ShoppingCartDBMgr.getAllShoppingCart(m.Email);
    gvSeminar.DataSource = shoppingcarts;
    gvSeminar.DataBind();
    List<Seminar> seminars = SeminarMgr.getAllSeminar();
    List<Schedule> schedules = ScheduleMgr.getAllSchedule();
    List<Review> reviews = ReviewDBMgr.getAllReviewById(m.Email);
    Seminar a = seminars[gvSeminar.PageSize * gvSeminar.PageIndex + gvSeminar.SelectedIndex];
    Schedule b = schedules[gvSeminar.SelectedIndex];
    if (reviews != null)
    {
        Review c = reviews[gvSeminar.SelectedIndex];
        tbxRating.Text = c.Rating.ToString();
        tbxRemarks.Text = c.Remarks;
    }
    else
    {
        Review r = new Review()
        {
            Rating = Convert.ToInt32(tbxRating.Text),
            Remarks = tbxRemarks.Text
        };
        int id = ReviewDBMgr.insertReview(r);
        lblOutput.Text = id + "Added!";
    }

    tbxId.Text = a.Id;
    tbxName.Text = a.Name;
    tbxPrice.Text = a.Price.ToString();
    tbxDate.Text = b.Date.ToShortDateString();
}
</code>```

Update button to add the review:

```<code>...
{
    Member m = (Member)Session["user"];
    List<ShoppingCart> shoppingcarts = ShoppingCartDBMgr.getAllShoppingCart(m.Email);
    gvSeminar.DataSource = shoppingcarts;
    gvSeminar.DataBind();
    List<Review> reviews = ReviewDBMgr.getAllReviewById(m.Email);

    if (reviews == null)
    {
        Review c = reviews[gvSeminar.SelectedIndex];
        tbxRating.Text = c.Rating.ToString();
        tbxRemarks.Text = c.Remarks;
        Review r = new Review()
        {
            Rating = Convert.ToInt32(tbxRating.Text),
            Remarks = tbxRemarks.Text
        };
        int id = ReviewDBMgr.insertReview(r);
        lblOutput.Text = id + "Added!";
    }
}
</code>```

Database Manager:

```<code>public static int insertReview(Review r)
{
    SqlConnection con = new SqlConnection(conStr);
    try
    {
        SqlCommand command = new SqlCommand();
        command.Connection = con;
        command.CommandText = "insert into Review (rev_rating, rev_remarks, sem_id, participant_email) values (@rev_rating, @rev_remarks, @sem_id, @participant_email)";
        command.Parameters.AddWithValue("@rev_rating", r.Rating);
        command.Parameters.AddWithValue("@rev_remarks", r.Remarks);
        command.Parameters.AddWithValue("@sem_id", r.Seminar.Id);
        command.Parameters.AddWithValue("@participant_email", r.Member.Email);
        con.Open();
        return command.ExecuteNonQuery();
    }
    finally
    {
        con.Close();
    }
}
</code>```

答:
This your insert command

```<code>command.CommandText = "insert into Review (rev_rating, rev_remarks, sem_id, participant_email) values (@rev_rating, @rev_remarks, @sem_id, @participant_email)";
</code>```

To Udpate value in table you have change it to

```<code>command.CommandText = "UPDATE Review SET rev_rating = @rev_rating, rev_remarks = @rev_remarks Where sem_id = @sem_id";
</code>```

Body:
I have a problem with creating a website using ASP.NET.

I am doing a View History feature in which a user, after making a payment and attending the event, can write feedback in a Review page that contains the seminar details and payment details.

When I am retrieving from the database and have some Review History from a past event, it works. This is done by manual adding a review and a rating for an id through a Review table.

However, when I want to retrieve a seminar that the user has attended, BUT NOT reviewed the seminar, the error message occurs:

system.ArgumentOutOfRangeException: Index was out of range.

The line producing the error is the following:

Review c = reviews[gvSeminar.SelectedIndex];

Upon debugging, I realized that the value: reviews has a value of Count: 1. The funny thing is that when I clicked on an id THAT HAS a review and a rating, the value: reviews also has a value of Count: 1. Therefore, for the id that DID NOT have a review, the program showed an Out Of Range message since there is no review or ratings under this portion.

 Review c = reviews[gvSeminar.SelectedIndex];
 tbxRating.Text = c.Rating.ToString();
 tbxRemarks.Text = c.Remarks;

I want to make it work if the data is null, since there are no reviews or ratings by default, so the user can write some feedback into the View History.

View History (when selecting the past event or new event in the gridview of ViewHistory.aspx):

...
{
    Panel1.Visible = true;
    Member m = (Member)Session["user"];
    List<ShoppingCart> shoppingcarts = ShoppingCartDBMgr.getAllShoppingCart(m.Email);
    gvSeminar.DataSource = shoppingcarts;
    gvSeminar.DataBind();
    List<Seminar> seminars = SeminarMgr.getAllSeminar();
    List<Schedule> schedules = ScheduleMgr.getAllSchedule();
    List<Review> reviews = ReviewDBMgr.getAllReviewById(m.Email);
    Seminar a = seminars[gvSeminar.PageSize * gvSeminar.PageIndex + gvSeminar.SelectedIndex];
    Schedule b = schedules[gvSeminar.SelectedIndex];
    if (reviews != null)
    {
        Review c = reviews[gvSeminar.SelectedIndex];
        tbxRating.Text = c.Rating.ToString();
        tbxRemarks.Text = c.Remarks;
    }
    else
    {
        Review r = new Review()
        {
            Rating = Convert.ToInt32(tbxRating.Text),
            Remarks = tbxRemarks.Text
        };
        int id = ReviewDBMgr.insertReview(r);
        lblOutput.Text = id + "Added!";
    }

    tbxId.Text = a.Id;
    tbxName.Text = a.Name;
    tbxPrice.Text = a.Price.ToString();
    tbxDate.Text = b.Date.ToShortDateString();
}

Update button to add the review:

...
{
    Member m = (Member)Session["user"];
    List<ShoppingCart> shoppingcarts = ShoppingCartDBMgr.getAllShoppingCart(m.Email);
    gvSeminar.DataSource = shoppingcarts;
    gvSeminar.DataBind();
    List<Review> reviews = ReviewDBMgr.getAllReviewById(m.Email);

    if (reviews == null)
    {
        Review c = reviews[gvSeminar.SelectedIndex];
        tbxRating.Text = c.Rating.ToString();
        tbxRemarks.Text = c.Remarks;
        Review r = new Review()
        {
            Rating = Convert.ToInt32(tbxRating.Text),
            Remarks = tbxRemarks.Text
        };
        int id = ReviewDBMgr.insertReview(r);
        lblOutput.Text = id + "Added!";
    }
}

Database Manager:

public static int insertReview(Review r)
{
    SqlConnection con = new SqlConnection(conStr);
    try
    {
        SqlCommand command = new SqlCommand();
        command.Connection = con;
        command.CommandText = "insert into Review (rev_rating, rev_remarks, sem_id, participant_email) values (@rev_rating, @rev_remarks, @sem_id, @participant_email)";
        command.Parameters.AddWithValue("@rev_rating", r.Rating);
        command.Parameters.AddWithValue("@rev_remarks", r.Remarks);
        command.Parameters.AddWithValue("@sem_id", r.Seminar.Id);
        command.Parameters.AddWithValue("@participant_email", r.Member.Email);
        con.Open();
        return command.ExecuteNonQuery();
    }
    finally
    {
        con.Close();
    }
}

Body:
This your insert command

command.CommandText = "insert into Review (rev_rating, rev_remarks, sem_id, participant_email) values (@rev_rating, @rev_remarks, @sem_id, @participant_email)";

To Udpate value in table you have change it to

command.CommandText = "UPDATE Review SET rev_rating = @rev_rating, rev_remarks = @rev_remarks Where sem_id = @sem_id";


来源: stackexchange

问:
How to check if a SQLite3 database exists in Python?
I am trying to create a function in Python 2.7.3 to open a SQLite database.

This is my code at the moment:

```<code>import sqlite3 as lite
import sys

db = r'someDb.sqlite'

def opendb(db):
    try:
        conn = lite.connect(db)
    except sqlite3.Error:
        print "Error open db.\n"
        return False
    cur = conn.cursor()
    return [conn, cur]
</code>```

I have tried the code above and I have observed that the sqlite3 library opens the database declared if exists, or creates a new database if this one doesn't exist.

Is there a way to check if the database exists with sqlite3 methods or I have to use file operation like os.path.isfile(path)?

答:
Yes, there is a way to do what you want with Python 3.4+.

Use the sqlite3.connect() function to connect, but pass it a URI instead of a file path, and add mode=rw to its query string.

Here is a complete working code example:

import sqlite3
con = sqlite3.connect('file:aaa.db?mode=rw', uri=True)
```

<p>This will open an existing database from a file named <code>aaa.db</code> in the current folder, but will raise an error in case that file can not be opened or does not exist:</p>

<pre class="lang-none prettyprint-override"><code>Traceback (most recent call last):
  File "aaa.py", line 2, in <module>
    con = sqlite3.connect('file:aaa.db?mode=rw', uri=True)
sqlite3.OperationalError: unable to open database file
</code>```

Python sqlite.connect() docs state that:

If uri is true, database is interpreted as a URI. This allows you to specify options. For example, to open a database in read-only mode you can use:

db = sqlite3.connect('file:path/to/database?mode=ro', uri=True)

More information about this feature, including a list of recognized options, can be found in the SQLite URI documentation.

Here's an excerpt of all the relevant URI option information collected from http://www.sqlite.org/c3ref/open.html:

mode: The mode parameter may be set to either "ro", "rw", "rwc", or "memory". Attempting to set it to any other value is an error. If "ro" is specified, then the database is opened for read-only access, just as if the SQLITE_OPEN_READONLY flag had been set in the third argument to sqlite3_open_v2(). If the mode option is set to "rw", then the database is opened for read-write (but not create) access, as if SQLITE_OPEN_READWRITE (but not SQLITE_OPEN_CREATE) had been set. Value "rwc" is equivalent to setting both SQLITE_OPEN_READWRITE and SQLITE_OPEN_CREATE. If the mode option is set to "memory" then a pure in-memory database that never reads or writes from disk is used. It is an error to specify a value for the mode parameter that is less restrictive than that specified by the flags passed in the third parameter to sqlite3_open_v2().

The sqlite3_open_v2() interface works like sqlite3_open() except that it accepts two additional parameters for additional control over the new database connection. The flags parameter to sqlite3_open_v2() can take one of the following three values, optionally combined with the SQLITE_OPEN_NOMUTEX, SQLITE_OPEN_FULLMUTEX, SQLITE_OPEN_SHAREDCACHE, SQLITE_OPEN_PRIVATECACHE, and/or SQLITE_OPEN_URI flags:

SQLITE_OPEN_READONLY
     The database is opened in read-only mode. If the database does not already exist, an error is returned.

SQLITE_OPEN_READWRITE
     The database is opened for reading and writing if possible, or reading only if the file is write protected by the operating system. In either case the database must already exist, otherwise an error is returned.

SQLITE_OPEN_READWRITE | SQLITE_OPEN_CREATE
     The database is opened for reading and writing, and is created if it does not already exist. This is the behavior that is always used for sqlite3_open() and sqlite3_open16().

For convenience, here's also a Python 3.4+ function for converting a regular path to an URI usable by sqlite.connect():

import pathlib
import urllib.parse

def _path_to_uri(path):
    path = pathlib.Path(path)
    if path.is_absolute():
        return path.as_uri()
    return 'file:' + urllib.parse.quote(path.as_posix(), safe=':/')
```

ContentLicense: CC BY-SA 3.0

Body:
I am trying to create a function in Python 2.7.3 to open a SQLite database.

This is my code at the moment:

import sqlite3 as lite
import sys

db = r'someDb.sqlite'

def opendb(db):
    try:
        conn = lite.connect(db)
    except sqlite3.Error:
        print "Error open db.\n"
        return False
    cur = conn.cursor()
    return [conn, cur]

I have tried the code above and I have observed that the sqlite3 library opens the database declared if exists, or creates a new database if this one doesn't exist.

Is there a way to check if the database exists with sqlite3 methods or I have to use file operation like os.path.isfile(path)?

Body:
Yes, there is a way to do what you want with Python 3.4+.

Use the sqlite3.connect() function to connect, but pass it a URI instead of a file path, and add mode=rw to its query string.

Here is a complete working code example:

import sqlite3
con = sqlite3.connect('file:aaa.db?mode=rw', uri=True)

This will open an existing database from a file named aaa.db in the current folder, but will raise an error in case that file can not be opened or does not exist:

Traceback (most recent call last):
  File "aaa.py", line 2, in <module>
    con = sqlite3.connect('file:aaa.db?mode=rw', uri=True)
sqlite3.OperationalError: unable to open database file

Python sqlite.connect() docs state that:

If uri is true, database is interpreted as a URI. This allows you to specify options. For example, to open a database in read-only mode you can use:

db = sqlite3.connect('file:path/to/database?mode=ro', uri=True)

More information about this feature, including a list of recognized options, can be found in the SQLite URI documentation.

Here's an excerpt of all the relevant URI option information collected from http://www.sqlite.org/c3ref/open.html:

mode: The mode parameter may be set to either "ro", "rw", "rwc", or "memory". Attempting to set it to any other value is an error. If "ro" is specified, then the database is opened for read-only access, just as if the SQLITE_OPEN_READONLY flag had been set in the third argument to sqlite3_open_v2(). If the mode option is set to "rw", then the database is opened for read-write (but not create) access, as if SQLITE_OPEN_READWRITE (but not SQLITE_OPEN_CREATE) had been set. Value "rwc" is equivalent to setting both SQLITE_OPEN_READWRITE and SQLITE_OPEN_CREATE. If the mode option is set to "memory" then a pure in-memory database that never reads or writes from disk is used. It is an error to specify a value for the mode parameter that is less restrictive than that specified by the flags passed in the third parameter to sqlite3_open_v2().

The sqlite3_open_v2() interface works like sqlite3_open() except that it accepts two additional parameters for additional control over the new database connection. The flags parameter to sqlite3_open_v2() can take one of the following three values, optionally combined with the SQLITE_OPEN_NOMUTEX, SQLITE_OPEN_FULLMUTEX, SQLITE_OPEN_SHAREDCACHE, SQLITE_OPEN_PRIVATECACHE, and/or SQLITE_OPEN_URI flags:

SQLITE_OPEN_READONLY
     The database is opened in read-only mode. If the database does not already exist, an error is returned.

SQLITE_OPEN_READWRITE
     The database is opened for reading and writing if possible, or reading only if the file is write protected by the operating system. In either case the database must already exist, otherwise an error is returned.

SQLITE_OPEN_READWRITE | SQLITE_OPEN_CREATE
     The database is opened for reading and writing, and is created if it does not already exist. This is the behavior that is always used for sqlite3_open() and sqlite3_open16().

For convenience, here's also a Python 3.4+ function for converting a regular path to an URI usable by sqlite.connect():

import pathlib
import urllib.parse

def _path_to_uri(path):
    path = pathlib.Path(path)
    if path.is_absolute():
        return path.as_uri()
    return 'file:' + urllib.parse.quote(path.as_posix(), safe=':/')


问:
Looping never happens while the condition is never being satisfied?

Thanks for 000 suggested ans, but im still a newbie, would like to know the concept behind this result.         Anyone can make explicit?

```<code>0hi
3hello
3world
</code>```

instead of

```<code>0hi
0hello
0world
</code>```

(assumption: num is never be ++ as the value is 0.)

```<code>application.args=hi hello world

public static void main (String[] args){
    int num;
    num=0;

    for (String s:args) {
        System.out.println(num+s);
        for(num=0;2>=num;num++);
    }

}
</code>```

答:
If you want to print all arguments and number with it then modify your loop like

```<code>for (String s:args){
System.out.println(num + " " + s);
num++;  // don't write this if you want 0 as the number every time
}
</code>```

Edit
If you want to know why num in your code is incremented to 3 then

the control first come to for(String s: args)

Then it copies first value (value at 0 index) of args into s

Then it hits System.out.println(num+s); which print value of num which is still zero and value of s

Now for(num=0;2>=num;num++); it will increment num until num ≤= 2 so after the for statement execute your num value becomes 3

Then it goes for second iteration of outer loop copies second value of args into s

Then print num(which is 3) along with s and this will be repeated until all values in args are not processed

Body:
Thanks for 000 suggested ans, but im still a newbie, would like to know the concept behind this result.         Anyone can make explicit?

0hi
3hello
3world

instead of

0hi
0hello
0world

(assumption: num is never be ++ as the value is 0.)

application.args=hi hello world

public static void main (String[] args){
    int num;
    num=0;

    for (String s:args) {
        System.out.println(num+s);
        for(num=0;2>=num;num++);
    }

}

Body:
If you want to print all arguments and number with it then modify your loop like

for (String s:args){
System.out.println(num + " " + s);
num++;  // don't write this if you want 0 as the number every time
}

Edit
If you want to know why num in your code is incremented to 3 then

the control first come to for(String s: args)

Then it copies first value (value at 0 index) of args into s

Then it hits System.out.println(num+s); which print value of num which is still zero and value of s

Now for(num=0;2>=num;num++); it will increment num until num ≤= 2 so after the for statement execute your num value becomes 3

Then it goes for second iteration of outer loop copies second value of args into s

Then print num(which is 3) along with s and this will be repeated until all values in args are not processed


问:
Setting Authorization Header to .Net Web Service Client
I know this has been asked a hundred times before, but I just can't get this working.  I have a .Net web service client that needs to connect to an external web service that does not return 401 challenge response.  I have to send the authentication header on the first call.  I have overridden the GetWebRequest method of the generated proxy class by creating a partial class in another file.  I have also added the method to the generated file to see if that makes a difference, but the code just does not get called.  This was originally a .Net 3.5 Web Service Project created in VS 2013, but I have tried changing the target framework to 4.0, 4.5 e.t.c. and that does not have any effect.

The code I am using:

```<code>[System.Web.Services.WebServiceBindingAttribute(Name = "WSLDSD03_v1_webService_ValidationTicketCreation_Binder", Namespace = "http://llvap002d/WSLDSD03.v1.webService:ValidationTicketCreation")]
public partial class WSLDSD03_v1_webService_ValidationTicketCreation_Binder : System.Web.Services.Protocols.SoapHttpClientProtocol
{
    protected override WebRequest GetWebRequest(Uri uri)
    {
        var request = base.GetWebRequest(uri);

        string WSUID = ConfigurationManager.AppSettings["WSUID"];
        string WSPWD = ConfigurationManager.AppSettings["WSPWD"];
        string encoded = Convert.ToBase64String(System.Text.Encoding.ASCII.GetBytes(WSUID + ":" + WSPWD));

        request.Headers.Add("Authorization", "Basic " + encoded);

        return request;
    }
}
</code>```

Update: I have since found that after a clean solution and rebuild the method does in fact get called if I move it into the generated class.  It is the partial class in a separate file that appears to be the problem.

答: It turned out to be a simple coding error.  I failed to notice that the namespace in the generated proxy file was like MyProject.WebReference, but in my separate file I used the main project namespace.</p>

Body:
I know this has been asked a hundred times before, but I just can't get this working.  I have a .Net web service client that needs to connect to an external web service that does not return 401 challenge response.  I have to send the authentication header on the first call.  I have overridden the GetWebRequest method of the generated proxy class by creating a partial class in another file.  I have also added the method to the generated file to see if that makes a difference, but the code just does not get called.  This was originally a .Net 3.5 Web Service Project created in VS 2013, but I have tried changing the target framework to 4.0, 4.5 e.t.c. and that does not have any effect.

The code I am using:

[System.Web.Services.WebServiceBindingAttribute(Name = "WSLDSD03_v1_webService_ValidationTicketCreation_Binder", Namespace = "http://llvap002d/WSLDSD03.v1.webService:ValidationTicketCreation")]
public partial class WSLDSD03_v1_webService_ValidationTicketCreation_Binder : System.Web.Services.Protocols.SoapHttpClientProtocol
{
    protected override WebRequest GetWebRequest(Uri uri)
    {
        var request = base.GetWebRequest(uri);

        string WSUID = ConfigurationManager.AppSettings["WSUID"];
        string WSPWD = ConfigurationManager.AppSettings["WSPWD"];
        string encoded = Convert.ToBase64String(System.Text.Encoding.ASCII.GetBytes(WSUID + ":" + WSPWD));

        request.Headers.Add("Authorization", "Basic " + encoded);

        return request;
    }
}

Update: I have since found that after a clean solution and rebuild the method does in fact get called if I move it into the generated class.  It is the partial class in a separate file that appears to be the problem.


问:
Roku - ButtonGroup advance focus with left and right keys
I am pretty new to Roku world. I smell like its a very simple and straight forward question, but was not able to figure out any solutions. Any help would be much appreciated.

I was trying to create a sample application which includes three button in the UI. So, I chose ButttonGroup to do this usecase.

```<code><ButtonGroup id="btnGroup" layoutDirection="horiz"
                    visible="true" translation="[90,601]"
                    itemSpacings="[20,20]" minWidth="240"
                    maxWidth="240" buttonHeight="80">

                <Button id="button1" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg"/>

                <Button id="button2" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg:"/>

                <Button id="button3" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg:"/>
        </ButtonGroup>
</code>```

The thing is that i am able to advance through this buttons with "up" and "down" key of the remote, where i actually need this to be done with "left" and "right" key.

As i have set the layoutDirection value to horiz, i thought the advance and reverse key would automatically changes to "right" and "left" respectively. Doesn't seems like its working as expected. Am i missing something here? Please help.

答:
I have made this possible by using LayoutGroup instead of ButtonGroup and also with the help of OnKeyEvent function.

Not sure whether its the right way of doing.

Please provide best solutions, if possible.

Body:
I am pretty new to Roku world. I smell like its a very simple and straight forward question, but was not able to figure out any solutions. Any help would be much appreciated.

I was trying to create a sample application which includes three button in the UI. So, I chose ButttonGroup to do this usecase.

<ButtonGroup id="btnGroup" layoutDirection="horiz"
                    visible="true" translation="[90,601]"
                    itemSpacings="[20,20]" minWidth="240"
                    maxWidth="240" buttonHeight="80">

                <Button id="button1" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg"/>

                <Button id="button2" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg:"/>

                <Button id="button3" text="" iconUri="" focusedIconUri=""
                        focusFootprintBitmapUri="pkg:"
                        focusBitmapUri="pkg:"/>
        </ButtonGroup>

The thing is that i am able to advance through this buttons with "up" and "down" key of the remote, where i actually need this to be done with "left" and "right" key.

As i have set the layoutDirection value to horiz, i thought the advance and reverse key would automatically changes to "right" and "left" respectively. Doesn't seems like its working as expected. Am i missing something here? Please help.


问:
Django pass variables to form_class
I am trying to figure out how to access fields from a Model that is used as a ForeignKey within the Model that the forms are querying.

Each Room has a form where the user selects a Layout from a dynamic list of possible Layout objects.

1—The HTML forms/room/update/layouts.html

```<code><form class="layouts__form form-horizontal" action="" method="post" enctype="multipart/form-data">

    <fieldset class="form__options">

        {% csrf_token %}
        {% for field in form.layout %}
            <div class="layouts__layout">
                {{ field.tag }}

                {{ field.choice_label }}

                <label for="value_{{ forloop.counter0 }}">
                    <div class="layouts__layout__thumbnail layouts__layout__thumbnail--{{ field.choice_label }}" style="background-image: url('### (I WOULD LIKE TO LOAD 'Layout.thumbnail' HERE) ###');"></div>
                </label>
            </div>
        {% endfor %}
        <div class="form__submit">
            <button type="submit">Submit</button>
        </div>

    </fieldset>

</form>
</code>```

2—The form is being called by this in views.py:

```<code>class RoomLayoutView(UpdateView):
    model = Room
    form_class = RoomLayoutForm
    template_name = 'forms/room/update/layouts.html'
</code>```

3—Which is being created by this in forms.py:

```<code>class RoomLayoutForm(forms.ModelForm):
    layout = forms.ModelChoiceField(
             widget=forms.RadioSelect(attrs={'type': 'radio', 'id': 'value',}),
             queryset=Layout.objects.all(),
             required=False, empty_label=None)

    class Meta:
        model = Room
        fields = ['layout']
</code>```

4—Which uses the Room model from:

```<code>class Room(models.Model):
    title = models.CharField(max_length=200, blank=True)
    layout = models.ForeignKey(Layout, related_name='template_selected', blank=True, null=True)

    def __str__(self):
        return self.title
</code>```

5—Which takes one of the Layout models as a ForeignKey defined here:

```<code>class Layout(models.Model):
    title = models.CharField(max_length=200)
    ...
    padding_top = models.IntegerField(blank=False, default=0)
    ...
    thumbnail = models.FileField(upload_to='layouts')
    created = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ('-title',)

    def __str__(self):
        return self.title
</code>```

I am trying to figure out how to access attributes from Layout model within the actual form. I would especially like to dynamically load the Layout.thumbnail or Layout.padding_top within the form at the top. I have tried at least 8 different methods and was unable to figure out a way to make this work. Any help would be really appreciated.

答:
As stated in this answer, you can access the current instance associated with the form like this in your template:

```<code>{{ form.instance }}
</code>```

So to access  the thumbnail or padding_top attributes of the linked layout:

```<code>{{ form.instance.layout.thumbnail }}
{{ form.instance.layout.padding_top }}
</code>```

Title: Django pass variables to form_class

Body:
I am trying to figure out how to access fields from a Model that is used as a ForeignKey within the Model that the forms are querying.

Each Room has a form where the user selects a Layout from a dynamic list of possible Layout objects.

1—The HTML forms/room/update/layouts.html

<form class="layouts__form form-horizontal" action="" method="post" enctype="multipart/form-data">

    <fieldset class="form__options">

        {% csrf_token %}
        {% for field in form.layout %}

                {{ field.tag }}

                {{ field.choice_label }}

        {% endfor %}

            <button type="submit">Submit</button>

    </fieldset>

</form>

2—The form is being called by this in views.py:

class RoomLayoutView(UpdateView):
    model = Room
    form_class = RoomLayoutForm
    template_name = 'forms/room/update/layouts.html'

3—Which is being created by this in forms.py:

class RoomLayoutForm(forms.ModelForm):
    layout = forms.ModelChoiceField(
             widget=forms.RadioSelect(attrs={'type': 'radio', 'id': 'value',}),
             queryset=Layout.objects.all(),
             required=False, empty_label=None)

    class Meta:
        model = Room
        fields = ['layout']

4—Which uses the Room model from:

class Room(models.Model):
    title = models.CharField(max_length=200, blank=True)
    layout = models.ForeignKey(Layout, related_name='template_selected', blank=True, null=True)

    def __str__(self):
        return self.title

5—Which takes one of the Layout models as a ForeignKey defined here:

class Layout(models.Model):
    title = models.CharField(max_length=200)
    ...
    padding_top = models.IntegerField(blank=False, default=0)
    ...
    thumbnail = models.FileField(upload_to='layouts')
    created = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ('-title',)

    def __str__(self):
        return self.title

I am trying to figure out how to access attributes from Layout model within the actual form. I would especially like to dynamically load the Layout.thumbnail or Layout.padding_top within the form at the top. I have tried at least 8 different methods and was unable to figure out a way to make this work. Any help would be really appreciated.

Body:
As stated in this answer, you can access the current instance associated with the form like this in your template:

{{ form.instance }}

So to access  the thumbnail or padding_top attributes of the linked layout:

{{ form.instance.layout.thumbnail }}
{{ form.instance.layout.padding_top }}


问:
vee-validate error object - _vm.errors is undefined
This is my .vue component file in which I wasn't to use Vue.use() to install vee-validate validation package. The module, as mentioned in the docs, will inject an errors object to the data object.

But I do get the error _vm.errors is undefined. I'm not sure if I'm instantiating it properly.

Also, will import Vue from 'Vue' and Vue.use(VeeValidate) "use" vee-validate for only this component?(which is what I want it to do).

```<code><template>
<input class="form-control" name="name" placeholder="Name" type="text" v-model="player.name" v-validate data-vv-rules="alpha|min:2|max:50" :class="{'input': true, 'is-danger': errors.has('name') }">
</template>

<script>
import Vue from 'Vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

export default {
  data() {
    return {
      // errors: '',
      showForm: false,
      player: null
    }
  }
}
</script>
</code>```

答:
I had a sort alike issue but I am using these versions:

"vee-validate": "^2.0.0-rc.21",
"vue": "^2.5.2",

and in that case you can access the errors collection using: this.$validator.error

see specs off vee-validate:

http://vee-validate.logaretm.com/api.html#error-bag (404!)

NEW LINK:
http://vee-validate.logaretm.com/v2/api/errorbag.html

scroll down and you see this:

Validator

The validator is injected to the Vue instance as $validator automatically. However it is also a standalone class and can be used separately for programmatically validating values. The constructor can optionally take an object to map each field name to a set of validations.

Body:
This is my .vue component file in which I wasn't to use Vue.use() to install vee-validate validation package. The module, as mentioned in the docs, will inject an errors object to the data object.

But I do get the error _vm.errors is undefined. I'm not sure if I'm instantiating it properly.

Also, will import Vue from 'Vue' and Vue.use(VeeValidate) "use" vee-validate for only this component?(which is what I want it to do).

<template>
<input class="form-control" name="name" placeholder="Name" type="text" v-model="player.name" v-validate data-vv-rules="alpha|min:2|max:50" :class="{'input': true, 'is-danger': errors.has('name') }">
</template>

ContentLicense: CC BY-SA 4.0


问:
Move Chat bubble to right
I am trying to create a chat window from the reference
https://bootsnipp.com/snippets/featured/open-in-chat-popup-box-chat-popup
(a big thanks to Gurdeep Osahan for making this open to everyone).
I am trying to build a communication between Client and Vendor.
I want the to be aligned on left, which is already there so no efforts on that, and vendor on the right, which is creating headache for me.I have no idea from where to start. I tried "pull-right", but everything messes up on that .I am completely new to UI design. Any help/suggestions to proceed will be very helpful. I have attached the link here.
JSFiddle

Edit 1:
I thing I couldn't explain my question correctly.
I want the To and From inside the div to be on different side.

  $(function(){
$("#addClass").click(function () {

          $('#qnimate').addClass('popup-box-on');
            });

            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })```
<pre class="snippet-code-css lang-css prettyprint-override"><code>
.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}</code>```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 Open in chat

 Vendor

                <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

                </button>

Email Chat

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"></button>

                October 8th, 2015

                    Client

                    Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?

                    3.36 PM

                October 9th, 2015

                    Vendor

                    All Good Bro. How are you?

                    3.36 PM

        <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>

            <button class="bg_none"> </button>
            <button class="bg_none pull-right"> </button>

```

答:
Ok, trying to understand the question was challenging but I think I have an example of what you are trying to achieve. It's not something you can just change with a Bootstrap class, so I created a new class called .right-msg and added it on the vendor's block of code.

Then, using this class you can override the left styles with the opposites for the right.

Example:

  $(function(){
$("#addClass").click(function () {

          $('#qnimate').addClass('popup-box-on');
            });

            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })```
<pre class="snippet-code-css lang-css prettyprint-override"><code>
.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.popup-messages  .right-msg .direct-chat-img {
  float: right!important;
  }

.popup-messages .right-msg .direct-chat-text {
  margin: 5px 50px 0 0;
}

.popup-messages .right-msg .direct-chat-text::before {
  border-width: 0;
}

.popup-messages .right-msg .direct-chat-text::after {
  right: auto;
  left: 100%;
  border-color: transparent transparent transparent #dfece7;
}

.popup-messages .right-msg .direct-chat-name {
  margin: 0 49px 0 0 !important;
  float: right;
}

.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #dfece7 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}</code>```

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  Open in chat

 Vendor

                <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

                </button>

Email Chat

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"></button>

                October 8th, 2015

                    Client

                    Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?

                    3.36 PM

                October 9th, 2015

                    Vendor

                    All Good Bro. How are you?

                    3.36 PM

        <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>

            <button class="bg_none"> </button>
            <button class="bg_none pull-right"> </button>

```

Title: Move Chat bubble to right

Body:
I am trying to create a chat window from the reference
https://bootsnipp.com/snippets/featured/open-in-chat-popup-box-chat-popup
(a big thanks to Gurdeep Osahan for making this open to everyone).
I am trying to build a communication between Client and Vendor.
I want the to be aligned on left, which is already there so no efforts on that, and vendor on the right, which is creating headache for me.I have no idea from where to start. I tried "pull-right", but everything messes up on that .I am completely new to UI design. Any help/suggestions to proceed will be very helpful. I have attached the link here.
JSFiddle

Edit 1:
I thing I couldn't explain my question correctly.
I want the To and From inside the div to be on different side.

  $(function(){
$("#addClass").click(function () {

          $('#qnimate').addClass('popup-box-on');
            });

            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })

.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 Open in chat

 Vendor

                <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">

                </button>

Email Chat

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"></button>

                October 8th, 2015

                    Client

                    Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?

                    3.36 PM

                October 9th, 2015

                    Vendor

                    All Good Bro. How are you?

                    3.36 PM

        <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>

            <button class="bg_none"> </button>
            <button class="bg_none pull-right"> </button>

Body:
Ok, trying to understand the question was challenging but I think I have an example of what you are trying to achieve. It's not something you can just change with a Bootstrap class, so I created a new class called .right-msg and added it on the vendor's block of code.

Then, using this class you can override the left styles with the opposites for the right.

Example:

  $(function(){
$("#addClass").click(function () {

          $('#qnimate').addClass('popup-box-on');
            });

            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })

.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    /*border: 1px solid #7b7b7b;*/
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 40px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
 margin: 0 8px 0 0;
 vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
 padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
 color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 49px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-nameTo {
 font-size: 15px;
 font-weight: 600;
 margin: 0 0 0 150px !important;
 color: #fff;
 opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    /*border: 1px solid #fff;*/
 background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.popup-messages  .right-msg .direct-chat-img {
  float: right!important;
  }

.popup-messages .right-msg .direct-chat-text {
  margin: 5px 50px 0 0;
}

.popup-messages .right-msg .direct-chat-text::before {
  border-width: 0;
}

.popup-messages .right-msg .direct-chat-text::after {
  right: auto;
  left: 100%;
  border-color: transparent transparent transparent #dfece7;
}

.popup-messages .right-msg .direct-chat-name {
  margin: 0 49px 0 0 !important;
  float: right;
}

.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
 background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
 background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
 bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
  display: inline;
   z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #dfece7 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
 <div class="popup-box chat-popup" id="qnimate">
    <div class="popup-head">
        <div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Vendor</div>
        <div class="popup-head-right pull-right">
            <div class="btn-group">
                <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
                    <i class="glyphicon glyphicon-cog"></i>
                </button>
                <ul role="menu" class="dropdown-menu pull-right">
                    <li><a href="#">Email Chat</a></li>
                </ul>
            </div>

            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
        </div>
    </div>
    <div class="popup-messages">

        <div class="direct-chat-messages">

            <div class="chat-box-single-line">
                <abbr class="timestamp">October 8th, 2015</abbr>
            </div>
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg">
                <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name pull-left">Client</span>
                </div>
                <!-- /.direct-chat-info -->
                <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                <div class="direct-chat-text">
                    Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?Hey bro, how’s everything going ?
                </div>
                <div class="direct-chat-info clearfix">
                    <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                </div>
                <!-- /.direct-chat-text -->
            </div>
            <!-- /.direct-chat-msg -->

            <div class="chat-box-single-line">
                <abbr class="timestamp">October 9th, 2015</abbr>
            </div>
            <!-- Message. Default to the left -->
            <div class="direct-chat-msg right-msg">
                <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name">Vendor</span>
                </div>
                <!-- /.direct-chat-info -->
                <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                <div class="direct-chat-text">
                    All Good Bro. How are you?
                </div>
                <div class="direct-chat-info clearfix">
                    <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                </div>
                <!-- /.direct-chat-text -->
            </div>
            <!-- /.direct-chat-msg -->
        </div>
    </div>
    <div class="popup-messages-footer">
        <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
        <div class="btn-footer">
            <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
            <button class="bg_none pull-right"><i class="glyphicon glyphicon-play"></i> </button>
        </div>
    </div>
</div>


问:
WCF error: Could not find default endpoint
I implemented a WCF web service and I want to try it on a Console client app. I added a reference to the service but i get this error:

System.InvalidOperationException: 'Could not find default endpoint
  element that references contract 'WorkWS.IService1' in the
  ServiceModel client configuration section. This might be because no
  configuration file was found for your application, or because no
  endpoint element matching this contract could be found in the client
  element.'

UPDATED ALL Web.config
This is part of my Web.config file:

```<code> <?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <section name="hibernate-configuration" type="NHibernate.Cfg.ConfigurationSectionHandler,NHibernate" />
  </configSections>
  <hibernate-configuration xmlns="urn:nhibernate-configuration-2.2">
    <session-factory>
      <property name="connection.provider">NHibernate.Connection.DriverConnectionProvider</property>
      <property name="dialect">NHibernate.Dialect.MsSql2012Dialect</property>
      <property name="connection.connection_string">Data Source=.\SQLEXPRESS;;Initial Catalog=FirstProject; User Id = aykut ; password= ***</property>
      <property name="show_sql">true</property>
    </session-factory>
  </hibernate-configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
    <add key="HBM_ASSEMBLY" value="BusinessEntities" />
  </appSettings>
  <system.web>

    <compilation debug="true" targetFramework="4.6.1" />
    <httpRuntime targetFramework="4.6.1" />

  </system.web>

  <system.serviceModel>
    <services>
      <service name="WebService.Service1">
        <endpoint address="" behaviorConfiguration="webHttpBehavior" binding="webHttpBinding" bindingConfiguration="webHttpBindingWithJsonP" contract="WebService.IService1" />
      </service>
    </services>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>

<behaviors>
  <endpointBehaviors>
    <behavior name="webHttpBehavior">
      <webHttp />
    </behavior>
  </endpointBehaviors>

  <serviceBehaviors>
    <behavior>

      <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />

      <serviceDebug includeExceptionDetailInFaults="true" />
    </behavior>
  </serviceBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
</code>```

```<code><security>
  <requestFiltering>
    <requestLimits maxAllowedContentLength="1073741824" />
  </requestFiltering>
</security>
<modules runAllManagedModulesForAllRequests="true" />
<!--
    To browse web app root directory during debugging, set the value below to true.
    Set to false before deployment to avoid disclosing web app folder information.
  -->
<directoryBrowse enabled="true" />
</code>```

```<code><assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

  <dependentAssembly>

    <assemblyIdentity name="Iesi.Collections" publicKeyToken="aa95f207798dfdb4" culture="neutral" />

    <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />

  </dependentAssembly>

</assemblyBinding>
</code>```

And that is my Tester namespace WStester2:

```<code>class Program
{
    static void Main(string[] args)
    {
        Service1Client client = new Service1Client();
        Customer c = new Customer();
        c.Name = "dsfsfsdf";
        c.SurName="asdass";
        c.Age = 12;
        client.CreateCustomer(c);
    }
}
</code>```

And this is my WCF web service namespace : WebService:

```<code>[ServiceContract]
public interface IService1
{
    [OperationContract]
    Customer CreateCustomer(Customer customer);
}
</code>```

I think I should organize my app.config on Tester but I don't know how it can be done, so default app.config file is this:

```<code>   <configuration>
    <startup>
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.1" />
    </startup>
   </configuration>
</code>```

Thanx for advice guys.

答:
I organize to my app.config file and solve the problem
And Sure that WorkWS is my reference name

```<code><system.serviceModel>
  <bindings>
    <webHttpBinding>
      <binding name="webHttpBindingWithJsonP" />
    </webHttpBinding>
  </bindings>
  <client>
    <endpoint address="http://*MyIpaddress*/Service1.svc"
      binding="webHttpBinding" bindingConfiguration="webHttpBindingWithJsonP"
      contract="WorkWS.IService1" name="webHttpBindingWithJsonP" />
  </client>
</system.serviceModel>
</code>```

Body:
I implemented a WCF web service and I want to try it on a Console client app. I added a reference to the service but i get this error:

System.InvalidOperationException: 'Could not find default endpoint
  element that references contract 'WorkWS.IService1' in the
  ServiceModel client configuration section. This might be because no
  configuration file was found for your application, or because no
  endpoint element matching this contract could be found in the client
  element.'

UPDATED ALL Web.config
This is part of my Web.config file:

 <?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>

  </configSections>
  <hibernate-configuration xmlns="urn:nhibernate-configuration-2.2">
    <session-factory>
      <property name="connection.provider">NHibernate.Connection.DriverConnectionProvider</property>
      <property name="dialect">NHibernate.Dialect.MsSql2012Dialect</property>
      <property name="connection.connection_string">Data Source=.\SQLEXPRESS;;Initial Catalog=FirstProject; User Id = aykut ; password= ***</property>
      <property name="show_sql">true</property>
    </session-factory>
  </hibernate-configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
    <add key="HBM_ASSEMBLY" value="BusinessEntities" />
  </appSettings>
  <system.web>

    <compilation debug="true" targetFramework="4.6.1" />
    <httpRuntime targetFramework="4.6.1" />

  </system.web>

  <system.serviceModel>
    <services>
      <service name="WebService.Service1">
        <endpoint address="" behaviorConfiguration="webHttpBehavior" binding="webHttpBinding" bindingConfiguration="webHttpBindingWithJsonP" contract="WebService.IService1" />
      </service>
    </services>
    <bindings>
      <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>

<behaviors>
  <endpointBehaviors>
    <behavior name="webHttpBehavior">
      <webHttp />
    </behavior>
  </endpointBehaviors>

  <serviceBehaviors>
    <behavior>

      <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />

      <serviceDebug includeExceptionDetailInFaults="true" />
    </behavior>
  </serviceBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />

<security>
  <requestFiltering>
    <requestLimits maxAllowedContentLength="1073741824" />
  </requestFiltering>
</security>
<modules runAllManagedModulesForAllRequests="true" />

<directoryBrowse enabled="true" />

<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

  <dependentAssembly>

    <assemblyIdentity name="Iesi.Collections" publicKeyToken="aa95f207798dfdb4" culture="neutral" />

    <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />

  </dependentAssembly>

</assemblyBinding>

And that is my Tester namespace WStester2:

class Program
{
    static void Main(string[] args)
    {
        Service1Client client = new Service1Client();
        Customer c = new Customer();
        c.Name = "dsfsfsdf";
        c.SurName="asdass";
        c.Age = 12;
        client.CreateCustomer(c);
    }
}

And this is my WCF web service namespace : WebService:

[ServiceContract]
public interface IService1
{
    [OperationContract]
    Customer CreateCustomer(Customer customer);
}

I think I should organize my app.config on Tester but I don't know how it can be done, so default app.config file is this:

   <configuration>
    <startup>
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.1" />
    </startup>
   </configuration>

Thanx for advice guys.

Body:
I organize to my app.config file and solve the problem
And Sure that WorkWS is my reference name

<system.serviceModel>
  <bindings>
    <webHttpBinding>
      <binding name="webHttpBindingWithJsonP" />
    </webHttpBinding>
  </bindings>
  <client>
    <endpoint address="http://*MyIpaddress*/Service1.svc"
      binding="webHttpBinding" bindingConfiguration="webHttpBindingWithJsonP"
      contract="WorkWS.IService1" name="webHttpBindingWithJsonP" />
  </client>
</system.serviceModel>


问:
Generating random numbers with Swift
I need to generate a random number.

It appears the arc4random function no longer exists as well as the arc4random_uniform function.

The options I have are arc4random_stir(),   arc4random_buf(UnsafeMutablePointer<Void>, Int), and   arc4random_addrandom(UnsafeMutablePointer<UInt8>, Int32).

I can't find any docs on the functions and no comments in the header files give hints.

答:
This is how I get a random number between 2 int's!

```<code>func randomNumber(MIN: Int, MAX: Int)-> Int{
    var list : [Int] = []
    for i in MIN...MAX {
        list.append(i)
    }
    return list[Int(arc4random_uniform(UInt32(list.count)))]
}
</code>```

usage:

```<code>print("My Random Number is: \(randomNumber(MIN:-10,MAX:10))")
</code>```

Title: Generating random numbers with Swift

Body:
This is how I get a random number between 2 int's!

func randomNumber(MIN: Int, MAX: Int)-> Int{
    var list : [Int] = []
    for i in MIN...MAX {
        list.append(i)
    }
    return list[Int(arc4random_uniform(UInt32(list.count)))]
}

usage:

print("My Random Number is: \(randomNumber(MIN:-10,MAX:10))")


问:
Is there a 3D scene format specific or well-suited for raytracing?
I'm working on a raytracer and I don't want reinvent the wheel when it comes to file formats for 3D scenes. I also want to be able to test my program with scenes made by others. I'm a programmer not a 3D modeller.

Is there a 3D scene format specific or well-suited for raytracing?

答:
I don't believe there's any particular scene format in use, because different modellers require different parameters, and setup directives, etc.

The WaveFront .obj format is however very popular for describing individual objects within a scene, and many files in that format are available on the internet.

ContentLicense: CC BY-SA 2.5


问:
Angular dynamically inject specific component
I have 3 components, and I want to inject one of them into another components html based on the values received from a Get request:

Comp1, Comp2, Comp3

the current way is less than ideal, especially when 3 components may soon become 20

```<code>  <Comp1 *ngIf="data.value === 'comp_1'"></Comp1>
  <Comp2 *ngIf="data.value === 'comp_2'"></Comp2>
  <Comp3 *ngIf="data.value === 'comp_3'"></Comp3>
</code>```

With React I can easily inject pieces of JSX via a function call, but I'm not sure on the best practices for doing this in Angular

答:
Here is the NgComponentOutlet usage example. Let say you have two components:

```<code>@Component({
  selector: 'dynamic-component-one',
  template: `<p>I'm the Component 1</p>`
})
export class FirstDynamicComponent {}

@Component({
  selector: 'dynamic-component-two',
  template: `<p>I'm the Component 2</p>`
})
export class SecondDynamicComponent {}
</code>```

The component below loads the FirstDynamicComponent by default but replaces it with the SecondDynamicComponent if you click a button:

```<code>@Component({
  selector: 'my-app',
  template: `
    <button (click)="switchComponents()">Swith Components:</button>
    <ng-container *ngComponentOutlet="content"></ng-container>
  `
})
export class AppComponent  {
  comp1 = FirstDynamicComponent;
  comp2 = SecondDynamicComponent;

  content = this.comp1;

  switchComponents() {
    this.content = this.comp2;
  }
}
</code>```

Don't forget to register both dynamic components in their module's entryComponents section:

```<code>@NgModule({
  imports: [...],
  declarations: [
      AppComponent,
      FirstDynamicComponent,
      SecondDynamicComponent
  ],
  entryComponents: [
      FirstDynamicComponent,
      SecondDynamicComponent
  ]
})
export class AppModule { }
</code>```

StackBlitz example

Body:
I have 3 components, and I want to inject one of them into another components html based on the values received from a Get request:

Comp1, Comp2, Comp3

the current way is less than ideal, especially when 3 components may soon become 20

  <Comp1 *ngIf="data.value === 'comp_1'"></Comp1>
  <Comp2 *ngIf="data.value === 'comp_2'"></Comp2>
  <Comp3 *ngIf="data.value === 'comp_3'"></Comp3>

With React I can easily inject pieces of JSX via a function call, but I'm not sure on the best practices for doing this in Angular

Body:
Here is the NgComponentOutlet usage example. Let say you have two components:

@Component({
  selector: 'dynamic-component-one',
  template: `<p>I'm the Component 1</p>`
})
export class FirstDynamicComponent {}

@Component({
  selector: 'dynamic-component-two',
  template: `<p>I'm the Component 2</p>`
})
export class SecondDynamicComponent {}

The component below loads the FirstDynamicComponent by default but replaces it with the SecondDynamicComponent if you click a button:

@Component({
  selector: 'my-app',
  template: `
    <button (click)="switchComponents()">Swith Components:</button>
    <ng-container *ngComponentOutlet="content"></ng-container>
  `
})
export class AppComponent  {
  comp1 = FirstDynamicComponent;
  comp2 = SecondDynamicComponent;

  content = this.comp1;

  switchComponents() {
    this.content = this.comp2;
  }
}

Don't forget to register both dynamic components in their module's entryComponents section:

@NgModule({
  imports: [...],
  declarations: [
      AppComponent,
      FirstDynamicComponent,
      SecondDynamicComponent
  ],
  entryComponents: [
      FirstDynamicComponent,
      SecondDynamicComponent
  ]
})
export class AppModule { }

StackBlitz example


问:
How to Convert Jupyter Notebook to Wordpress suitable HTML
This week I made a Jupyter notebook that would be a great post for my blog. I already found that you can export this notebook to a simplified HTML format that can be embedded on a webpage with this command:

```<code>jupyter nbconvert mynotebook.ipynb --to html --template basic
</code>```

However, I would like to change some simple things. For example: every title now end with the "end of line character", and there is no clear difference between input and output.

On the NBConvert documentation page of Jupyter I can't find anything about changing templates (https://ipython.org/ipython-doc/3/notebook/nbconvert.html). They only say

"IPython provides a few templates for some output formats, and these
  can be specified via an additional --template argument."

Is it possible to specify your own template? And where can I find the "basic" template that I want to adjust?

答:
I’ve make a notebook Wordpress plugin that will work for any URL where he notebook is hosted! I’ll add it publicly to Wordpress soon.

https://www.andrewchallis.co.uk/portfolio/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/

It’s used the same way as the gist plugin except it is called nbconvert

[nbconvert url=“Www.example.co.uk/path/to/some/notebook.ipynb”

Body:
This week I made a Jupyter notebook that would be a great post for my blog. I already found that you can export this notebook to a simplified HTML format that can be embedded on a webpage with this command:

jupyter nbconvert mynotebook.ipynb --to html --template basic

However, I would like to change some simple things. For example: every title now end with the "end of line character", and there is no clear difference between input and output.

On the NBConvert documentation page of Jupyter I can't find anything about changing templates (https://ipython.org/ipython-doc/3/notebook/nbconvert.html). They only say

"IPython provides a few templates for some output formats, and these
  can be specified via an additional --template argument."

Is it possible to specify your own template? And where can I find the "basic" template that I want to adjust?


问:
Convert flat array to a delimited string to be saved in the database
What is the best method for converting a PHP array into a string?

I have the variable $type which is an array of types.

```<code>$type = $_POST[type];
</code>```

I want to store it as a single string in my database with each entry separated by | :

```<code>Sports|Festivals|Other
</code>```

答:
```<code>$data = array("asdcasdc","35353","asdca353sdc","sadcasdc","sadcasdc","asdcsdcsad");

$string_array = json_encode($data);
</code>```

now you can insert this $string_array value into Database

Body:
What is the best method for converting a PHP array into a string?

I have the variable $type which is an array of types.

$type = $_POST[type];

I want to store it as a single string in my database with each entry separated by | :

Sports|Festivals|Other

Body:
$data = array("asdcasdc","35353","asdca353sdc","sadcasdc","sadcasdc","asdcsdcsad");

$string_array = json_encode($data);

now you can insert this $string_array value into Database


问:
get current date time in yyyy-MM-dd hh.mm.ss format
I have an application which will ALWAYS be run in only one single time zone, so I do not need to worry about converting between time zones.  However, the datetime must always be printed out in the following format:

```<code>yyyy-MM-dd hh.mm.ss
</code>```

The code below fails to print the proper format:

```<code>public void setCreated(){
    DateTime now = new org.joda.time.DateTime();
    String pattern = "yyyy-MM-dd hh.mm.ss";
    created  = DateTime.parse(now.toString(), DateTimeFormat.forPattern(pattern));
    System.out.println("''''''''''''''''''''''''''' created is: "+created);
}
</code>```

The setCreated() method results in the following output:

```<code>"2013-12-16T20:06:18.672-08:00"
</code>```

How can I change the code in setCreated() so that it prints out the following instead:

```<code>"2013-12-16 20:06:18"
</code>```

答:
And now in Java 9, you can use this:</p>

```<code>LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd hh.mm.ss"));
</code>```

Body:
I have an application which will ALWAYS be run in only one single time zone, so I do not need to worry about converting between time zones.  However, the datetime must always be printed out in the following format:

yyyy-MM-dd hh.mm.ss

The code below fails to print the proper format:

public void setCreated(){
    DateTime now = new org.joda.time.DateTime();
    String pattern = "yyyy-MM-dd hh.mm.ss";
    created  = DateTime.parse(now.toString(), DateTimeFormat.forPattern(pattern));
    System.out.println("''''''''''''''''''''''''''' created is: "+created);
}

The setCreated() method results in the following output:

"2013-12-16T20:06:18.672-08:00"

How can I change the code in setCreated() so that it prints out the following instead:

"2013-12-16 20:06:18"

Body:
And now in Java 9, you can use this:

LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd hh.mm.ss"));