Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22784 > unrolled thread

pass to function

Back to article view | Back to comp.lang.javascript

Contents

  pass to function hipa <hipa@telenet.be> - 2014-01-25 18:07 +0000
    Re: pass to function Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-25 19:24 +0100
    Re: pass to function hipa <hipa@telenet.be> - 2014-01-26 15:31 +0000
      Re: pass to function Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-26 17:58 +0100

#22784 — pass to function

Hi

I have a page with a dropdown list with value's from a db. When one item is selected a table with invoices changes.
I want to do the same if I put a value into a text field, but cannot get it to work. Something like:
<input type="text" onchange="getInvoices();" />. But how can I pass the entered value to the getInvoices() function?

This is the working code:

<select name="client_id" id="client_id" onchange="getInvoices();">
				<option value="null" selected="selected"><?php echo $this->lang->line('invoice_all_clients');?></option>
				<?php foreach($clientList->result() as $row): ?>
				<option value="<?php echo $row->id;?>"><?php echo $row->name;?></option>
				<?php endforeach; ?>
</select>
		

function getInvoices (elm) {

new Ajax.Request(base_url+'invoices/retrieveInvoices/', {postBody: Form.serialize($('filter')), onComplete: function(response) {

						if (response.responseText != '') {

							invoiceArray = eval('(' + response.responseText + ')');

							$('invoiceListings').style.position = "relative";

							$('invoiceListings').style.left = "0";

							$('invoiceListings').style.visibility = "visible";

							drawTable(invoiceArray);

						} else {

							$('invoiceListings').style.position = "absolute";

							$('invoiceListings').style.left = "-5000px";

							$('invoiceListings').style.visibility = "hidden";

						}

					}})

}

[toc] | [next] | [standalone]

#22785

hipa wrote:

> I have a page with a dropdown list with value's from a db. When one item
> is selected a table with invoices changes. I want to do the same if I put
> a value into a text field, but cannot get it to work.

That is not a problem description.  Next time, show what you have tried, say 
what you expected to happen and why, and what happened instead.  And please 
post using your real name.

> Something like:
> <input type="text" onchange="getInvoices();" />. But how can I pass the
> entered value to the getInvoices() function?

  <input type="text" onchange="getInvoices(this)" />
 
