"Applied Rails for agile Web development" Wonderful Staff - Chapter 4

xiaoxiao2021-04-01  192

Chapter 4

Immediate

Instant gratification, INSTANT GRATIFICATION

Now let's write an extremely simple web application to verify that Rails has successfully settled on our machine. In this process, we will also briefly introduce the way of working in the Rails application.

4.1 Creating a New Application

4.1 Creating a New Application

After installing the Rails framework, you also got a new command line tool: rails. This tool can be used to construct each new Rails application.

Why do we need such a tool - I said, why not copy the most pleasant editor, start writing the application's code from the beginning? Hey ... we can do this, but Rails can change a lot of tricks behind the scenes, let us only need to make a minimum of configurations to run an application. In order for these tricks to take effect, Rails must be able to find various components in the application. As we will later (in Section 13.2, "Directory Structure" section, the original book 173) will see, which means we must create some fixed directory structure and put our code in Suitable place. Rails this command can help us create this directory structure and generate some standard Rails code.

Now let's create the first Rails application: Open the shell window and enter a place for the file system - you want to save the application directory structure where there is a place. In our example, we will create the project under a directory called Work. Therefore, we create an application called Demo in this directory. Here you have to add some care: If there is already a directory called Demo, Rails will ask if you want to overwrite the existing file.

Dave> CD Work

Work> Rails Demo

Create

Create App / APIS

CREATE APP / CONTROLLLERS

Create App / Helpers

:::::

Create log / development.log

CREATE log / test.log

WORK>

The above command creates a directory called Demo. Enter this directory listing all of its content (using the ls command in UNIX, using the dir command in Windows), you should see such a bunch of files and subdirectories:

Work> CD Demo

Demo> LS -P

Changelog App / DB / LOG / TEST /

Readme Components / DOC / PUBLIC / VENDOR /

Rakefile Config / LIB / SCRIPT /

Suddenly faced so many directories (there are also their files) may make you feel awful, but we don't have to pay attention to their existence. Now, we only need one of them, that is, the public directory.

As its name is implied, the public directory contains those files we want to expose to end users. The key file here is Dispatcher: Dispatch.cgi, Dispatch.fcgi, and Dispatch.rb. The dispenser is responsible for receiving the request from the user from the browser and boots these requests to program code in the application. These documents are important, but we don't need to touch them.

You will also see that there is a Script subdirectory in the Demo directory, where some tool scripts are stored, and we will use them during the development of applications. Now, we will use the script called Server, which will start a stand-alone Webrick [1] server, and our new Rails application will run. Then, before proceeding, let's start the application that I have written (or generated) just prepared (or generated) first. Demo> Ruby Script / Server

=> Rails Application Started on http: //

0.0.0

.0: 3000

[2005-02-26 09:16:43] Info Webrick

1.3.1

[2005-02-26 09:16:43] Info Ruby

1.8.2

(

2004-08-24

) [PowerPC-Darwin7.5.0]

[2005-02-26 09:16:43] Info Webrick :: httpserver-start: pid = 2836 port = 3000

As can be seen from the last line of starting the output information, we launched a web server on the 3000 port [2]. We can open your browser, access http: // localhost: 3000, you will see this application (Figure 4.1).

Figure 4.1 New Rails Application

We can make Webrick run in this command line window. After we write the application code later, as long as you visit in your browser, you will see the information about the command line window output. If you want to stop the running of Webrick, you can press the Ctrl-C button in the command line window.

Now, we have let the new app ran, but there is no code we write. Below, we have to change this situation.

4.2 Hello, Rails!

4.2 Hello, Rails!

Dave said: I have no way - I have to write a "Hello, World!" Program every time I have to try a new system. In Rails, this program will send our sincere greetings to your browser.

