12 Replies - 304 Views - Last Post: 23 September 2013 - 04:21 AM

#1 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

JQUERY, Finding the active textbox so I can update the inactive ones

Posted 20 September 2013 - 05:40 AM

Currently I am trying to create a a spreadsheet type page, it is a table filled with textboxes.


My script at the minute on every key stroke it replaces each text box, this causes the user to have to click in the box again after each keystroke, so I would like to only update the inactive cells with the values of the active cell, just like excel


is there any JQUERY methods that could send the name of the textbox in focus or something to isolate the indervisual text box that is being edited.

Any ideas are appreciated?

Thanks Dale

This post has been edited by DkSnowdon: 20 September 2013 - 06:19 AM


Is This A Good Question/Topic? 0
  • +

Replies To: JQUERY, Finding the active textbox so I can update the inactive ones

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 20 September 2013 - 07:26 AM

Quote

Any ideas are appreciated?

why do you replace the text box in the first place?
Was This Post Helpful? 0
  • +
  • -

#3 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 20 September 2013 - 09:20 AM

Well when people are trying into the text boxes i am refreshing all the textboxes because i want to be using because i am using the data in from the other cell in calculation in the other cells, the same way excel would.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,540
  • Joined: 12-December 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 20 September 2013 - 10:17 AM

It is not clear to me what you are currently doing. You'll need to post your HTML structure and the jQuery/Javascript that you are using, wrapped in CODE tags.

This post has been edited by andrewsw: 20 September 2013 - 10:19 AM

Was This Post Helpful? 0
  • +
  • -

#5 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 22 September 2013 - 12:00 PM

The structure is as follows
<div id="main">

<form action="query" method="post" name="queryForm" id="queryID">

<div id="settings_con">Enter Your Labour Rate:  <input name="labourRate" class="green_cell" type="text" value="65.11" size="20" /></div>


<table width="100%"	class="table_con">
	<tr>
    	<th>Hrs 2 menu	</th>
        <th width="25%">Description</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
        <th>Col10</th>
        <th>Col11</th>
    </tr>
    
    <tr class="row1"> <!-- Title row -->
    	<td><input name="row1[]" class="yellow_cell" type="text" /></td>
        <td><input name="row1[]" type="text" /></td> <!-- Description cell -->
        <td><input name="row1[]" type="text" value =""/></td>
        <td><input name="row1[]" type="text" value =""/></td>
        <td><input name="row1[]" type="text" value =""/></td>
        <td><input name="row1[]" type="text" value =""/></td>
        <td><input name="row1[]" type="text" value =""/></td>
        <td><input name="row1[]" type="text" /></td>
        <td><input name="row1[]" type="text" /></td>
        <td><input name="row1[]" type="text" value ="" /></td>
        <td><input name="row1[]" type="text" value ="" /></td>
    </tr>
     
    <tr class="row2">  
    	<td><input name="row2[]" class="yellow_cell" type="text" /></td>
        <td><input name="row2[]" type="text" value="" /></td> <!-- Description cell -->
        <td><input name="row2[]" class="green_cell" type="text" /></td>
        <td><input name="row2[]" class="green_cell" value="0.90" type="text" /></td>
        <td><input name="row2[]" class="green_cell" value="0.60" type="text" /></td>
        <td><input name="row2[]" class="yellow_cell" type="text" /></td>
        <td><input name="row2[]" class="yellow_cell" type="text" /></td>
        <td><input name="row2[]" type="text" /></td>
        <td><input name="row2[]" type="text" /></td>
        <td><input name="row2[]" class="yellow_cell" type="text" /></td>
        <td><input name="row2[]" class="yellow_cell" type="text" /></td>
    </tr>
    
    <tr class="row3"> 
    	<td><input name="row3[]" class="yellow_cell" type="text" /></td>
        <td><input name="row3[]" type="text" value='" /></td> <!-- Description cell -->
        <td><input name="row3[]" class="yellow_cell" type="text" /></td>
        <td><input name="row3[]" class="yellow_cell" value="0.90" type="text" /></td>
        <td><input name="row3[]" class="yellow_cell" value="0.60" type="text" /></td>
        <td><input name="row3[]" class="yellow_cell" type="text" /></td>
        <td><input name="row3[]" type="text" /></td>
        <td><input name="row3[]" type="text" /></td>
        <td><input name="row3[]" type="text" /></td>
        <td><input name="row3[]" class="yellow_cell" type="text" /></td>
        <td><input name="row3[]" class="yellow_cell" type="text" /></td>
    </tr>
</table>


<h1 class="test">dd</h1>
</form>

</div>




$(document).ready(function() {  

	$("form#queryID").live("keyup", function(e) {
		var value = $('#queryID').serialize();
		
		//alert(value);
		
		search(value);
		
		
	});
	
	
	
	function search(value) {
		var query_value = value;
		
		if(query_value !== ''){
			$.ajax({
				type: "POST",
				url: "query.php",
				data: { query: query_value },
				cache: false,
				success: function(html){
					$("h1.test").html(html);
				}
			});
		}return false;    
	}

});





And thank you in advance for your time
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 22 September 2013 - 12:14 PM

View PostDkSnowdon, on 20 September 2013 - 06:20 PM, said:

Well when people are trying into the text boxes i am refreshing all the textboxes because i want to be using because i am using the data in from the other cell in calculation in the other cells, the same way excel would.

