none
Command Button RRS feed

  • Question

  • I have the following code for a crossword that when I click the Submit Your Crossword button it does nothing.  Everything else is working fine.  I am using SharePoint Server 2007.  Am I missing something?

    <script type="text/javascript">
    	$( document ).ready( function() {
    	// Add interactivity on mouseup and keyup for the inputs
    	$( '#crossword' ).find( 'input' ).mouseup( function( event ) {
    		// Select the letter in the input so it can be replaced by simply typing another letter
    		$( this ).select();
    		event.preventDefault();
    	}).focus( function() {
    		// Select the letter in the input so it can be replaced by simply typing another letter
    		$( this ).select();
    	}).keyup( function( event ) {
    		var code = event.keyCode || event.which;
    		// Don't do anything if the Tab, Shift, Backspace, Space, or Delete keys are pressed.
    		if ( code === 9 || code === 16 || code === 8 || code === 46 ) {
    			return true;
    		}
    		// Automagically remove spaces when they are typed.
    		else if ( code === 32 ) {
    			$( this ).val( $( this ).val().replace(/\s/g, ''));
    		}
    		// Automatically focus on the next appropriate input once a letter or symbol is entered or an arrow key is pressed.
    		// This is sort of a best-guess interaction based on where the user is typing.
    		else {
    			// Cache several variables that will be used to move focus to other inputs in the crossword.
    			// If we try to get an input that doesn't exist, the script fails gracefully by simply not moving focus to another input.
    			// Cache the class of the current input.
    			var inputClass = $( this ).attr( 'class' );
    			// Cache the table cell containing the current input.
    			var cell = $( this ).closest( 'td' );
    			// Cache the index of the current table cell.
    			var colIndex = $( cell ).parent().children().index( cell );
    			// Cache the next input to the right of the current input.
    			var nextAcross = $( cell ).next().find( 'input' );
    			// Cache the previous input to the left of the current input.
    			var prevAcross = $( cell ).prev().find( 'input' );
    			// Cache the value of the next input to the right of the current input.
    			var nextAcrossVal = $( nextAcross ).val();
    			// Cache the next input below the current input (this is why we need the column index of the current table cell).
    			var nextDown = $( cell ).parent().next().find( 'td:eq(' + colIndex + ')' ).find( 'input' );
    			// Cache the previous input above the current input (this is why we need the column index of the current table cell).
    			var prevDown = $( cell ).parent().prev().find( 'td:eq(' + colIndex + ')' ).find( 'input' );
    			// If the arrow keys are pressed, go to the appropriate input (if available).
    			switch ( code ) {
    				case 37: // left arrow
    					prevAcross.focus();
    					return false;
    					break;
    				case 38: // up arrow
    					prevDown.focus();
    					return false;
    					break;
    				case 39: // right arrow
    					nextAcross.focus();
    					return false;
    					break;
    				case 40: // down arrow
    					nextDown.focus().addClass( "force-down" ); // If user pressed the down arrow, they probably want to continue typing a down response.
    					return false;
    					break;
    				default:
    			}
    			// If the input is for both across AND down responses...
    			if ( inputClass.indexOf( "across" ) !== -1 && inputClass.indexOf( "down" ) !== -1 ) {
    				// ...and if the input doesn't have the 'force-down' class and the next across input is available but empty, focus on the next across input...
    				if ( inputClass.indexOf( "force-down" ) === -1 && nextAcrossVal === "" ) {
    					$( nextAcross ).focus();
    				}
    				// ...otherwise focus on the next down input and add the force-down class to the next down input.
    				else {
    					$( nextDown ).addClass( "force-down" ).focus();
    				}
    			}
    			// If the input is ONLY for down responses focus on the next down input and add the force-down class to the next down input.
    			else if ( inputClass.indexOf( "across" ) === -1 && inputClass.indexOf( "down" ) !== -1 ) {
    				$( nextDown ).addClass( "force-down" ).focus();
    			}
    			// If the input is ONLY for across responses focus on the next across input.
    			else {
    				$( nextAcross ).focus();
    			}
    			// Remove the force-down class once the focus has moved on from the current input.
    			$( this ).removeClass( "force-down" );
    		}
    	});
    	$( '#crossword-submit' ).click( function( event ) {
    		// If you decide to use a hyperlink instead of a button input, this will prevent the hyperlink from actually navigating away from the page or to an anchor.
    		event.preventDefault();
    		// Disable the button so the user can't click it again and submit the answers more than once.
    		$( this ).prop( 'disabled', true );
    		// Prevent submission if the crossword isn't completed.
    		if ( $( '#crossword' ).find( 'input' ).filter( function() { return $( this ).val() === ""; }).length !== 0 ) {
    			alert( "You have left some answers blank. Please complete all answers before submitting." );
    			$( this ).removeProp( 'disabled' );
    			return false;
    		}
    		// Confirm that the user wants to submit their answers.
    		var confirmResponse = confirm( "Are you sure you are ready to submit your answers? Once submitted they cannot be changed.\n\nClick OK to continue or Cancel to review your answers." );
    		if ( confirmResponse === false ) {
    			$( this ).removeProp( 'disabled' );
    			return false;
    		}
    		// Create an object to associate each SharePoint column with the class name used for the input and the user's response for that column
    		var responses = {
    			"oneAcross": {
    				"selector": "one-across",
    				"column": "OneAcross",
    				"answer": ""
    			},
    			"oneDown": {
    				"selector": "one-down",
    				"column": "OneDown",
    				"answer": ""
    			},
    			"twoDown": {
    				"selector": "two-down",
    				"column": "TwoDown",
    				"answer": ""
    			},
    			"threeDown": {
    				"selector": "three-down",
    				"column": "ThreeDown",
    				"answer": ""
    			},
    			"fourAcross": {
    				"selector": "four-across",
    				"column": "FourAcross",
    				"answer": ""
    			}
    			},
    			"fiveDown": {
    				"selector": "five-down",
    				"column": "FiveDown",
    				"answer": ""
    			}
    			},
    			"sixDown": {
    				"selector": "six-down",
    				"column": "SixDown",
    				"answer": ""
    			}
    			},
    			"sevenDown": {
    				"selector": "seven-down",
    				"column": "SevenDown",
    				"answer": ""
    			}
    			},
    			"eightDown": {
    				"selector": "eight-down",
    				"column": "EightDown",
    				"answer": ""
    			}
    			},
    			"nineAcross": {
    				"selector": "nine-across",
    				"column": "NineAcross",
    				"answer": ""
    			}
    			},
    			"tenAcross": {
    				"selector": "ten-across",
    				"column": "TenAcross",
    				"answer": ""
    			}
    			},
    			"elevenAcross": {
    				"selector": "eleven-across",
    				"column": "elevenAcross",
    				"answer": ""
    			}
    			},
    			"twelveAcross": {
    				"selector": "twelve-across",
    				"column": "twelveAcross",
    				"answer": ""
    			}
    		};
    		// Create the batchCmd variable that will be used to create the new list item
    		var batchCmd = '<Batch OnError="Continue"><Method ID="1" Cmd="New">';
    		// Concatenate values of each response input by iterating over the object representing the responses
    		$.each( responses, function() {
    			// Cache the current item in the responses object.
    			var $response = this;
    			// For each input in the crossword associated with the current response object, get the values and save them in the answer property.
    			$( '.' + $response.selector ).each( function() {
    				$response.answer += $( this ).val().toLowerCase();
    			});
    			// Add the response to the batchCmd
    			batchCmd += '<Field Name="' + $response.column + '"><![CDATA[' + $response.answer + ']]></Field>';
    		});
    		// Close the batchCmd variable
    		batchCmd += '</Method></Batch>';
    		// Create a new list item on the destination list using the batchCmd variable
    		$().SPServices({
    			operation: "UpdateListItems",
    			async: true,
    			webURL: "http://operations.homestead.blahblah.com/sites/EIS/SEEIS/SSC/Lists/",
    			listName: "Crossword",
    			updates: batchCmd,
    			completefunc: function( xData, Status ) {
    				// If the AJAX call could not be completed, alert the user or include your own code to handle errors.
    				if ( Status !== "success" ) {
    					alert( "There was a problem submitting your answers. Please try again later." );
    				}
    				else {
    					// If there was an error creating the list item, alert the user or include your own code to handle errors.
    					if ( $( xData.responseXML ).find( 'ErrorCode' ).text() !== "0x00000000" ) {
    						alert( "There was a problem submitting your answers. Please try again later." );
    					}
    					// if the list item was successfully created, alert the user and navigate to the Source parameter in the URL (or to a URL of your choosing).
    					else {
    						alert( "Your answers were submitted successfully! Click OK to continue." );
    						if ( window.location.href.indexOf( "Source=" ) !== -1 ) {
    							var url = window.location.href.split( "Source=" )[1].split( "&" )[0];
    							window.location.href = url;
    						}
    						else {
    							window.location.href = "/";
    						}
    					}
    				}
    			}
    		});
    	});
    });
    </script>

    Friday, April 3, 2015 7:20 PM

Answers