As we introduced in Chapter 2 ("Architecture of Rails Applications", RAILS is a MVC framework. Rails receives requests from the browser, interprect the request to find the appropriate controller, and then call the appropriate method in the controller. Then, the controller calls a specific view to display the result to the user. Good news is that rails has helped us to get most "pipeline code", which has been organically combined. Now, in order to write this simple "Hello, World!" Application, we need to write a controller and a view. We don't need to write a model because we don't need to handle any data. Now let's get started from the controller.

Just like new Rails applications, we can also create a controller with a script. This script name is called Generate, saved in the Script subdirectory of the Demo project. So, to create a controller named SAY, we only need to run this script in the Demo directory, pass the name of the controller into it [3]:

Demo> Ruby Script / Generate Controller Say

EXISTS APP / Controllers /

EXISTS APP / HELPERS /

Create App / Views / Say

EXISTS TEST / FUNCTIONAL /

Create App / Controllers / Say_Controller.rb

Create Test / Functional / Say_Controller_Test.rbcreate App / Helpers / Say_HELPER.RB

The script shows the files and directories they check, and the Ruby source code and directory it added. Now, we are interested in the Ruby source program that it creates, and the new directory.

We must first pay attention to the source code of the controller, which is located in the app / controllers / book_controller.rb file, let us take a look at this file:

Class SayController

end

It's hard to be small, isn't it? SayController is an empty class that inherits from ApplicationController, so it automatically owns all default controller behavior. Now we do it, we need to add some code to this controller to process user requests. What should these code do? Now nothing else - we only need an empty Action method. So, the next question is: What is the name of this method? The answer to this question is: We need to take a look at the way the Rails handles the request.

Rails and Request Urls

Rails and request URL

Like other web applications, a Rails app is associated with a URL in the user. When you point your browser to this URL, you start talking to this application, it generates a reply information for you.

However, the real situation is more complicated than this. Imagine our app to access by the following address: http: //pragprog.com/online/demo. WEB server to store this application

Figure 4.2 URL is mapped to the controller and an action

The path is quite smart, it knows: Once you see the online / demo in the path, you need to interact with our application. Anything behind this in the URL can not change this: Our application will be called. Subsequent path information will be passed to this application, the latter will use this information as the purpose of its own interior.

Rails will determine the name of the controller based on the path, and the Action name [4] that will be called inside the controller (Figure 4.2). In the path, the first part behind the application name is the controller name, the second part is the Action name (Figure 4.3).

Our First Action

Our first Action

Let's add an action called Hello to the SAY controller. The discussion from the previous section can be learned that if you create a Hello method in the SayController class, it means adding an action called Hello. But what should this method do? Now it doesn't need anything. Remember, the responsibility of the controller is to provide full information for the display of the view. In our first application, there is no information that requires a controller to provide, so an empty Action method is sufficient. Use your favorite editor to modify the SAY_CONTROLLLLER.RB file under the App / Controller directory, plus the Hello () method:

Class SayController

Def hello

end

end

Figure 4.3 Rails will request the orientation controller and action

Let us try to call it. Just find a browser window, access the following URL: http: // localhost: 3000 / Say / Hello. (Note: In the test environment, there is no application name in the path - we direct to the controller directly.) You will see a similar effect. Maybe some annoying, but this error is absolutely reasonable (except for the quirky path in the error message). We created a controller class and an action method, but did not tell Rails what to show - we still need a view. Remember the scene when we run the script to create a controller? That script helps us generate three files and a directory, this directory is the template file used to store the controller view. Here, we created a controller called SAY, so the view should be in the app / views / Say directory.

In order to complete this "Hello, World!" App, let's create a template. By default, Rails will look for template files with current Action. In our example, this means

We need to create a file called App / Views / Say / Hello.rhtml. (Why is .RHTML? We will explain later.) Now, we only put into basic HTML code.

Hello, Rails! </ Title></p> <p></ hEAD></p> <p><body></p> <p><H1> Hello from Rails! </ h1></p> <p></ body></p> <p></ html></p> <p>Save the Hello.Rhtml file, refresh the browser window, you should see a friendly greeting. Note that we can see the updated effect by restarting the application. In the development of the process, whenever you save the file, Rails will automatically integrate the modifications into the running application.</p> <p>So far, we add code in two files: We add an action in the controller and create a template to display the page on your browser. These files are located in advanced standard locations: controllers in the App / Controllers directory, views in their respective subdirectory in App / Views (Figure 4.4).</p> <p>MAKING IT DYNAIC</p> <p>Let it move</p> <p>So far, our Rails app is still quite old - it can only display a static page. In order to give it a point of mind, we let it display the current time while the page is displayed.</p> <p>In order to achieve this, we need to change the template file for the view - now it needs to include "time" in the form of a string. There were two problems in this time. First, how do we add dynamic content in the template? Second, where is the "time" information to display?</p> <p>Dynamic Content</p> <p>Dynamic content</p> <p>In Rails, there are two ways to create a dynamic template. One is to introduce this approach in Section 17.2 ("Builder Template", Page 329 of Section 17.2. The second way is to use here: embed the Ruby code into the template. This is also</p> <p>Figure 4.4 Standard location of the controller and view</p> <p>It is why we want to name the template file to hello.rhtml: .rhtml suffix tells Rails, need to expand the content of the file with the ERB system --ERB is to embed the Ruby code into the template file.</p> <p>Erb is a filter: into the .rhtml file, out of the converted content - in Rails, the output file is usually HTML format, but it can also be anything else. Ordinary content will go straight out, without any changes. However, the content between <% = and%> symbols will be considered as Ruby code execution, and the resulting results will be converted to a string and replace it to the location of the <% ...%> sequence in the file. For example, we add the following in Hello.rhtml: <UL></p> <p><li> addition: <% = 1 2%> </ li></p> <p><li> concatenchion: <% = "COW" "BOY"%> </ li></p> <p><li> time in one hour: <% = 1.Hour.from_now%> </ li></p> <p></ ul></p> <p>Refresh the browser, the template will generate the following HTML:</p> <p><ul></p> <p><li> addition: 3 </ li></p> <p><li> concatenation: cowboy </ li></p> <p><li> Time in One Hour: Sat Feb 26 18:33:15 CST 2005 </ li></p> <p></ ul></p> <p>Let development simpler</p> <p>You should have noticed what we have done during the development process. When we add code to the application, we don't need to restart the running application, and the newly modified content is automatically put into operation. And whenever we have made modifications, you can reflect it immediately in your browser. How is this going?</p> <p>This is because Webrk-based Rails distributors are quite smart. In development mode (the other two modes are test mode and production mode), whenever there is a new request, it automatically reloads the relevant source program. In this way, when we edit the application, the distributor will ensure that the recent modification results are running. This is a good thing for development.</p> <p>However, this flexibility is also cost: it will cause a short interval between "User Enter URL" and "Application Response" - this interval is the time of the distributor to reload files. In the development phase, this is worth paying; but after investing in real run, this is unacceptable. Therefore, this feature is disabled under product mode (see Chapter 22, "Deployment and Telescopic", and the original book is disabled.</p> <p>In the browser window, you will see the following:</p> <p>l Addition: 3</p> <p>l ConcateNation: Cowboy</p> <p>L Time in One Hour: Sat Feb 26 18:33:15 CST 2005</p> <p>In addition, in the .rhtml file, the content between <% and%> symbols (formerly no equal sign) will be regarded as the Ruby code execution, but the resulting results do not replace the output. What is really interesting is that this program can be used to mix with non-Ruby code. For example, we can write a "holiday version" Hello.rhtml.</p> <p><% 3.Times DO%></p> <p>Ho! <br /></p> <p><% end%></p> <p>Merry Christmas!</p> <p>Refresh again, you will hear the sleigh ringtone:</p> <p>Ho!</p> <p>Ho!</p> <p>Ho!</p> <p>Merry Christmas!</p> <p>Please pay attention: Whenever the Ruby loop is executed, the text will be sent to the output stream.</p> <p>We can combine both forms. In the following example, a loop is set to a variable, and the value of the variable is inserted into a piece of text:</p> <p><% 3.Downto (1) DO | count |%></p> <p><% = count%> ... <br /></p> <p><% end%></p> <p>LIFT OFF!</p> <p>This template will give the following content to your browser:</p> <p>3 ... <br /></p> <p>2 ... <br /></p> <p>1 ... <br /></p> <p>LIFT OFF!</p> <p>About ERB, there is another thing to explain: Many times, using the string generated by <% = ...%> will contain "<" symbols and "&" symbols, these two symbols are critical for HTML of. In order to prevent these symbols from messing pages (and to avoid potential security issues, see Chapter 21, "Protecting the Security of Rails Applications", the original book No. 427), you will want to transcode these characters. Rails has an auxiliary method h () for doing this. Most of the time, you will need to use this method when you replace the dynamic content to the HTML page.</p> <p>Email: <% = h ("Ann & Bill <frazers@isp.email>)%></p> <p>In this example, the H () method protects the special characters in the email address that will not disrupt the browser display - they will be transcoded as an HTML entity. Users will see "email: Ann & bill <frazers@isp.email>" in the browser - special characters are also displayed correctly.</p> <p>Adding the time</p> <p>Add time</p> <p>Our initial goal is to display the current time to the user. Now we already know how to display dynamic data in the app, the second question needs to be solved: Where can I get time?</p> <p>Our solution is to call Ruby's Time.Now () method - call directly in the Say.RHTML template.</p> <p><html></p> <p><HEAD></p> <p><title> Hello, Rails! </ Title></p> <p></ hEAD></p> <p><body></p> <p><h3> Hello from Rails! </ h3></p> <p><p></p> <p>The time is <% = time.now%></p> <p></ p></p> <p></ body></p> <p></ html></p> <p>This approach is available. As long as you access this page, the user will see the current time. This way is better for our small example. However, usually we will want to use another way: Place the "Get Time" logical in the controller, and the view only assumes the responsibility of displaying information. Therefore, we have to modify the action method in the controller, put the time value in an instance variable named @Time:</p> <p>Class SayController <ApplicationController</p> <p>Def hello</p> <p>@Time = Time.now</p> <p>end</p> <p>end</p> <p>In the.RHTML template, we output this instance variable to the user:</p> <p><html></p> <p><HEAD></p> <p><title> Hello, Rails! </ Title></p> <p></ hEAD></p> <p><body></p> <p><H1> Hello from Rails! </ h1></p> <p><p></p> <p>IT is now <% = @time%>.</p> <p></ p></p> <p></ body></p> <p></ html> Refresh the browser, we will see that the time is displayed (Figure 4.5). And you can see that whenever you click on the "Refresh" button of the browser, the time displayed on the page changes. It seems that we have created dynamic content.</p> <p>Why do we have to get time in the controller, then display it in the view? Is this not a trouble? good question. In this app, you certainly call time.now directly in the template ()</p> <p>Figure 4.5 "Hello, World!" With time display</p> <p>Joe ask ...</p> <p>How does the view get time?</p> <p>According to the previous introduction, we put the time information in the controller into an instance variable ,.RHTML file removes the current time from this instance variable and displays it to the user. However, the instance variable in the controller object is Private. So how do Erb takes out these private data and use it in the template?</p> <p>The answer is simple and some subtle. Rails uses some magic of Ruby, so that the instance variable in the controller object is injected into the template object. The result is that the view template can access any instance variables in the controller, as if it is the same as the instance variables accessed.</p> <p>Method; however, put this call to the controller will bring you benefits. For example, maybe we will want to expand the application in the future, so that we can support multi-country use, so we need to localize the time display: not only choose the display format suitable for user habits, but also provide with them Time zone corresponding time. These logic should belong to the application level code and is not suitable in the view. If the time information to display in the controller, our application will be more flexible: we can modify the display format and time zone settings in the controller without having to make any modifications to the view.</p> <p>THE Story So Far</p> <p>Current story</p> <p>Let's take a look at how this app works.</p> <p>1. Users enter our app through the browser. Here, we use a local URL, such as http: // localhost: 3000 / SAY / HELLO.</p> <p>2. Rails analyzes the URL. Say is considered to be the name of the controller, so Rails will create a new instance for SayController's Ruby class (located on the app / controller.rb file).</p> <p>3. The next section of the URL path is considered as the name of the Action. The method of the Rails calls the name Hello in the controller. This method newly built a TIME object (the latter records the current time),</p> <p>And put it in the @Time instance variable.</p> <p>4. Rails looks for a template for displaying the results, which will find the same subdirectory (SAY) with the controller name in the app / views directory, then find files that match the Action name in the subdirectory (Hello.Rhtml ).</p> <p>5. Rails is handled by ERB, performs nested Ruby code, and replaces the value provided by the controller.</p> <p>6. Rails ends the processing of this request, and the result is sent to the browser.</p> <p>This is not the story of the story --Rails gives us a lot of opportunities, which can be adjusted for basic processes (we will use these opportunities soon). The meaning of our story is that it fully reflects the principle of convention over Convention over Configuration, which is one of Rails's basic ideas. Since it is provided with a convenient and effective default configuration and naming conventions, Rails applications usually only require small external configuration - if it is not completely unnecessary. The various parts of the application combine in a natural way, do not need to worry about it. 4.3 LINKING PAGETHER</p> <p>4.3 Putting the page</p> <p>There are very few web applications with only one page. Now, let's try to "Hello, World!" And add a wonderful effect of the web design.</p> <p>In general, a class page in the application will correspond to a view. Here, we have to add an action method and create a new page for it (this is not necessary, we will see different examples after the book). We will put this Action method in the SayController controller - Of course, you can also choose to create a new controller, but there is no special reason for us to do this.</p> <p>We already know how to create a new view and action: In order to add an action called Goodbye, we only need to define a new method of the same name in the controller. Now, our controller look like this:</p> <p>Class SayController <ApplicationController</p> <p>Def hello</p> <p>@Time = Time.now</p> <p>end</p> <p>Def Goodbye</p> <p>end</p> <p>end</p> <p>Figure 4.6 Basic "Goodbye" page</p> <p>Below, we have to create a new template in the App / Views / Say directory, and its name should be Goodbye.RHTML, because in the default, the name of the template should match the name of the Action.</p> <p><html></p> <p><HEAD></p> <p><title> see you late! </ title></p> <p></ hEAD></p> <p><body></p> <p><H1> Goodbye! </ h1></p> <p><p></p> <p>IT WAS Nice Having You Here.</p> <p></ p></p> <p></ body></p> <p></ html></p> <p>Open our lovely browser, this input URL is http: // localhost: 3000 / Say / Goodbye. You should see the effect as shown in Figure 4.6.</p> <p>Now we need to connect these two pages. We have to put a link on the "Hello" page, let it bring the user to the "Goodbye" page; turn over, the latter should also have a link to the former. In a real application, we may want to provide such functions with a good button, but now it is enough to use hyperlinks.</p> <p>We already know that Rails parsed the URL to "Controller Name" and "Action Name" in accordance with naming conventions. Therefore, our links should also follow this practice. So, we join the following in Hello.rhtml:</p> <p><html> ....</p> <p><p></p> <p>Say <a href="/say/goodbye"> goodbye </a>!</p> <p></ p></p> <p></ html></p> <p>The link in Goodbye.RHTML is also similar to this:</p> <p><html> ....</p> <p><p></p> <p>Say <a href="/say/hello"> Hello </a>! </ P></p> <p></ html></p> <p>This approach is of course tube, but it is a bit fragile: if we move the application to another place to the web server, these URLs will fail. Moreover, this is actually written Rails directly into the code directly into the code, and Rails is entirely possible to change the current interpretation.</p> <p>Fortunately, we have a way to solve this problem. Rails provides a large heap to aids that can be used in view templates. Here, we can use a link_to () assisted method, this method can create hyperlinks to an action [5]. After using the LINK_TO () method, hello.rhtml turns:</p> <p><html></p> <p><HEAD></p> <p><title> Hello, Rails! </ Title></p> <p></ hEAD></p> <p><body></p> <p><H1> Hello from Rails! </ h1></p> <p><p></p> <p>IT is now <% = @time%>.</p> <p></ p></p> <p><p></p> <p>Time to Say</p> <p><% = link_to "Goodbye!",: action => "Goodbye"%></p> <p></ p></p> <p></ body></p> <p></ html></p> <p>In the last <% = ...%> ERB sequence embedded in the call_to () call, the result is a URL pointing to Goodbye () this action. When calling link_to (), the first parameter is the text of the hyperlink display, and the second parameter tells Rails how to generate hyperlinks. Since we don't specify a controller, Rails uses the current controller.</p> <p>We may wish to spend more time to think about the second parameter of the link_to () method. We just wrote:</p> <p>Link_to "Goodbye!",: action => "goodbye"</p> <p>Figure 4.7 "Hello" page plus links to the "Goodbye" page</p> <p>: action is a Ruby's symbol (Symbol), you can think of the colon here as "called a certain thing", so: Action represents "named Action". The following => "Goodbye" is associated with the "Goodbye" string with the name of the action. From the effect, this is to allow us to specify some parameters when calling the method to pass, the keyword parameter. Rails uses this technology: as long as a method receives multiple parameters, and some of them are optional, you can pass these parameter values ​​by keyword parameters.</p> <p>OK, the words retired. Now, if we view the "Hello" page with your browser, there will be a link to the "Goodbye" page (Figure 4.7).</p> <p>We can do a similar object in Goodbye.rhtml, link back to the "Hello" page.</p> <p><html></p> <p><HEAD></p> <p><title> see you late! </ title></p> <p></ hEAD></p> <p><body></p> <p><H1> Goodbye! </ h1></p> <p><p></p> <p>IT WAS Nice Having You Here.</p> <p></ p></p> <p><p></p> <p>SAY <% = link_to "Hello",: action => "Hello"%> Again. </ P></p> <p></ body></p> <p></ html></p> <p>4.4 What We Just Did</p> <p>4.4 What have we done?</p> <p>In this chapter, we constructed a toy application. Through this process, we learned:</p> <p>l How to create a new Rails application and how to create a new controller in it.</p> <p>l How to map the user request to the program code,</p> <p>l How to create dynamic content in the controller, and how to display dynamic content in the view template,</p> <p>l How to link each page.</p> <p>This is a good start. Below, let's build a more real app.</p> <p>[1] Webrick is a web server written by pure Ruby, issued with Ruby 1.8.1 or higher.</p> <p>[2] "0.0.0.0" in the URL address indicates that Webrick receives a connection from all interfaces. On the Dave's OS X system, this means that requests from the local interface (127.0.0.1 and :: 1) or from the LAN connection will be received by Webrick.</p> <p>[3] The concept of "The Name of the Controller" may be more complex than what you imagined, we will explain this issue in detail in Section 13.4 ("Naming Customs", the original book 180). Now, we only need to assume that the name of the controller is SAY.</p> <p>[4] Rails is quite flexible when resolving the URL. The default URL parser mechanism is described in this chapter. In Section 16.3 ("Request Routing", the original book 280), we will see how to change this mechanism.</p> <p>[5] Link_to () can be made far more than this. But don't worry, we will come slowly ...</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-131238.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="131238" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.070</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '7RCQlJswebxx_2B1j35JWs90s2plrpi3AGqQGLFm5YkZm7FxMUXrn_2FDLiUMmJJZOSN73X0l9Tk8M4WQUgN'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>