> This is the working code:
> 
> <select name="client_id" id="client_id" onchange="getInvoices();">
>   […]
> function getInvoices (elm) {

Given the code above, you are either calling this function the wrong way or 
the function does not make use of the “elm” argument.  Your code is wrong 
either way.

> invoiceArray = eval('(' + response.responseText + ')'); 

You might want to consider a wrapper that prefers 
JSON.parse(response.responseText) before the comparably unsafe eval().

> $('invoiceListings').style.position = "relative"; 
> $('invoiceListings').style.left = "0"; 

  var invoice_listings = $('invoiceListings');
  invoice_listings.style.position = "relative"; 
  invoice_listings.style.left = "0";

Better yet, avoid $('invoiceListings') and associated libraries in favor of 
document.getElementById("invoiceListings") or something like that.

And finally, try replacing all of that with

  invoice_listings.style.display = ""; 

> $('invoiceListings').style.position = "absolute"; 
>                                                         
$('invoiceListings').style.left = "-5000px"; 
>                                                         
$('invoiceListings').style.visibility = "hidden"; 

Try replacing that with

  invoice_listings.style.display = "none"; 

NOTE: Elements where “display: none” are not subject to transition and 
animation effects, while nowaways the “visibility” property can be animated.  
But if you do not use those, using the “display” property is usually better.  

Consider viewports that are wider than 5000px, for example.  In fact, there 
should be no good reason to move the element at all in order to hide it, if 
you position it absolute and set its “visibility” property to “hidden”.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22797

Hello

Thanks for the very fast reply!
 
> That is not a problem description.  Next time, show what you have tried, say 
> what you expected to happen and why, and what happened instead.  And please 
> post using your real name.

What I have tried is actually in my original post.

 
>   <input type="text" onchange="getInvoices(this)" />
 
> Given the code above, you are either calling this function the wrong way or 
> the function does not make use of the “elm” argument.  Your code is wrong 
> either way.

It's not my code actually, I'm experimenting with the CodeIgniter framework. I'm not an experienced developer, that's why I'm here :)

I've got it working like this.

<input type="text" name="client_id" id="client_id" onchange="getInvoices();" />

If I enter a numner in the input box and pres enter, the correspondent clients' invoices are shown in a table. The clients are in a db with a table clients.

Actually the javascript calls a php function (via Ajax.Request)

function retrieveInvoices()

	{

		$query = $this->invoices_model->getInvoicesAJAX ($this->input->post('status'), $this->input->post('client_id'), $this->input->post('clientcontact_id'), $this->settings_model->get_setting('days_payment_due'));

		...

Where the getInvoicesAJAX() function has some mysql queries.


>> invoiceArray = eval('(' + response.responseText + ')'); 
> 
> You might want to consider a wrapper that prefers 
> JSON.parse(response.responseText) before the comparably unsafe eval().
> 
>> $('invoiceListings').style.position = "relative"; 
>> $('invoiceListings').style.left = "0"; 
> 
>   var invoice_listings = $('invoiceListings');
>   invoice_listings.style.position = "relative"; 
>   invoice_listings.style.left = "0";
> 
> Better yet, avoid $('invoiceListings') and associated libraries in favor of 
> document.getElementById("invoiceListings") or something like that.
> 
> And finally, try replacing all of that with
> 
>   invoice_listings.style.display = ""; 
> 
>> $('invoiceListings').style.position = "absolute"; 
>>                                                         
> $('invoiceListings').style.left = "-5000px"; 
>>                                                         
> $('invoiceListings').style.visibility = "hidden"; 
> 
> Try replacing that with
> 
>   invoice_listings.style.display = "none"; 
> 
> NOTE: Elements where “display: none” are not subject to transition and 
> animation effects, while nowaways the “visibility” property can be animated.  
> But if you do not use those, using the “display” property is usually better.  
> 
> Consider viewports that are wider than 5000px, for example.  In fact, there 
> should be no good reason to move the element at all in order to hide it, if 
> you position it absolute and set its “visibility” property to “hidden”.

Thanks, I'll take a look a this. Thanks for the tips.

[toc] | [prev] | [next] | [standalone]

#22798

hipa wrote:

> Thanks for the very fast reply!

Thanks in advance for quoting properly next time. 

[restored attribution]

> [Thomas 'PointedEars' Lahn wrote: ]
>> That is not a problem description.  Next time, show what you have tried,
>> say what you expected to happen and why, and what happened instead.  And
>> please post using your real name.
> 
> What I have tried is actually in my original post.

I cannot see any attempts by you to solve your problem *there*.  Also, you 
have not posted what you expected, and what happened instead.  And you are 
still not using your real name.
  
>>   <input type="text" onchange="getInvoices(this)" />
>  
>> Given the code above, you are either calling this function the wrong way
>> or the function does not make use of the “elm” argument.  Your code is
>> wrong either way.

This statement of mine does not refer to the code that you have quoted, 
which is *my* code.

> It's not my code actually, I'm experimenting with the CodeIgniter
> framework. I'm not an experienced developer, that's why I'm here :)

This is not and cannot be JavaScript/DOM 101.  You have to work with us to 
solve your problem.
 
> I've got it working like this.
> 
> <input type="text" name="client_id" id="client_id"
> onchange="getInvoices();" />
> 
> If I enter a numner in the input box and pres enter, the correspondent
> clients' invoices are shown in a table. The clients are in a db with a
> table clients.

I see now that you are probably serializing the “form” element with name or 
ID “filter” that you have not posted, too, for the HTTP request.  Thus, the 
request message body would probably look like

  …&client_id=…&

if you gave the control this name.  However, if you use the “onchange” 
event-handler attribute, the request will be made regardless whether the 
user intended the change when the control loses focus (for example, it will 
be made if the user types something and then decides to quit the browser 
session, which could lead to errors).  As a result, such functionality 
should be triggered by another control, usually a submit button, instead.  
The “onsubmit” event-handler attribute of the “form” element can be used 
then instead.
 
> Actually the javascript calls a php function (via Ajax.Request)

Mostly irrelevant, except for

> […] $this->input->post('client_id') […]

… which must retrieve the value from the parse result of the request message 
body with this particular framework.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web