Search Results

Search found 26142 results on 1046 pages for 'javascript alert'.

Page 696/1046 | < Previous Page | 692 693 694 695 696 697 698 699 700 701 702 703  | Next Page >

  • JQuery UI Tabs widget error handling

    - by dthrasher
    When an ajax request fails, the JQuery UI Tabs widget stops responding and the "Loading..." spinner remains on the tab that caused the error. I can get the ajax callback to give me some sort of alert message like so: $('#localtabs > ul').tabs({ ajaxOptions: { success: tabLoadSuccessCallback, error: tabLoadFailureCallback} }); function tabLoadSuccessCallback(XMLHttpRequest, textStatus, errorThrown) { alert("Yay!");} function tabLoadFailureCallback(XMLHttpRequest, textStatus, errorThrown) { alert("Could not get search results.");} But what I'd really like is to be able to display a message within the panel, cancel the spinner, and disable the tab that caused the problem while leaving the rest of the tabs operational. Does anyone have any ideas for how to do this?

    Read the article

  • Active Index is not being persisted in jQuery accordion change event

    - by Xaisoft
    I have an asp.net aspx page and on that page I have a hidden input field with and id of paneIndex. However, when I load the page, the alert shows index 1 which is correct on the first load, but if I open up pane 3 for example, the alert shows 1 still. Am I doing something wrong? In a Custom.js file, I have the following code: $(document).ready(function() { $("#accordion").accordion({ active: 1, collapsible: true, autoHeight: false, change: function(event, ui) { var activeIndex = $("#accordion").accordion('option', 'active'); $("#paneIndex").val(activeIndex); //alert(activeIndex); } }); }); In my server side button click, I have the following code: string activeIndex = Request.Form["paneIndex"]; string script = string.Format(@"<script type=""text/javascript"">var paneIndex = {0};</script>", activeIndex); if(!ClientScript.IsStartupScriptRegistered("JSScript")) ClientScript.RegisterStartupScript(this.GetType(),"JSScript", script);

    Read the article

  • Not able to parse xml in jquery

    - by Ravi Kumar H M
    I am getting xml file path from browse button and trying to parse but it is not working.. here is my code below. I am new to jQuery.. please help $(document).ready(function(){ alert("hi") $("#uploadButton").click(function(){ var val = $("input#file").val() alert( val ) // it is displaying... $(val).find("CommandModule").each(function() { alert("inside cmdModule") // it is not displaying.. $(this).find("CommandGroup").each(function() { $(this).find("CommandExecution").each(function() { $("#test").append($(this).attr("cmdId")); }); }); // closing CommandGroup }); // closing CommandModule }); // closing Click function }); // closing ready function

    Read the article

  • Providing updates during a long Rails controller action

    - by highBandWidth
    I have an action that takes a long time. I want to be able to provide updates during the process so the user is not confused as to whether he lost the connection or something. Can I do something like this: class HeavyLiftingController < ApplicationController def data_mine render_update :js=>"alert('Just starting!')" # do some complicated find etc. render_update :js=>"alert('Found the records!')" # do some processing ... render_update :js=>"alert('Done processig')" # send @results to view end end

    Read the article

  • DOM Level 3 CustomEvents not bubbling on WebKit

    - by Edu Felipe
    I'm observing CustomEvents not bubbling, even though I set bubbling to true. The code below: var evt = document.createEvent("CustomEvent") evt.initCustomEvent("mycustomevent", true, false) var someh1 = document.getElementById("someh1") someh1.addEventListener("mycustomevent", function(){ alert("OMG!"); }) document.getElementsByTagName("body")[0].dispatchEvent(evt) With the HTML below: <html> <head></head> <body> <h1 id="someh1">content!</h1> </body> </html> Never shows the alert, demonstrating that the event is not bubbling down. Am I doing something wrong? Please note that if I do a getElementById("someh1") and run the dispatchEvent on it, the alert is displayed. Thanks!

    Read the article

  • Mouse down Issue

    - by 3gwebtrain
    HI, I am making my own scroll bar. in which i made this code below i pasted. i am getting the issue from this code. i) in the first time i am pressing "#scroller" that works fine. ii) in case of second or other time when i am enter into "#scroller" itself, i am getting the alert "hi", instead of i am pressing the "#scroller", i know that i am doing some wrong this with my code, but i unable to find the mistake. Any one help me? $(function(){ var slidesWidth = ($('#show-content li').length)*($('#show-content li').width()+20); $('#show-content ul').width(slidesWidth); var scrollBarWidth = (100/slidesWidth)*1000;//presently taken by manual/ $('#scroller').width(scrollBarWidth); $('#scroller').bind('mousedown',function(){ $('#scroller').mousemove(function(){ alert('hi'); }) }) $('#scroller').bind('mouseup',function(){ $('#scroller').unbind('mousedown,mousemove'); alert('unbinded'); }) })

    Read the article

  • Failing rspec Rails Tutorial Chapter 9.3

    - by greyghost24
    I am failing 3 tests and I have found numerous examples on here and on on the internet in general but I can't seem to find where I'm going wrong. Thanks for any help. 1) User pages signup with valid information edit page Failure/Error: before { visit edit_user_path(user) } ActionView::Template::Error: undefined method `model_name' for NilClass:Class # ./app/views/users/edit.html.erb:6:in `_app_views_users_edit_html_erb___4113112884365867193_70232486166220' # ./spec/requests/user_pages_spec.rb:96:in `block (5 levels) in <top (required)>' 2) User pages signup with valid information edit page Failure/Error: before { visit edit_user_path(user) } ActionView::Template::Error: undefined method `model_name' for NilClass:Class # ./app/views/users/edit.html.erb:6:in `_app_views_users_edit_html_erb___4113112884365867193_70232486166220' # ./spec/requests/user_pages_spec.rb:96:in `block (5 levels) in <top (required)>' 3) User pages signup with valid information edit page Failure/Error: before { visit edit_user_path(user) } ActionView::Template::Error: undefined method `model_name' for NilClass:Class # ./app/views/users/edit.html.erb:6:in `_app_views_users_edit_html_erb___4113112884365867193_70232486166220' # ./spec/requests/user_pages_spec.rb:96:in `block (5 levels) in <top (required)>' Finished in 0.26515 seconds 3 examples, 3 failures Failed examples: rspec ./spec/requests/user_pages_spec.rb:100 # User pages signup with valid information edit page rspec ./spec/requests/user_pages_spec.rb:99 # User pages signup with valid information edit page rspec ./spec/requests/user_pages_spec.rb:101 # User pages signup with valid information edit page authentication_pages_spec.rb require 'spec_helper' describe "Authentication" do subject { page } describe "signin page" do before { visit signin_path } it { should have_selector('h1', text: 'Sign in') } it { should have_selector('title', text: 'Sign in') } end describe "signin" do before { visit signin_path } describe "with invalid information" do before { click_button "Sign in" } it { should have_selector('title', text: 'Sign in') } it { should have_selector('div.alert.alert-error', text: 'Invalid') } describe "after visiting another page" do before { click_link "Home" } it { should_not have_selector('div.alert.alert-error') } end end describe "with valid information" do let(:user) { FactoryGirl.create(:user) } before do fill_in "Email", with: user.email fill_in "Password", with: user.password click_button "Sign in" end it { should have_selector('title', text: user.name) } it { should have_link('Profile', href: user_path(user)) } it { should have_link('Sign out', href: signout_path) } it { should_not have_link('Sign in', href: signin_path) } describe "followed by signout" do before { click_link "Sign out" } it { should have_link('Sign in') } end end end end Here is the users_controller: class UsersController < ApplicationController def show @user = User.find(params[:id]) end def new @user = User.new end def create @user = User.new(params[:user]) if @user.save sign_in @user flash[:success] = "Welcome to the Sample App!" redirect_to @user else render 'new' end end end def edit @user = User.find(params[:id]) end edit.html.erb: <% provide(:title, "Edit user") %> <h1>Update your profile</h1> <div class="row"> <div class="span6 offset3"> <%= form_for(@user) do |f| %> <%= render 'shared/error_messages' %> <%= f.label :name %> <%= f.text_field :name %> <%= f.label :email %> <%= f.text_field :email %> <%= f.label :password %> <%= f.password_field :password %> <%= f.label :password_confirmation, "Confirm Password" %> <%= f.password_field :password_confirmation %> <%= f.submit "Save changes", class: "btn btn-large btn-primary" %> <% end %> <%= gravatar_for @user %> <a href="http://gravatar.com/emails">change</a> </div> here is the user_pages_spec: require 'spec_helper' describe "User pages" do subject { page } describe "profile page" do let(:user) { FactoryGirl.create(:user) } before { visit user_path(user) } it { should have_selector('h1', text: user.name) } it { should have_selector('title', text: user.name) } end describe "signup page" do before { visit signup_path } it { should have_selector('h1', text: 'Sign up') } it { should have_selector('title', text: full_title('Sign up')) } end describe "signup" do before { visit signup_path } describe "with invalid information" do it "should not create a user" do expect { click_button "Create my account" }.not_to change(User, :count) end describe "error messages" do before { click_button "Create my account" } it { should have_selector('title', text: 'Sign up') } it { should have_content('error') } end end describe "with valid information" do before do fill_in "Name", with: "Example User" fill_in "Email", with: "[email protected]" fill_in "Password", with: "foobar" fill_in "Confirmation", with: "foobar" end it "should create a user" do expect do click_button "Create my account" end.to change(User, :count).by(1) end describe "after saving the user" do before { click_button "Create my account" } let(:user) { User.find_by_email('[email protected]') } it { should have_selector('title', text: user.name) } it { should have_selector('div.alert.alert-success', text: 'Welcome') } it { should have_link('Sign out') } end end end describe "signup page" do before { visit signup_path } it { should have_selector('h1', text: 'Sign up') } it { should have_selector('title', text: full_title('Sign up')) } end describe "signup" do before { visit signup_path } let(:submit) { "Create my account" } describe "with invalid information" do it "should not create a user" do expect { click_button submit }.not_to change(User, :count) end end describe "with valid information" do before do fill_in "Name", with: "Example User" fill_in "Email", with: "[email protected]" fill_in "Password", with: "foobar" fill_in "Confirmation", with: "foobar" end it "should create a user" do expect { click_button submit }.to change(User, :count).by(1) end describe "edit" do let(:user) { FactoryGirl.create(:user) } before { visit edit_user_path(user) } describe "page" do it { should have_selector('h1', text: "Update your profile") } it { should have_selector('title', text: "Edit user") } it { should have_link('change', href: 'http://gravatar.com/emails') } end describe "with invalid information" do before { click_button "Save changes" } it { should have_content('error') } end end end end end edit: users_controllers.rb was formatted incorrectly. It should look like this: class UsersController < ApplicationController def show @user = User.find(params[:id]) end def new @user = User.new end def create @user = User.new(params[:user]) if @user.save sign_in @user flash[:success] = "Welcome to the Sample App!" redirect_to @user else render 'new' end end def edit @user = User.find(params[:id]) end end

    Read the article

  • Jquery function calls more than one time.

    - by Harie
    I am having an aspx page in which I am calling a user control. The user control I am using a pop up to display it when a user clicks a asp:linkbutton. In that user control I am having a textbox and I am calling a Jquery Blur to do some validation. While doing so the function is calling [blur] is calling twice. I just called an alert() with the textbox value.So I can see the alert is coming twice .What I need to do to avoid the second time. I need to do it only whenever the user going out of the textbox and that also one time. $('#<%=txtCategory.ClientID %>').blur(function() { alert($(this).val()); }); This is called twice.Thanks for ur response.

    Read the article

  • How to use $.get data to replace certain elements in a webpage?

    - by Jack Ha
    I'm using jQuery 1.4.2 to navigate smoothly between similar webpages (in ff3). When clicking on a link, a javascript script should load the new html, filter out the right elements and replace them on the current page. It looks like the $(htmlcode) does not do the thing I expected. The actions below work when loading the page directly, but when using the $.get I have the following problems: the find function seems only to look inside a div element called id="page", which is inside the body element one of the elements has <script>...</script>, but the <script>...</script> is not present in the DOM of $(htmlcode). Anybody knows how to solve this? $.get( url, function(responseText, textStatus, xmlHttpRequest) { alert($(responseText).find("#header")); // works, #header is inside div#page alert($(responseText).find("#header").html()); // displays content, but WITHOUT the <script>...</script> alert($(responseText).find("title")); // does not work, title is outside div#page } );

    Read the article

  • wait for ajax request then finish the rest ( jQuery )

    - by user1725155
    I have a peace of jquery code: var new = checkCP(somedata); if(new=="hi"){ alert("Welcom"); } function checkCP(jsData){ $.ajax({ type: "POST", url: "Process.php", data: jsData, dataType: "json", success: function(data){ if(data.match==1) return "hi"; else return "bye"; } }); } I don't know why the welcome alert never show up . I checked everything , even on PHP file the result is 1 but apparently before It wait for ajax respond it passes the if(new=="hi"){ alert("Welcom"); } So is there anyway to wait for ajax respond then read the rest of codes in jQuery ? Thanks.

    Read the article

  • return from jquery ajax call

    - by michael
    hi im tryin to use the return from a jquery ajax call in my own function, but it keeps returning undefined. function checkUser2(asdf) { $.ajax({ type: "POST", async: false, url: "check_user.php", data: { name: asdf }, success: function(data){ return data; //alert(data); } }); } $("#check").click(function(){ alert(checkUser2("muma")); }); the ajax call definately works, because when i uncomment my alert i get the correct return, and i can see it in firebug. Am i doing something stupid.

    Read the article

  • Why can't I open a new window on my jquery ajax callback?

    - by KyleGobel
    to show my problem in a couple examples... THIS WORKS $.post("SomePage.aspx", { name : "value" }, function (data) { alert(data); }, "text"); THIS DOESN'T WORK $.post("SomePage.aspx", { name : "value" }, function (data) { window.open("http://www.google.com"); }, "text"); In the first example, I get alerted with what i'm expecting. In the second example, nothing happens. No window is opened. If I add an alert or something before or after the window.open call, the alert works fine, but the window doesn't open. If I add a window.open completly after the $.post method, the window opens fine (of course this doens't help me at all). I'm wondering why I can't open a window in the callback. What do I have to do to be able to open a window? I'd like to open a window to show some fancy results. Any help is appreciated, thanks.

    Read the article

  • jQuery/JSON/PHP failing

    - by user730936
    I am trying to call a php script that accepts JSON data, writes it into a file and returns simple text response using jQuery/AJAX call. jQuery code : $("input.callphp").click(function() { var url_file = myurl"; $.ajax({type : "POST", url : url_file, data : {'puzzle': 'Reset!'}, success : function(data){ alert("Success: " + data); }, error : function (data) { alert("Error: " + data); }, dataType : 'text' }); }); PHP Code : <?php $thefile = "new.json"; /* Our filename as defined earlier */ $towrite = $_POST["puzzle"]; /* What we'll write to the file */ $openedfile = fopen($thefile, "w"); fwrite($openedfile, $towrite); fclose($openedfile); echo "<br> <br>".$towrite; ?> However, the call is never a success and always gives an error with an alert "Error : [Object object]".

    Read the article

  • button click using jquery

    - by DotnetSparrow
    Hi All: I have an asp.net button on a page without masterpage like this: <asp:Button ID="target" runat="server" Text="Animate Me" > </asp:Button> and I am calling this: var panel = $('#<%= target.ClientID %>'); panel.click(function(){ alert($(this).attr("value")); }); but no alert is shown. I even tried this: $('#target').click(function(){ alert($(this).attr("value")); }); but It didnt work. Please suggest me how to click the button and what is issue in above code. Thanks.

    Read the article

  • This should be real easy. How to find a button through its Value (Jquery Selector)

    - by Raja
    I have this HTML: <div id='grid'> <input type="button" value="edit"/> <input type='button' value='update'/> </div> How to I attach a click event only to Update button. I know I could add a class to it or specity an id but both are not possible since it is in gridview. I tried this: $("input:button[@value='update']").click(function(){alert('test');}); but it displays an alert for both buttons. I know I must be doing something silly. Any help is much appreciated. Thanks Kobi for helping me out. Given below is the right answer. $("input[value='update']").click(function(){alert('test');});

    Read the article

  • the correct actionscript to find if object already exists

    - by touB
    I have a Rect object that I'd like to create and set its properties only once. After that, I want to just modify its properties since it already exists. This is my general idea if(theRect == undefined){ Alert.show("creating"); var theRect:Rect = new Rect(); //then set properties addElement(theRect); //then add it using addElement because addChild() does not work } else { Alert.show("updating"); //no need to create it since it's already been created //just access and change the properties } I tried several ways and combinations for the if conditional check: if(theRect == undefined){ if(theRect == null){ declaring and not declaring `var theRect:Rect;` before the if check declaring and instantiating to null before the if check `var theRect:Rect = null;` but can't get the desired effect. Everytime this code block runs, and depending on which version I've used, it either gives me a "can't access null object" error or the if statement always evaluates to true and creates a new Rect object and I get the "creating" Alert. What's the right way of creating that Rect but only if doesn't exist?

    Read the article

  • Jquery mobile and PhoneGap: Reload page to get next item in database

    - by Amy Sukumunu
    I want to reload the page after the user swipe right to the next item in database (id will increment 1) but it is not functioning. It show the alert (ID+1) but the page still does not reload or changePage(same page) to get the new item. $('#word').live( 'swipeleft', function( e ) { alert( 'You swiped right!' ); if(parseInt(sessionStorage.currWord_ID) >= parseInt(sessionStorage.firstWordID) && parseInt(sessionStorage.currWord_ID) < parseInt(sessionStorage.lastWordID)){ sessionStorage.currWord_ID = parseInt(sessionStorage.currWord_ID) + 1; alert("ID +1"); $.mobile.changePage($("#word"),{transition: "pop",reloadPage: true}); } } );

    Read the article

  • Is it possible to access JSON properties with relative syntax when using JSON defined functions?

    - by Justin Vincent
    // JavaScript JSON var myCode = { message : "Hello World", helloWorld : function() { alert(this.message); } }; myCode.helloWorld(); The above JavaScript code will alert 'undefined'. To make it work for real the code would need to look like the following... (note the literal path to myCode.message) // JavaScript JSON var myCode = { message : "Hello World", helloWorld : function() { alert(myCode.message); } }; myCode.helloWorld(); My question is... if I declare functions using json in this way, is there some "relative" way to get access to myCode.message or is it only possible to do so using the literal namespace path myCode.message?

    Read the article

  • jQuery .toggle() not working as expected with second function?!

    - by Christopher
    I'm trying to create a button to show / hide a div below it, all is working fine, I'm just struggling with the last bit! I need to distinguish wether it's a show or hide action so I can pass the variable elsewhere, here's what I have.. $(this).find('.hide-close').click( function() { $(this).siblings('.dragbox-content').toggle(function() { alert($(this).parent().attr("id") + ' Show'); },function() { alert($(this).parent().attr("id") + ' Hide'); } ); }) .end() }); If use the following code, taking out the second function within toggle(), it works?! But then I don't have a show / hide variable. $(this).find('.hide-close').click( function() { $(this).siblings('.dragbox-content').toggle(function() { alert($(this).parent().attr("id") + ' Show'); } ); }) .end() }); Thanks in advance for any help, hopefully it's something really simple I just can't see! :)

    Read the article

  • Unable to capture the id of div clicked

    - by user3674364
    This is my jsfiddle http://jsfiddle.net/6TUtw/4/ How can i register for the event div click , so that i can get the name i have tried with different things , but none of them worked . $('#tabs div').click(function() { var elem = $(this); alert(elem); }); $('#tabs').on('click', 'div.click', function () { var elem = $(this); alert(elem); }); $("#tabs").click(function(){ var elem = $(this); alert(elem); });

    Read the article

  • Getting an Ajax response from Zend Framework Controller

    - by JavaLava
    I'm doing an Ajax request on one of my views to a Controller but I am unable to send back a response to the Ajax method. In the snippet below, I am trying to send the word 'hellopanda' back but in the alert message, I'll get data as an object. View : $.ajax({ type: "POST", url: "localhost/some-activity", data: dataString, success: function(data) { alert( "Data is: " + data); //do something with data }, error: function(data){ alert( "Data is: " + data); //do something with data }, onComplete: function(){ } }); Controller: public function someActivityAction(){ //do stuff echo "hellopanda"; } I'm pretty sure the echo is the problem. Any insights on to how to do a proper response to the view would be greatly appreciated.

    Read the article

  • WPF-to stroke arc with two different brushes

    - by user1914725
    i am new to geometric drawing in wpf. i have a volmeter arc that needs to have alert value. The section of the arc beyond that alert value has to be done with a different color than the rest of the arc. hence the arc is brushed with 2 different colors. a path has one brush at a time.hence how i apply two different pens to the same arc? the alert value is obtained with a lot of pain by doing calculations like gemetry.getpointatfraction.it won't easy to apply triggers any suggestions /approach?

    Read the article

  • How do I make a OnClickListener in Java

    - by Bob
    I used to program with html and to make a alert all I had to do was make an alert("Hello World"); but with java it is much more advanced. I need help to make a button that when someone clicks it, it has an alert message on the screen. This is my code right now: MyOnClickListener onClickListener = new MyOnClickListener() { @Override public void onClick(View v) { Intent returnIntent = new Intent(); returnIntent.putExtra("deleteAtIndex",idx); setResult(RESULT_OK, returnIntent); finish(); } }; for (int i =0;i<buttonList.size();i++) { buttonList.get(i).setText("Remove"); buttonList.get(i).setOnClickListener(onClickListener); }

    Read the article

  • Flex Builder I want to go from titleWindow to a panel.

    - by dejaninic
    Hi. I'm building an user login page and I want to go from titleWindow to Panel. I'm suing following function but it always takes me back to parentApplication. My question is how can I go to my panel and not to Application page. I know that I'm using parentApplication but what should I use instead??? Here is a part of my code: private function handleLogin(event:ResultEvent):void { Alert.show("You have succesfully logged in.", "Information", Alert.OK, null, null, null, Alert.OK); parentApplication.accountPage.mainService.getAccount(); PopUpManager.removePopUp(this); }

    Read the article

  • Developing web apps using ASP.NET MVC 3, Razor and EF Code First - Part 2

    - by shiju
    In my previous post Developing web apps using ASP.NET MVC 3, Razor and EF Code First - Part 1, we have discussed on how to work with ASP.NET MVC 3 and EF Code First for developing web apps. We have created generic repository and unit of work with EF Code First for our ASP.NET MVC 3 application and did basic CRUD operations against a simple domain entity. In this post, I will demonstrate on working with domain entity with deep object graph, Service Layer and View Models and will also complete the rest of the demo application. In the previous post, we have done CRUD operations against Category entity and this post will be focus on Expense entity those have an association with Category entity. You can download the source code from http://efmvc.codeplex.com . The following frameworks will be used for this step by step tutorial.    1. ASP.NET MVC 3 RTM    2. EF Code First CTP 5    3. Unity 2.0 Domain Model Category Entity public class Category   {       public int CategoryId { get; set; }       [Required(ErrorMessage = "Name Required")]       [StringLength(25, ErrorMessage = "Must be less than 25 characters")]       public string Name { get; set;}       public string Description { get; set; }       public virtual ICollection<Expense> Expenses { get; set; }   } Expense Entity public class Expense     {                public int ExpenseId { get; set; }                public string  Transaction { get; set; }         public DateTime Date { get; set; }         public double Amount { get; set; }         public int CategoryId { get; set; }         public virtual Category Category { get; set; }     } We have two domain entities - Category and Expense. A single category contains a list of expense transactions and every expense transaction should have a Category. Repository class for Expense Transaction Let’s create repository class for handling CRUD operations for Expense entity public class ExpenseRepository : RepositoryBase<Expense>, IExpenseRepository     {     public ExpenseRepository(IDatabaseFactory databaseFactory)         : base(databaseFactory)         {         }                } public interface IExpenseRepository : IRepository<Expense> { } Service Layer If you are new to Service Layer, checkout Martin Fowler's article Service Layer . According to Martin Fowler, Service Layer defines an application's boundary and its set of available operations from the perspective of interfacing client layers. It encapsulates the application's business logic, controlling transactions and coordinating responses in the implementation of its operations. Controller classes should be lightweight and do not put much of business logic onto it. We can use the service layer as the business logic layer and can encapsulate the rules of the application. Let’s create a Service class for coordinates the transaction for Expense public interface IExpenseService {     IEnumerable<Expense> GetExpenses(DateTime startDate, DateTime ednDate);     Expense GetExpense(int id);             void CreateExpense(Expense expense);     void DeleteExpense(int id);     void SaveExpense(); } public class ExpenseService : IExpenseService {     private readonly IExpenseRepository expenseRepository;            private readonly IUnitOfWork unitOfWork;     public ExpenseService(IExpenseRepository expenseRepository, IUnitOfWork unitOfWork)     {                  this.expenseRepository = expenseRepository;         this.unitOfWork = unitOfWork;     }     public IEnumerable<Expense> GetExpenses(DateTime startDate, DateTime endDate)     {         var expenses = expenseRepository.GetMany(exp => exp.Date >= startDate && exp.Date <= endDate);         return expenses;     }     public void CreateExpense(Expense expense)     {         expenseRepository.Add(expense);         unitOfWork.Commit();     }     public Expense GetExpense(int id)     {         var expense = expenseRepository.GetById(id);         return expense;     }     public void DeleteExpense(int id)     {         var expense = expenseRepository.GetById(id);         expenseRepository.Delete(expense);         unitOfWork.Commit();     }     public void SaveExpense()     {         unitOfWork.Commit();     } }   View Model for Expense Transactions In real world ASP.NET MVC applications, we need to design model objects especially for our views. Our domain objects are mainly designed for the needs for domain model and it is representing the domain of our applications. On the other hand, View Model objects are designed for our needs for views. We have an Expense domain entity that has an association with Category. While we are creating a new Expense, we have to specify that in which Category belongs with the new Expense transaction. The user interface for Expense transaction will have form fields for representing the Expense entity and a CategoryId for representing the Category. So let's create view model for representing the need for Expense transactions. public class ExpenseViewModel {     public int ExpenseId { get; set; }       [Required(ErrorMessage = "Category Required")]     public int CategoryId { get; set; }       [Required(ErrorMessage = "Transaction Required")]     public string Transaction { get; set; }       [Required(ErrorMessage = "Date Required")]     public DateTime Date { get; set; }       [Required(ErrorMessage = "Amount Required")]     public double Amount { get; set; }       public IEnumerable<SelectListItem> Category { get; set; } } The ExpenseViewModel is designed for the purpose of View template and contains the all validation rules. It has properties for mapping values to Expense entity and a property Category for binding values to a drop-down for list values of Category. Create Expense transaction Let’s create action methods in the ExpenseController for creating expense transactions public ActionResult Create() {     var expenseModel = new ExpenseViewModel();     var categories = categoryService.GetCategories();     expenseModel.Category = categories.ToSelectListItems(-1);     expenseModel.Date = DateTime.Today;     return View(expenseModel); } [HttpPost] public ActionResult Create(ExpenseViewModel expenseViewModel) {                      if (!ModelState.IsValid)         {             var categories = categoryService.GetCategories();             expenseViewModel.Category = categories.ToSelectListItems(expenseViewModel.CategoryId);             return View("Save", expenseViewModel);         }         Expense expense=new Expense();         ModelCopier.CopyModel(expenseViewModel,expense);         expenseService.CreateExpense(expense);         return RedirectToAction("Index");              } In the Create action method for HttpGet request, we have created an instance of our View Model ExpenseViewModel with Category information for the drop-down list and passing the Model object to View template. The extension method ToSelectListItems is shown below   public static IEnumerable<SelectListItem> ToSelectListItems(         this IEnumerable<Category> categories, int  selectedId) {     return           categories.OrderBy(category => category.Name)                 .Select(category =>                     new SelectListItem                     {                         Selected = (category.CategoryId == selectedId),                         Text = category.Name,                         Value = category.CategoryId.ToString()                     }); } In the Create action method for HttpPost, our view model object ExpenseViewModel will map with posted form input values. We need to create an instance of Expense for the persistence purpose. So we need to copy values from ExpenseViewModel object to Expense object. ASP.NET MVC futures assembly provides a static class ModelCopier that can use for copying values between Model objects. ModelCopier class has two static methods - CopyCollection and CopyModel.CopyCollection method will copy values between two collection objects and CopyModel will copy values between two model objects. We have used CopyModel method of ModelCopier class for copying values from expenseViewModel object to expense object. Finally we did a call to CreateExpense method of ExpenseService class for persisting new expense transaction. List Expense Transactions We want to list expense transactions based on a date range. So let’s create action method for filtering expense transactions with a specified date range. public ActionResult Index(DateTime? startDate, DateTime? endDate) {     //If date is not passed, take current month's first and last dte     DateTime dtNow;     dtNow = DateTime.Today;     if (!startDate.HasValue)     {         startDate = new DateTime(dtNow.Year, dtNow.Month, 1);         endDate = startDate.Value.AddMonths(1).AddDays(-1);     }     //take last date of start date's month, if end date is not passed     if (startDate.HasValue && !endDate.HasValue)     {         endDate = (new DateTime(startDate.Value.Year, startDate.Value.Month, 1)).AddMonths(1).AddDays(-1);     }     var expenses = expenseService.GetExpenses(startDate.Value ,endDate.Value);     //if request is Ajax will return partial view     if (Request.IsAjaxRequest())     {         return PartialView("ExpenseList", expenses);     }     //set start date and end date to ViewBag dictionary     ViewBag.StartDate = startDate.Value.ToShortDateString();     ViewBag.EndDate = endDate.Value.ToShortDateString();     //if request is not ajax     return View(expenses); } We are using the above Index Action method for both Ajax requests and normal requests. If there is a request for Ajax, we will call the PartialView ExpenseList. Razor Views for listing Expense information Let’s create view templates in Razor for showing list of Expense information ExpenseList.cshtml @model IEnumerable<MyFinance.Domain.Expense>   <table>         <tr>             <th>Actions</th>             <th>Category</th>             <th>                 Transaction             </th>             <th>                 Date             </th>             <th>                 Amount             </th>         </tr>       @foreach (var item in Model) {              <tr>             <td>                 @Html.ActionLink("Edit", "Edit",new { id = item.ExpenseId })                 @Ajax.ActionLink("Delete", "Delete", new { id = item.ExpenseId }, new AjaxOptions { Confirm = "Delete Expense?", HttpMethod = "Post", UpdateTargetId = "divExpenseList" })             </td>              <td>                 @item.Category.Name             </td>             <td>                 @item.Transaction             </td>             <td>                 @String.Format("{0:d}", item.Date)             </td>             <td>                 @String.Format("{0:F}", item.Amount)             </td>         </tr>          }       </table>     <p>         @Html.ActionLink("Create New Expense", "Create") |         @Html.ActionLink("Create New Category", "Create","Category")     </p> Index.cshtml @using MyFinance.Helpers; @model IEnumerable<MyFinance.Domain.Expense> @{     ViewBag.Title = "Index"; }    <h2>Expense List</h2>    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script> <link href="@Url.Content("~/Content/jquery-ui-1.8.6.custom.css")" rel="stylesheet" type="text/css" />      @using (Ajax.BeginForm(new AjaxOptions{ UpdateTargetId="divExpenseList", HttpMethod="Get"})) {     <table>         <tr>         <td>         <div>           Start Date: @Html.TextBox("StartDate", Html.Encode(String.Format("{0:mm/dd/yyyy}", ViewData["StartDate"].ToString())), new { @class = "ui-datepicker" })         </div>         </td>         <td><div>            End Date: @Html.TextBox("EndDate", Html.Encode(String.Format("{0:mm/dd/yyyy}", ViewData["EndDate"].ToString())), new { @class = "ui-datepicker" })          </div></td>          <td> <input type="submit" value="Search By TransactionDate" /></td>         </tr>     </table>         }   <div id="divExpenseList">             @Html.Partial("ExpenseList", Model)     </div> <script type="text/javascript">     $().ready(function () {         $('.ui-datepicker').datepicker({             dateFormat: 'mm/dd/yy',             buttonImage: '@Url.Content("~/Content/calendar.gif")',             buttonImageOnly: true,             showOn: "button"         });     }); </script> Ajax search functionality using Ajax.BeginForm The search functionality of Index view is providing Ajax functionality using Ajax.BeginForm. The Ajax.BeginForm() method writes an opening <form> tag to the response. You can use this method in a using block. In that case, the method renders the closing </form> tag at the end of the using block and the form is submitted asynchronously by using JavaScript. The search functionality will call the Index Action method and this will return partial view ExpenseList for updating the search result. We want to update the response UI for the Ajax request onto divExpenseList element. So we have specified the UpdateTargetId as "divExpenseList" in the Ajax.BeginForm method. Add jQuery DatePicker Our search functionality is using a date range so we are providing two date pickers using jQuery datepicker. You need to add reference to the following JavaScript files to working with jQuery datepicker. jquery-ui.js jquery.ui.datepicker.js For theme support for datepicker, we can use a customized CSS class. In our example we have used a CSS file “jquery-ui-1.8.6.custom.css”. For more details about the datepicker component, visit jquery UI website at http://jqueryui.com/demos/datepicker . In the jQuery ready event, we have used following JavaScript function to initialize the UI element to show date picker. <script type="text/javascript">     $().ready(function () {         $('.ui-datepicker').datepicker({             dateFormat: 'mm/dd/yy',             buttonImage: '@Url.Content("~/Content/calendar.gif")',             buttonImageOnly: true,             showOn: "button"         });     }); </script>   Source Code You can download the source code from http://efmvc.codeplex.com/ . Summary In this two-part series, we have created a simple web application using ASP.NET MVC 3 RTM, Razor and EF Code First CTP 5. I have demonstrated patterns and practices  such as Dependency Injection, Repository pattern, Unit of Work, ViewModel and Service Layer. My primary objective was to demonstrate different practices and options for developing web apps using ASP.NET MVC 3 and EF Code First. You can implement these approaches in your own way for building web apps using ASP.NET MVC 3. I will refactor this demo app on later time.

    Read the article

< Previous Page | 692 693 694 695 696 697 698 699 700 701 702 703  | Next Page >