Search Results

Search found 34127 results on 1366 pages for 'jquery form wizard'.

Page 65/1366 | < Previous Page | 61 62 63 64 65 66 67 68 69 70 71 72  | Next Page >

  • Abstracting the adding of click events to elements selected by class using jQuery

    - by baroquedub
    I'm slowly getting up to speed with jQuery and am starting to want to abstract my code. I'm running into problems trying to define click events at page load. In the code below, I'm trying to run through each div with the 'block' class and add events to some of its child elements by selecting them by class: <script language="javascript" type="text/javascript"> $(document).ready(function (){ $('HTML').addClass('JS'); // if JS enabled, hide answers $(".block").each(function() { problem = $(this).children('.problem'); button = $(this).children('.showButton'); problem.data('currentState', 'off'); button.click(function() { if ((problem.data('currentState')) == 'off'){ button.children('.btn').html('Hide'); problem.data('currentState', 'on'); problem.fadeIn('slow'); } else if ((problem.data('currentState')) == 'on'){ button.children('.btn').html('Solve'); problem.data('currentState', 'off'); problem.fadeOut('fast'); } return false; }); }); }); </script> <style media="all" type="text/css"> .JS div.problem{display:none;} </style> <div class="block"> <div class="showButton"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem"> <p>Answer 1</p> </div> </div> <div class="block"> <div class="showButton"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem"> <p>Answer 2</p> </div> </div> Unfortunately using this, only the last of the divs' button actually works. The event is not 'localised' (if that's the right word for it?) i.e. the event is only applied to the last $(".block") in the each method. So I have to laboriously add ids for each element and define my click events one by one. Surely there's a better way! Can anyone tell me what I'm doing wrong? And how I can get rid of the need for those IDs (I want this to work on dynamically generated pages where I might not know how many 'blocks' there are...) <script language="javascript" type="text/javascript"> $(document).ready(function (){ $('HTML').addClass('JS'); // if JS enabled, hide answers // Preferred version DOESN'T' WORK // So have to add ids to each element and laboriously set-up each one in turn... $('#problem1').data('currentState', 'off'); $('#showButton1').click(function() { if (($('#problem1').data('currentState')) == 'off'){ $('#showButton1 > a').html('Hide'); $('#problem1').data('currentState', 'on'); $('#problem1').fadeIn('slow'); } else if (($('#problem1').data('currentState')) == 'on'){ $('#showButton1 > a').html('Solve'); $('#problem1').data('currentState', 'off'); $('#problem1').fadeOut('fast'); } return false; }); $('#problem2').data('currentState', 'off'); $('#showButton2').click(function() { if (($('#problem2').data('currentState')) == 'off'){ $('#showButton2 > a').html('Hide'); $('#problem2').data('currentState', 'on'); $('#problem2').fadeIn('slow'); } else if (($('#problem2').data('currentState')) == 'on'){ $('#showButton2 > a').html('Solve'); $('#problem2').data('currentState', 'off'); $('#problem2').fadeOut('fast'); } return false; }); }); </script> <style media="all" type="text/css"> .JS div.problem{display:none;} </style> <div class="block"> <div class="showButton" id="showButton1"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem" id="problem1"> <p>Answer 1</p> </div> </div> <div class="block"> <div class="showButton" id="showButton2"> <a href="#" title="Show solution" class="btn">Solve</a> </div> <div class="problem" id="problem2"> <p>Answer 2</p> </div> </div>

    Read the article

  • Form values appear blank when submitting to the database - Drupal FormAPI

    - by GaxZE
    Hello, I have been working on this drupal form API script for past week and half. to give an insight into my problem.. the form below merely lists a host of database records which contain 5 individual scoring ranks. (mind, action, relationship, language and IT). this code is apart of my own custom module where all values are listed from the database. the idea behind this module is to be able to edit these values on a large scale. I am having trouble getting the values entered in the form to be passed to the variables inside of the marli_admin_submit function. the second problem is the assigning those values to their specific ID. for this purpose id like to add im merely trying to get just one score updated rather than all of them. below is my code. any advice appreciated. function marli_scores(){ $result = pager_query(db_rewrite_sql('SELECT * FROM marli WHERE value != " "')); while ($node = db_fetch_object($result)) { $attribute = $node->attribute; $field = $node->field_name; $item = $node->value; $mind = $node->mind; $action = $node->action; $relationship = $node->relationship; $language = $node->language; $it = $node->it; $form['field'][$node->marli_id] = array('#type' => 'markup', '#value' => $field, '#prefix' => '<b>', '#suffix' => '</b>'); $form['title'][$node->marli_id] = array('#type' => 'markup', '#value' => $item, '#prefix' => '<b>', '#suffix' => '</b>'); $form['mind'][$node->marli_id] = array('#type' => 'textfield', '#maxlength' => '1', '#size' => '1', '#value' => $mind); $form['action'][$node->marli_id] = array('#type' => 'textfield', '#maxlength' => '1', '#size' => '1', '#value' => $action); $form['relationship'][$node->marli_id] = array('#type' => 'textfield', '#maxlength' => '1', '#size' => '1', '#value' => $relationship); $form['language'][$node->marli_id] = array('#type' => 'textfield', '#maxlength' => '1', '#size' => '1', '#value' => $language); $form['it'][$node->marli_id] = array('#type' => 'textfield', '#maxlength' => '1', '#size' => '1', '#value' => $it); } $form['pager'] = array('#value' => theme('pager', NULL, 50, 0)); $form['save'] = array('#type' => 'submit', '#value' => t('Save')); $form['#theme'] = 'marli_scores'; return $form; } function marli_admin_submit($form, &$form_state) { $marli_id = 4; $submit_mind = $form_state['values']['mind'][$marli_id]; $submit_action = $form_state['values']['action'][$marli_id]; $submit_relationship = $form_state['values']['relationship'][$marli_id]; $submit_language = $form_state['values']['language'][$marli_id]; $submit_it = $form_state['values']['it'][$marli_id]; $sql_query = "UPDATE {marli} SET mind = %d, action = %d, relationship = %d, language = %d, it = %d WHERE marli_id = %d"; if ($success = db_query($sql_query, $submit_mind, $submit_action, $submit_relationship, $submit_language, $submit_it)) { drupal_set_message(t(' Values have been saved.')); } else { drupal_set_message(t('There was an error saving your data. Please try again.')); } }

    Read the article

  • jQuery encoding values differently than expected for jQuery.ajax data elements

    - by Adam Tuttle
    I'm using jQuery.ajax() to make a PUT request to a REST web service, but seeing some really strange serialization behavior. (Before you say it: Yes, I know that not all browsers support PUT -- this is just an example implementation for an api/framework, and ultimately will not be called by a browser, but rather by a server-side library that does support the extra http verbs.) Here's the form: <form action="/example/api/artist" method="put" id="update"> First Name: <input type="text" name="firstname" /><br/> Last Name: <input type="text" name="lastname" /><br/> Address: <input type="text" name="address" /><br/> City: <input type="text" name="city" /><br/> State: <input type="text" name="state" /><br/> Postal Code: <input type="text" name="postalcode" /><br/> Email: <input type="text" name="email" /><br/> Phone: <input type="text" name="phone" /><br/> Fax: <input type="text" name="fax" /><br/> Password: <input type="text" name="thepassword" /><br/> <input type="hidden" name="debug" value="true" /> <input type="submit" value="Update Artist" /> <input type="reset" value="Cancel" id="updateCancel" /> </form> And the JS: $("#update").submit(function(e){ e.preventDefault(); var frm = $(this); $.ajax({ url: frm.attr('action'), data:{ firstname: $("#update input[name=firstname]").val(), lastname: $("#update input[name=lastname]").val(), address: $("#update input[name=address]").val(), city: $("#update input[name=city]").val(), state: $("#update input[name=state]").val(), postalcode: $("#update input[name=postalcode]").val(), email: $("#update input[name=email]").val(), phone: $("#update input[name=phone]").val(), fax: $("#update input[name=fax]").val(), thepassword: $("#update input[name=thepassword]").val() }, type: frm.attr('method'), dataType: "json", contentType: "application/json", success: function (data, textStatus, xhr){ console.log(data); reloadData(); }, error: function (xhr, textStatus, err){ console.log(textStatus); console.log(err); } }); }); When using FireBug, I see the request go through as this: firstname=Austin&lastname=Weber&address=25463+Main+Street%2C+Suite+C&city=Berkeley&state=CA&postalcode=94707-4513&email=austin%40life.com&phone=555-513-4318&fax=510-513-4888&thepassword=nopolyes That's not horrible, but ideally I'd rather get %20 instead of + for spaces. I tried wrapping each field value lookup in an escape: firstname: escape($("#update input[name=firstname]").val()) But that makes things worse: firstname=Austin&lastname=Weber&address=25463%2520Main%2520Street%252C%2520Suite%2520C&city=Berkeley&state=CA&postalcode=94707-4513&email=austin%40life.com&phone=555-513-4318&fax=510-513-4888&thepassword=nopolyes In this case, the value is being escaped twice; so first the space is encoded to %20, and then the % sign is escaped to %25 resulting in the %2520 for spaces, and %252C for the comma in the address field. What am I doing wrong here?

    Read the article

  • Phonegap / jquery mobile slide transition not workign properly on first call

    - by Alexander Casassovici
    I have an awkward visual glitch. I want nice transition when changing pages on the app. Unfortunately first time i change to another page, Instead of sliding current pagg out and new page in , current page is immediately replaces by the new page, then slides out... and when it's out of view it's the new page is shown... the second time around it works like a charm though !!! This is running on iphone with jquery mobile + phonegap I made a video to make the issue clear: http://www.youtube.com/watch?v=Ybvzh_wTnSE <body style="background-color: #000;"> <div id="container" style="display:none;"> <div id="side-menu" style="display:none;"> <div id="header_top"></div> <a href="#dives" onclick="showdives();"><div id="header_dives" class="selected"></div></a> <div id="header_spacer1"></div> <a href="#explore" onclick="showexplore();"><div id="header_explore"></div></a> <div id="header_spacer2"></div> <a href="#search" onclick="showsearch();"><div id="header_search"></div></a> <div id="header_spacer3"></div> <a href="#settings" onclick="showsettings();"><div id="header_settings"></div></a> <div id="header_bottom"></div> </div> <div id="slide_mask"> <!-- START of LOGIN page --> <div data-role="page" id="login"> <div id="home_frame"> <div id="home_logo"></div> <div id="home_fblogin" onclick="login()"></div> <div class="home_login"> <p>Email: <input type="text" name="user[email]" size="30"/></p> <p>Password: <input type="password" name="user[password]" size="30"/></p> <button onclick="show_page_home();">LOGIN</button> </div> </div> </div> <!-- END of LOGIN page --> <!-- START of LOGIN page --> <div data-role="page" id="dives" class="right_pane"> <p>My dives !</p> </div><!-- /content --> <div data-role="page" id="explore" class="hidden right_pane"> <p>My explore !</p> </div><!-- /content --> <div data-role="page" id="search" class="hidden right_pane"> <p>My search !</p> </div><!-- /content --> <div data-role="page" id="settings" class="hidden right_pane"> <p>My settings !</p> <button onclick="logout_db();">logout</button> </div><!-- /content --> <!-- END of LOGIN page --> </div> </div> <div id="log"></div> <div id="data"></div> </body> And the relevant CSS: body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat; -webkit-user-select: none; /* prevent copy paste for all elements */ } #container { width:320px; height:460px; overflow: hidden;} input{ -webkit-user-select: text; /* enable copy paste for elements with this class */} a {-webkit-user-select: none; /* prevent copy paste for all elements */} span {-webkit-user-select: none; /* prevent copy paste for all elements */} #side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block; overflow: hidden; top: 0px; left: 0px; } #header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;} #header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;} #header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;} #header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;} #header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;} #header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_search.selected{background: url(../img/header/search_selected.png) no-repeat;} #header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;} #header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;} #header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;} #header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;} .hidden {display: none;} .right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;} #slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px; width: 263.5px; height: 460px; top: 0;} and the bit of JS: /////////////////////////////////// //MENU MECHANICS /////////////////////////////////// function showdives(){ $("#side-menu .selected").removeClass("selected"); $("#header_dives").addClass("selected"); } function showexplore(){ $("#side-menu .selected").removeClass("selected"); $("#header_explore").addClass("selected"); } function showsearch(){ $("#side-menu .selected").removeClass("selected"); $("#header_search").addClass("selected"); } function showsettings(){ $("#side-menu .selected").removeClass("selected"); $("#header_settings").addClass("selected"); } the onclick only add/remove the "selected" class to the menu items so... any hint ? been trying eveything for hours and still can't get it neat .. :(

    Read the article

  • jQuery to populate array-named form fields based on first entered value where number of fields is un

    - by da5id
    Greetings, I have a form with a variable number of inputs, a simplified version of which looks like this: <form> <label for="same">all the same as first?</label> <input id="same" name="same" type="checkbox" /> <input type="text" id="foo[1]" name="foo[1]" value="" /> <input type="text" id="foo[2]" name="foo[2]" value="" /> <input type="text" id="foo[3]" name="foo[3]" value="" /> <input type="text" id="foo[4]" name="foo[4]" value="" /> <input type="text" id="foo[5]" name="foo[5]" value="" /> </form> The idea is to tick the #same checkbox and have jQuery copy the value from #foo[1] into #foo[2], #foo[3], etc. They also need to clear if #same is unchecked. There can be any number of #foo inputs, based upon input from a previous stage of the form, and this bit is giving me trouble. I'm sure I'm missing something obvious, but I can't get any variation on $('#dest').val($('#source').val()); to work. Help!

    Read the article

  • jQuery: Get height of hidden element in jQuery 1.4.2

    - by mkoryak
    I need to get height of an element that is within a div that is hidden. Right now I show the div, get the height, and hide the parent div. This seems a bit silly. Is there a better way? I'm using jQuery 1.4.2: $select.show(); optionHeight = $firstOption.height(); //we can only get height if its visible $select.hide();

    Read the article

  • How to form submit and show a different page in ASP.Net MVC?

    - by melaos
    hi guys i'm new to asp.net mvc.. so basically i just build up a two page app which takes the registration information of the user and post it to the database. i use a lot of jquery and ajax calls to retrieve data from the database using linq to sql stored proc object. and currently i'm stuck at one page where after the user submits the form it should redirect him to /Home/AddProduct. What i found was the error: Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.Web.HttpException: Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster. what used on my form are basically a combination of html controls, asp.net controls and some asp.net mvc type controls. i submit the form using action="/Home/ProductAdded" and after doing some googling i found i was supposed to add in the machine key but after doing so, the index page becomes unviewable. because it couldn't find the index file now. removing the action helps, but now it just doesn't go anywhere. so what am i missing here? i feel i'm missing a lot of fundamentals understanding about asp.net mvc and i don't even know how to submit a form and go to a different page here!!

    Read the article

  • jQuery user intput to control option of one jquery function

    - by Tristan
    Hello, i'd like an input to control that : jQuery.ajax({ type: "get", dataType: "jsonp", url: "http://www.foo.com/something.php", data: {numberInput: "NUMER I WANT TO CONTROL" }, On the HTML side i've <input type="text id="jqueryControl" /> I want when a user enters a number ito the jqueryControl to insert it in the .ajax function and reload the data according to the new value entered. Any idea to do that please ? Thanks

    Read the article

  • How to exclude read only fields using :input in jquery?

    - by melaos
    hi guys, thus far i've only been using some basic jquery selectors and functions. but i'm looking at this clear form function and i can't figure out how to add it so i can remove hidden inputs and readonly input from getting cleared. can anybody help? thanks. function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(':input', form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type == 'text' || type == 'password' || tag == 'textarea') this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their 'value' changed else if (type == 'checkbox' || type == 'radio') this.checked = false; // select elements need to have their 'selectedIndex' property set to -1 // (this works for both single and multiple select elements) else if (tag == 'select') this.selectedIndex = -1; }); };

    Read the article

  • jQuery user input to control option of one jquery function

    - by Tristan
    Hello, I'd like an input to control that : jQuery.ajax({ type: "get", dataType: "jsonp", url: "http://www.foo.com/something.php", data: {numberInput: "NUMBER I WANT TO CONTROL" }, On the HTML side I've <input type="text" id="jqueryControl" /> I want when a user enters a number into the jqueryControl to insert it in the .ajax function and reload the data according to the new value entered. Any idea to do that please ? Thanks

    Read the article

  • Browser freezes when try to call a JS function along with submission of a form.

    - by Waseem
    I have form in my view like following 1 <div> 2 <% form_tag facebook_user_path do %> 3 <label>Use my photo and name from facebook?</label><br /> 4 <%= check_box_tag 'use_name_and_photo', 'yes', true %> 5 <img src="<%= @user.pic %>" /><% @user.name %> 6 7 <%= submit_tag "Finish", :id => "use_name_and_photo_submit" %> 8 <% end %> 9 </div> I have attached some JS handlers using Jquery to this form. 1 var fb = { 2 extendedPermissions: function () { 3 $("#use_name_and_photo_submit").click(function (event) { 4 FB.Connect.showPermissionDialog("email,read_stream,publish_stream", function (perms) { 5 if (!perms) { 6 alert("You have to grant facebook extended permissions to further browse the application."); 7 } else { 8 $("form").submit(function () { 9 $.post($(this).attr("action"), $(this).serialize(), null, "script"); 10 }); 11 } 12 }); 13 event.preventDefault(); 14 return false; 15 }); 16 } 17 }; 18 19 $(document).ready(function () { 20 fb.extendedPermissions(); 21 }); What I want is that when the user clicks on the "Finish" button, he is prompted for the facebook permissions dialogue and when he gives the permissions, the form is submitted to FacebookUsersController. Right now when I click the "Finish" button, facebook permissions dialogue is initiated but before I am prompted for the actual permission submission window, the browser freezes. Just like I have pressed Esc during the process. In fact status bar of the browser says "Stopped". Any help is highly appreciated.

    Read the article

  • Zend Framework: isValid() clears values from disabled form fields!

    - by Andrew
    When you submit a form, disabled form fields are not submitted in the request. So if your form has a disabled form field, it makes working with Zend_Form::isValid() a little frustrating. $form->populate($originalData); $form->my_text_field->disabled = 'disabled'; if (!$form->isValid($_POST)) { //form is not valid //since my_text_field is disabled, it doesn't get submitted in the request //isValid() will clear the disabled field value, so now we have to re-populate the field $form->my_text_field->value($originalData['my_text_field']); $this->view->form = $form; return; } // if the form is valid, and we call $form->getValues() to save the data, our disabled field value has been cleared! Without having to re-populate the form, and create duplicate lines of code, what is the best way to approach this problem?

    Read the article

  • How to create a new WCF/MVC/jQuery application from scratch

    - by pjohnson
    As a corporate developer by trade, I don't get much opportunity to create from-the-ground-up web sites; usually it's tweaks, fixes, and new functionality to existing sites. And with hobby sites, I often don't find the challenges I run into with enterprise systems; usually it's starting from Visual Studio's boilerplate project and adding whatever functionality I want to play around with, rarely deploying outside my own machine. So my experience creating a new enterprise-level site was a bit dated, and the technologies to do so have come a long way, and are much more ready to go out of the box. My intention with this post isn't so much to provide any groundbreaking insights, but to just tie together a lot of information in one place to make it easy to create a new site from scratch. Architecture One site I created earlier this year had an MVC 3 front end and a WCF 4-driven service layer. Using Visual Studio 2010, these project types are easy enough to add to a new solution. I created a third Class Library project to store common functionality the front end and services layers both needed to access, for example, the DataContract classes that the front end uses to call services in the service layer. By keeping DataContract classes in a separate project, I avoided the need for the front end to have an assembly/project reference directly to the services code, a bit cleaner and more flexible of an SOA implementation. Consuming the service Even by this point, VS has given you a lot. You have a working web site and a working service, neither of which do much but are great starting points. To wire up the front end and the services, I needed to create proxy classes and WCF client configuration information. I decided to use the SvcUtil.exe utility provided as part of the Windows SDK, which you should have installed if you installed VS. VS also provides an Add Service Reference command since the .NET 1.x ASMX days, which I've never really liked; it creates several .cs/.disco/etc. files, some of which contained hardcoded URL's, adding duplicate files (*1.cs, *2.cs, etc.) without doing a good job of cleaning up after itself. I've found SvcUtil much cleaner, as it outputs one C# file (containing several proxy classes) and a config file with settings, and it's easier to use to regenerate the proxy classes when the service changes, and to then maintain all your configuration in one place (your Web.config, instead of the Service Reference files). I provided it a reference to a copy of my common assembly so it doesn't try to recreate the data contract classes, had it use the type List<T> for collections, and modified the output files' names and .NET namespace, ending up with a command like: svcutil.exe /l:cs /o:MyService.cs /config:MyService.config /r:MySite.Common.dll /ct:System.Collections.Generic.List`1 /n:*,MySite.Web.ServiceProxies http://localhost:59999/MyService.svc I took the generated MyService.cs file and drop it in the web project, under a ServiceProxies folder, matching the namespace and keeping it separate from classes I coded manually. Integrating the config file took a little more work, but only needed to be done once as these settings didn't often change. A great thing Microsoft improved with WCF 4 is configuration; namely, you can use all the default settings and not have to specify them explicitly in your config file. Unfortunately, SvcUtil doesn't generate its config file this way. If you just copy & paste MyService.config's contents into your front end's Web.config, you'll copy a lot of settings you don't need, plus this will get unwieldy if you add more services in the future, each with its own custom binding. Really, as the only mandatory settings are the endpoint's ABC's (address, binding, and contract) you can get away with just this: <system.serviceModel>  <client>    <endpoint address="http://localhost:59999/MyService.svc" binding="wsHttpBinding" contract="MySite.Web.ServiceProxies.IMyService" />  </client></system.serviceModel> By default, the services project uses basicHttpBinding. As you can see, I switched it to wsHttpBinding, a more modern standard. Using something like netTcpBinding would probably be faster and more efficient since the client & service are both written in .NET, but it requires additional server setup and open ports, whereas switching to wsHttpBinding is much simpler. From an MVC controller action method, I instantiated the client, and invoked the method for my operation. As with any object that implements IDisposable, I wrapped it in C#'s using() statement, a tidy construct that ensures Dispose gets called no matter what, even if an exception occurs. Unfortunately there are problems with that, as WCF's ClientBase<TChannel> class doesn't implement Dispose according to Microsoft's own usage guidelines. I took an approach similar to Technology Toolbox's fix, except using partial classes instead of a wrapper class to extend the SvcUtil-generated proxy, making the fix more seamless from the controller's perspective, and theoretically, less code I have to change if and when Microsoft fixes this behavior. User interface The MVC 3 project template includes jQuery and some other common JavaScript libraries by default. I updated the ones I used to the latest versions using NuGet, available in VS via the Tools > Library Package Manager > Manage NuGet Packages for Solution... > Updates. I also used this dialog to remove packages I wasn't using. Given that it's smart enough to know the difference between the .js and .min.js files, I was hoping it would be smart enough to know which to include during build and publish operations, but this doesn't seem to be the case. I ended up using Cassette to perform the minification and bundling of my JavaScript and CSS files; ASP.NET 4.5 includes this functionality out of the box. The web client to web server link via jQuery was easy enough. In my JavaScript function, unobtrusively wired up to a button's click event, I called $.ajax, corresponding to an action method that returns a JsonResult, accomplished by passing my model class to the Controller.Json() method, which jQuery helpfully translates from JSON to a JavaScript object.$.ajax calls weren't perfectly straightforward. I tried using the simpler $.post method instead, but ran into trouble without specifying the contentType parameter, which $.post doesn't have. The url parameter is simple enough, though for flexibility in how the site is deployed, I used MVC's Url.Action method to get the URL, then sent this to JavaScript in a JavaScript string variable. If the request needed input data, I used the JSON.stringify function to convert a JavaScript object with the parameters into a JSON string, which MVC then parses into strongly-typed C# parameters. I also specified "json" for dataType, and "application/json; charset=utf-8" for contentType. For success and error, I provided my success and error handling functions, though success is a bit hairier. "Success" in this context indicates whether the HTTP request succeeds, not whether what you wanted the AJAX call to do on the web server was successful. For example, if you make an AJAX call to retrieve a piece of data, the success handler will be invoked for any 200 OK response, and the error handler will be invoked for failed requests, e.g. a 404 Not Found (if the server rejected the URL you provided in the url parameter) or 500 Internal Server Error (e.g. if your C# code threw an exception that wasn't caught). If an exception was caught and handled, or if the data requested wasn't found, this would likely go through the success handler, which would need to do further examination to verify it did in fact get back the data for which it asked. I discuss this more in the next section. Logging and exception handling At this point, I had a working application. If I ran into any errors or unexpected behavior, debugging was easy enough, but of course that's not an option on public web servers. Microsoft Enterprise Library 5.0 filled this gap nicely, with its Logging and Exception Handling functionality. First I installed Enterprise Library; NuGet as outlined above is probably the best way to do so. I needed a total of three assembly references--Microsoft.Practices.EnterpriseLibrary.ExceptionHandling, Microsoft.Practices.EnterpriseLibrary.ExceptionHandling.Logging, and Microsoft.Practices.EnterpriseLibrary.Logging. VS links with the handy Enterprise Library 5.0 Configuration Console, accessible by right-clicking your Web.config and choosing Edit Enterprise Library V5 Configuration. In this console, under Logging Settings, I set up a Rolling Flat File Trace Listener to write to log files but not let them get too large, using a Text Formatter with a simpler template than that provided by default. Logging to a different (or additional) destination is easy enough, but a flat file suited my needs. At this point, I verified it wrote as expected by calling the Microsoft.Practices.EnterpriseLibrary.Logging.Logger.Write method from my C# code. With those settings verified, I went on to wire up Exception Handling with Logging. Back in the EntLib Configuration Console, under Exception Handling, I used a LoggingExceptionHandler, setting its Logging Category to the category I already had configured in the Logging Settings. Then, from code (e.g. a controller's OnException method, or any action method's catch block), I called the Microsoft.Practices.EnterpriseLibrary.ExceptionHandling.ExceptionPolicy.HandleException method, providing the exception and the exception policy name I had configured in the Exception Handling Settings. Before I got this configured correctly, when I tried it out, nothing was logged. In working with .NET, I'm used to seeing an exception if something doesn't work or isn't set up correctly, but instead working with these EntLib modules reminds me more of JavaScript (before the "use strict" v5 days)--it just does nothing and leaves you to figure out why, I presume due in part to the listener pattern Microsoft followed with the Enterprise Library. First, I verified logging worked on its own. Then, verifying/correcting where each piece wires up to the next resolved my problem. Your C# code calls into the Exception Handling module, referencing the policy you pass the HandleException method; that policy's configuration contains a LoggingExceptionHandler that references a logCategory; that logCategory should be added in the loggingConfiguration's categorySources section; that category references a listener; that listener should be added in the loggingConfiguration's listeners section, which specifies the name of the log file. One final note on error handling, as the proper way to handle WCF and MVC errors is a whole other very lengthy discussion. For AJAX calls to MVC action methods, depending on your configuration, an exception thrown here will result in ASP.NET'S Yellow Screen Of Death being sent back as a response, which is at best unnecessarily and uselessly verbose, and at worst a security risk as the internals of your application are exposed to potential hackers. I mitigated this by overriding my controller's OnException method, passing the exception off to the Exception Handling module as above. I created an ErrorModel class with as few properties as possible (e.g. an Error string), sending as little information to the client as possible, to both maximize bandwidth and mitigate risk. I then return an ErrorModel in JSON format for AJAX requests: if (filterContext.HttpContext.Request.IsAjaxRequest()){    filterContext.Result = Json(new ErrorModel(...));    filterContext.ExceptionHandled = true;} My $.ajax calls from the browser get a valid 200 OK response and go into the success handler. Before assuming everything is OK, I check if it's an ErrorModel or a model containing what I requested. If it's an ErrorModel, or null, I pass it to my error handler. If the client needs to handle different errors differently, ErrorModel can contain a flag, error code, string, etc. to differentiate, but again, sending as little information back as possible is ideal. Summary As any experienced ASP.NET developer knows, this is a far cry from where ASP.NET started when I began working with it 11 years ago. WCF services are far more powerful than ASMX ones, MVC is in many ways cleaner and certainly more unit test-friendly than Web Forms (if you don't consider the code/markup commingling you're doing again), the Enterprise Library makes error handling and logging almost entirely configuration-driven, AJAX makes a responsive UI more feasible, and jQuery makes JavaScript coding much less painful. It doesn't take much work to get a functional, maintainable, flexible application, though having it actually do something useful is a whole other matter.

    Read the article

  • MVC Validation with ModelState.isValid through a wizard

    - by Emmanuel TOPE
    I'm working on a small educational project on MVC 3, and I'm facing a small problem, when attempting to handle validation in my application through a wizard. I tried to get benefit from the ability of MVC3 to deliver content of a different view using the same URL, when handling an [HttpPost] method on a page. I my case,my main model's class contains about ten [Required] properties, that I would like to expose through a small wizard in 3 steps , So I want that the user may be able to enter his personal informations in the first step, then respond to some questions in the second stepp and finally receive a confirmation mail from the web application whit his credentials in the last step. I can't access the last step, because of the ModelState.isValid method that I use to handle validations, and which can't perform properly if I define some properties as [Required], but don't put them on the first view. As the replies to those questions remain in a couple of choices, I've thinked that I may use some nullable bool? for in order to avoid validation issues, but know that it's not the proper way. Are there someone who would like to help me find a way to extend my validation to those three steps ? Thanks in advance and sorry for my english, I'm not a native speaker.

    Read the article

  • jQuery and Windows Azure

    - by Latest Microsoft Blogs
    The goal of this blog entry is to describe how you can host a simple Ajax application created with jQuery in the Windows Azure cloud. In this blog entry, I make no assumptions. I assume that you have never used Windows Azure and I am going to walk through Read More......(read more)

    Read the article

  • Google Analytics and jQuery, happy together

    - by webbes
    Google Analytics is great out of the box already, but you can do much more than just registering your page loads. Especially with all these “Web 2.0” sites it can be convenient to not register page loads, but events! In this blog post I’ll show you how you can use jQuery in combination with Google Analytics to get a great insight on what actually happens on your website while you’re not looking!...(read more)

    Read the article

  • Ashamed to admit using jQuery?

    - by Matt Stevens
    Something I've noticed over the past few weeks is how many big commercial websites use jQuery combined with lots of plugins - but don't admit it. They will rename the main library to something obscure, as well as the plugins. Quite a few will even remove the comments that contain the MIT/GPL license information. (just noticed today that odeon.co.uk have done exactly this) Why are they doing this? are they abashed by the face that they are using a free and open source library?

    Read the article

  • consume a .net webservice using jQuery

    - by Babunareshnarra
    Implementation shows the way to consume web service using jQuery. The client side AJAX with HTTP POST request is significant when it comes to loading speed and responsiveness.Following is the service created that return's string in JSON.[WebMethod][ScriptMethod(ResponseFormat = ResponseFormat.Json)]public string getData(string marks){    DataTable dt = retrieveDataTable("table", @"              SELECT * FROM TABLE WHERE MARKS='"+ marks.ToString() +"' ");    List<object> RowList = new List<object>();    foreach (DataRow dr in dt.Rows)    {        Dictionary<object, object> ColList = new Dictionary<object, object>();        foreach (DataColumn dc in dt.Columns)        {            ColList.Add(dc.ColumnName,            (string.Empty == dr[dc].ToString()) ? null : dr[dc]);        }        RowList.Add(ColList);    }    JavaScriptSerializer js = new JavaScriptSerializer();    string JSON = js.Serialize(RowList);    return JSON;}Consuming the webservice $.ajax({    type: "POST",    data: '{ "marks": "' + val + '"}', // This is required if we are using parameters    contentType: "application/json",    dataType: "json",    url: "/dataservice.asmx/getData",    success: function(response) {               RES = JSON.parse(response.d);        var obj = JSON.stringify(RES);     }     error: function (msg) {                    alert('failure');     }});Remember to reference jQuery library on the page.

    Read the article

< Previous Page | 61 62 63 64 65 66 67 68 69 70 71 72  | Next Page >