I see nothing that indicates other cells using the currently input value. All I see is an AJAX query triggered if someone types somewhere inside the form.
Was This Post Helpful? 0
  • +
  • -

#7 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 22 September 2013 - 12:18 PM

View PostDormilich, on 22 September 2013 - 07:14 PM, said:

View PostDkSnowdon, on 20 September 2013 - 06:20 PM, said:

Well when people are trying into the text boxes i am refreshing all the textboxes because i want to be using because i am using the data in from the other cell in calculation in the other cells, the same way excel would.

I see nothing that indicates other cells using the currently input value. All I see is an AJAX query triggered if someone types somewhere inside the form.



The jquery runs this sorry, i have only added the php echo to one form for simplicty while testing but wonce i have it working it will echo to all textboxes.

<?php


// Get the data from the java script
$row = $_POST['query'];

$output = '';// Initilise output

// Turn the string into a multi-dimensional array
parse_str($row, $output);



?>
<tr>
    	<th>Hrs 2 menu	</th>
        <th width="25%">Description</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
        <th>Col10</th>
        <th>Col11</th>
    </tr>
    
    <tr class="row1"> <!-- Title row -->
    	<td><input name="row[0][]" type="text" value="<? echo $output['row1'][0];?>" class="yellow_cell" /></td>
        <td><input name="row[0][]" type="text" value="" /></td> <!-- Description cell -->
        <td><input name="row[0][]" type="text" value=""/></td>
        <td><input name="row[0][]" type="text" value=""/></td>
        <td><input name="row[0][]" type="text" value=""/></td>
        <td><input name="row[0][]" type="text" value=""/></td>
        <td><input name="row[0][]" type="text" value=""/></td>
        <td><input name="row[0][]" type="text" value="" /></td>
        <td><input name="row[0][]" type="text" value="" /></td>
        <td><input name="row[0][]" type="text" value="" /></td>
        <td><input name="row[0][]" type="text" value="" /></td>
    </tr>
     
    <tr class="row2">  
    	<td><input name="row[1][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[1][]" type="text" value="" /></td> <!-- Description cell -->
        <td><input name="row[1][]" type="text" value="" class="green_cell" /></td>
        <td><input name="row[1][]" type="text" value="0.90" class="green_cell" /></td>
        <td><input name="row[1][]" type="text" value="0.60" class="green_cell" /></td>
        <td><input name="row[1][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[1][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[1][]" type="text" value="" /></td>
        <td><input name="row[1][]" type="text" value="" /></td>
        <td><input name="row[1][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[1][]" type="text" value="" class="yellow_cell" /></td>
    </tr>
    
    <tr class="row3">
    	<td><input name="row[2][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[2][]" type="text" value="" /></td> <!-- Description cell -->
        <td><input name="row[2][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[2][]" type="text" value="0.90"  class="yellow_cell" /></td>
        <td><input name="row[2][]" type="text" value="0.60" class="yellow_cell" /></td>
        <td><input name="row[2][]" type="text" value=""class="yellow_cell" /></td>
        <td><input name="row[2][]" type="text" value="" /></td>
        <td><input name="row[2][]" type="text" value="" /></td>
        <td><input name="row[2][]" type="text" value="" /></td>
        <td><input name="row[2][]" type="text" value="" class="yellow_cell" /></td>
        <td><input name="row[2][]" type="text" value="" class="yellow_cell" /></td>
    </tr>
    



Was This Post Helpful? 0
  • +
  • -

#8 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 23 September 2013 - 01:43 AM

And I haven't added any calculations yet as I have not got the interface working properly
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 23 September 2013 - 01:48 AM

then there is no reason to refresh all the textboxes.
Was This Post Helpful? 0
  • +
  • -

#10 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 23 September 2013 - 02:01 AM

View PostDormilich, on 23 September 2013 - 08:48 AM, said:

then there is no reason to refresh all the textboxes.




I know I only want to refresh the ones not in focus, but have no clue on how to do it.
Was This Post Helpful? 0
  • +
  • -

#11 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 23 September 2013 - 02:10 AM

unless you have a sensible reason for PHP to do the processing, I wouldn’t replace the whole table (at least not on keyup, maybe on change). and no, you cannot replace the whole table and expect the current field to be unaffected.

my recommendation, check out the Observer Pattern and let JS do the processing.
Was This Post Helpful? 1
  • +
  • -

#12 DkSnowdon  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 117
  • Joined: 31-October 12

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 23 September 2013 - 02:21 AM

Thanks for that I will look into implementing it.

My thought was to in JQUERY do somthing like


for all input textboxes
      if not in focus
            $.ajax({
		    type: "POST",
		    url: "query.php",
	           data: { query: query_value, TextBoxName },
		   cache: false,
		   success: function(html){
					$("form").html(html);
				}
      end if
end for




WHERE the query page creates new form elements and replaces the old one, expect the one in focus, doing any calculations that are needed with the new values

This post has been edited by Dormilich: 23 September 2013 - 04:18 AM

Was This Post Helpful? 0
  • +
  • -

#13 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3390
  • View blog
  • Posts: 9,581
  • Joined: 08-June 10

Re: JQUERY, Finding the active textbox so I can update the inactive ones

Posted 23 September 2013 - 04:21 AM

but for that you would have to assign to the respective form element. right there you replace the whole form.

still the question remains, can’t you do the processing in Java­Script? and even if not, wouldn’t it be easier to just send the data for processing over and fill the target field with the result?
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1