How to call controller function upon onClick from html?

[Amit]

Hi,
I have created one html file with list of records, each records are there in a row of table in

html and there is one corresponding button (type as button) for each record so when user clicks

on it , it should take the id of that record from the html call controller function which will

further use id to fetch the complete records from the database and rendered the data onto the new

html page.

below is the button creation code in html:

<td style="text-align: center; vertical-align: middle;">

<Button type="button" name ="seeting_button" onClick = "record_config();">

<IMG src="{{=URL('static','images/Settings.png')}}" ALIGN="absmiddle">

</td>

here record_config() function defined in controller (default.py) which will fetch data from db

and display to another html page named "record_config.html".

Problem:
record_config() function is not getting called upon clicking on the button, can anyone please

suggest me the possible way to achieve the same?

[Anthony]

The onclick property of an HTML element must be Javascript. You cannot call a server-side Python function directly from the browser. If you want the button to work like a regular link and simply load a new page in place of the current page, you can do:

<Button type="button" name ="seeting_button"

onclick = 'window.location="{{=URL('default', 'record_config', args=[record_id])}}";'>

In that case, you would need Python code in the view to get the record_id for each link (presumably the buttons would be generated in a for loop that cycles through the record id's).

Anthony

[Amit]

Thanks Anthony, its working as expected :)

regards,
Amit

[Amit]

Anthony,
 I am facing one more problem, I have one text Field called Name where user can input the name , i need to pass the entered name to controller function but if I use like:

<Button type="button" name ="seeting_button"

onclick = 'window.location="{{=URL('default', 'record_config', args=[name_text_field.value])}}";'>

it is flashing error saying "name name_text_field is not defined" , even text field is there in same form ,inside same table but still it is giving same error so how to get the text field value and pass it to the args?

Regards,
Amit

--
 
 
 

[Anthony]

<Button type="button" name ="seeting_button"

onclick = 'window.location="{{=URL('default', 'record_config', args=[name_text_field.value])}}";'>

You cannot refer to name_text_field the way you have. Everything inside {{..}} is Python and must be available on the server before the HTML is rendered and sent to the browser. The input field value is available on the client side and must be retrieved via Javascript. You could do:

onclick='window.location="{{=URL('default', 'record_config') + '/'}}" + jQuery('input[name=name_text_field]').val();'

Anthony 

[Amit]

Hi Anthony,
I used the code which you have suggested but it's not working at all, it is not calling record_config() function of controller.

<input value="Save" type="button" name="save_button"
   onClick='window.location="{{=URL('default', 'record_config') + '/'}}" + jQuery('input[name=name_text_field]').val();'>

second point is if the above approach is successful then how would I retrieve the value in controller side:

def record_config():
     print 'inside record_config'
     print request.input['name']

Do I need to use Input list to retrieve the value? OR is there any other way to retrieve?

[Anthony]

Replace the single quotes with double quotes inside the jQuery():

onClick='window.location="{{=URL('default', 'record_config') + '/'}}" +
                         jQuery("input[name=name_text_field]").val();'

The value will be available as request.args(0) in the record_config() function.

Anthony

[Amit]

Still the same issue :(  , its not calling record_config() function...
how to check whether JQuery is supported or not? I have created my own custom html page without mentioning {{extend 'layout.html'}} statement, means simple html page withe labels and text fields, so do I need to add some statement in my html file to support JQuery?

--
 
 
 

[Amit]

Anthony,
I observe one more thing, as I have launched record Info page from other page using below statement:

<Button type="button" name ="setting_button" id="setting" disabled="disabled"
onClick = 'window.location="{{=URL('default', 'record_config', args=[row.record_id])}}";'>

So upon clicking on button , it is launching record_config page , first it will call record_config() function and I am passing record_id to fetch the data about the record and display on the record_config page , so record_config page will display all data about the record( for e.g record_id, record_name etc...)

Now what is my observation is : the URL of record_config page, it is showing like:

http://127.0.0.1:8000/record_App/default/record_config/45326699

where the number (45326699) indicates the record_id.

One test i have done :
I have written one javascript function with alert message and calling from onclick of the save button on the record_config page, but it is not invoking the javascript function so I am suspecting the above URL is different from record_config page, may be some temporary page is getting created with these values.

what I understood is this page is not record_config page that's why it is not calling onclick of the button , hence not calling javascript, JQuery stuffs also.

Please provide your inputs on this.

Regards,
Amit

[Amit]

Hi Anthony,

I am able to achieve it through Javascript function like below:

function submitVlaue(thisForm)
    {
        var recordName = thisForm.name_text_field.value;
       
        window.location="{{=URL('default', 'recordr_config') + '/'}}" + recordName ;
    }

but if I use JQuery instead of directly putting record name, its not working.Please suggest is it a proper way to send the parameters to the controller function.

Regards,
Amit

[Anthony]

The query method works fine for me. Are you sure you have jquery loaded?

[Amit]

As I told you I have created my own custom html without extending layout.html. I am not sure how to load JQuery in that?

Please check the whole html file in attachement once and suggest me how to support JQuery in the html.

Regards,
Amit

--
 
 
 

[Anthony]

On Thursday, August 30, 2012 10:44:51 PM UTC-4, Amit wrote:

As I told you I have created my own custom html without extending layout.html.

"I have created my own custom html" != "I have not loaded jQuery"

  :-)

 

I am not sure how to load JQuery in that?

It's just a Javascript library, so can be loaded like any other Javascript library.

To get it from Google's CDN:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

or if you have the version included with web2py:

<script src="{{=URL('static', 'js/jquery.js')}}" type="text/javascript"></script>

Anthony

[Amit]

Thanks Anthony :)

Regards,
Amit

--