AJAX/LJAX - update one record without reloading page

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

AJAX/LJAX - update one record without reloading page

Steven McIntosh
Hey all,

I have a huge spreadsheet-like page that I need to display for a client which pulls from multiple tables to create the report. I need to be able to have a flag (checkbox/radio) for each record so that the client can flag a record for other uses. What I would like to do is have, when the flag is clicked to just have the record updated and represent the update on the page without reloading (as it does take a few seconds to reload the page and the list is huge). Normally I would just create one massive form around everything, create specific id-related field names with the flagged info and then process all of the checkboxes when the user hits submit, but I don’t want them to have to submit any data (I don’t want them to lose all of their checkmarks if they don’t process the form).

Does anyone know of some specific examples? I’m not using jquery, but if that’s the way it’s done then I can do it and add it to the page. I have had problems in the past with jquery not being completely compatible with page structure/css/js that has already been included on a site, so I would like to avoid it if at all possible (but like I said, I will if I have to).

Thanks!
Steve

Steven J. McIntosh
Director of Technology
Equitek, Inc. - Oak Park / Chicago
[hidden email] <mailto:[hidden email]>

#############################################################

This message is sent to you because you are subscribed to
  the mailing list Lasso [hidden email]
Official list archives available at http://www.lassotalk.com
To unsubscribe, E-mail to: <[hidden email]>
Send administrative queries to  <[hidden email]>
Reply | Threaded
Open this post in threaded view
|

Re: AJAX/LJAX - update one record without reloading page

Tim Taplin
what you are describing is a basic ajax update call. It can be accomplished with any of the js libraries that provide AJAX functionality, or you can do a simple roll your own.

One advantage of using jQuery or prototypeJS is that you can assign your javascript to all the checkboxes used for this flag using a selector instead of having lots of js in the markup.

When your checkbox is clicked, the handler would send an asynchronous request to the server passing the record identifier, and optionaly returning a response message so that you can let the user know whether their action was successful or not.

you can either assign the record id as a property of the check box, or have your js find the record id again using css selectors.

Here is one example:

$(“#display_table").on(“click", “.flag_check", function(event) {
                // the opening line above tells this function to handle any clicks inside the display_table id that hit an item of class flag_check
                //the next line grabs the value stored in the data-record_id property of the click target and then asks if the target is now checked or unchecked
                var recid = $(this).data(“record_id”);
                var flag_status = this.checked;
               
                //the ajax request calls to update_rec.lasso and passes the values recid and status which will appear
                // as action_params or web_request->params to your lasso code on that page.
                // you can reference the status to determine whether to mark or unmark the record identified by the id.

                $.ajax({
                        url: “update_rec.lasso”,
                        data: {“recid”: recid, “status”: flag_status}
                });

                //the above code does not include a handler for any response values,
                // and does not include error checking that would make sense for production environments
});

where your markup would roughly be something like this:

<table id=“display_table” >
<tr><td>some data display</td><td><input type=checkbox class=“flag_check” name=“flag_record” data-record_id=“[#record_id]" /></td></tr>
</table>

This is rough, quick and uses jquery. If you feel it necessary to keep jQuery out of it, I can find some snippets to build  an ajax handler alone. You can likely find examples by searching for XHR examples.

Let me know if I’ve completely misunderstood your question or have not been clear in some area.

Tim Taplin



> On Nov 2, 2015, at 11:59 AM, Steven McIntosh <[hidden email]> wrote:
>
> Hey all,
>
> I have a huge spreadsheet-like page that I need to display for a client which pulls from multiple tables to create the report. I need to be able to have a flag (checkbox/radio) for each record so that the client can flag a record for other uses. What I would like to do is have, when the flag is clicked to just have the record updated and represent the update on the page without reloading (as it does take a few seconds to reload the page and the list is huge). Normally I would just create one massive form around everything, create specific id-related field names with the flagged info and then process all of the checkboxes when the user hits submit, but I don’t want them to have to submit any data (I don’t want them to lose all of their checkmarks if they don’t process the form).
>
> Does anyone know of some specific examples? I’m not using jquery, but if that’s the way it’s done then I can do it and add it to the page. I have had problems in the past with jquery not being completely compatible with page structure/css/js that has already been included on a site, so I would like to avoid it if at all possible (but like I said, I will if I have to).
>
> Thanks!
> Steve
>
> Steven J. McIntosh
> Director of Technology
> Equitek, Inc. - Oak Park / Chicago
> [hidden email] <mailto:[hidden email]>
>
> #############################################################
>
> This message is sent to you because you are subscribed to
>  the mailing list Lasso [hidden email]
> Official list archives available at http://www.lassotalk.com
> To unsubscribe, E-mail to: <[hidden email]>
> Send administrative queries to  <[hidden email]>


#############################################################

This message is sent to you because you are subscribed to
  the mailing list Lasso [hidden email]
Official list archives available at http://www.lassotalk.com
To unsubscribe, E-mail to: <[hidden email]>
Send administrative queries to  <[hidden email]>
Reply | Threaded
Open this post in threaded view
|

Re: AJAX/LJAX - update one record without reloading page

Steven McIntosh
Great, Tim.

Thanks for the start - i’ll have to read through this and lookup some so I can see how to implement—this is exactly what I was referring to. Thanks again, Steve.

Steven J. McIntosh
Director of Technology
Equitek, Inc. - Oak Park / Chicago
[hidden email] <mailto:[hidden email]>

> On Nov 2, 2015, at 1:39 PM, Tim Taplin <[hidden email]> wrote:
>
> what you are describing is a basic ajax update call. It can be accomplished with any of the js libraries that provide AJAX functionality, or you can do a simple roll your own.
>
> One advantage of using jQuery or prototypeJS is that you can assign your javascript to all the checkboxes used for this flag using a selector instead of having lots of js in the markup.
>
> When your checkbox is clicked, the handler would send an asynchronous request to the server passing the record identifier, and optionaly returning a response message so that you can let the user know whether their action was successful or not.
>
> you can either assign the record id as a property of the check box, or have your js find the record id again using css selectors.
>
> Here is one example:
>
> $(“#display_table").on(“click", “.flag_check", function(event) {
> // the opening line above tells this function to handle any clicks inside the display_table id that hit an item of class flag_check
> //the next line grabs the value stored in the data-record_id property of the click target and then asks if the target is now checked or unchecked
> var recid = $(this).data(“record_id”);
> var flag_status = this.checked;
>
> //the ajax request calls to update_rec.lasso and passes the values recid and status which will appear
> // as action_params or web_request->params to your lasso code on that page.
> // you can reference the status to determine whether to mark or unmark the record identified by the id.
>
> $.ajax({
> url: “update_rec.lasso”,
> data: {“recid”: recid, “status”: flag_status}
> });
>
> //the above code does not include a handler for any response values,
> // and does not include error checking that would make sense for production environments
> });
>
> where your markup would roughly be something like this:
>
> <table id=“display_table” >
> <tr><td>some data display</td><td><input type=checkbox class=“flag_check” name=“flag_record” data-record_id=“[#record_id]" /></td></tr>
> </table>
>
> This is rough, quick and uses jquery. If you feel it necessary to keep jQuery out of it, I can find some snippets to build  an ajax handler alone. You can likely find examples by searching for XHR examples.
>
> Let me know if I’ve completely misunderstood your question or have not been clear in some area.
>
> Tim Taplin
>
>
>
>> On Nov 2, 2015, at 11:59 AM, Steven McIntosh <[hidden email]> wrote:
>>
>> Hey all,
>>
>> I have a huge spreadsheet-like page that I need to display for a client which pulls from multiple tables to create the report. I need to be able to have a flag (checkbox/radio) for each record so that the client can flag a record for other uses. What I would like to do is have, when the flag is clicked to just have the record updated and represent the update on the page without reloading (as it does take a few seconds to reload the page and the list is huge). Normally I would just create one massive form around everything, create specific id-related field names with the flagged info and then process all of the checkboxes when the user hits submit, but I don’t want them to have to submit any data (I don’t want them to lose all of their checkmarks if they don’t process the form).
>>
>> Does anyone know of some specific examples? I’m not using jquery, but if that’s the way it’s done then I can do it and add it to the page. I have had problems in the past with jquery not being completely compatible with page structure/css/js that has already been included on a site, so I would like to avoid it if at all possible (but like I said, I will if I have to).
>>
>> Thanks!
>> Steve
>>
>> Steven J. McIntosh
>> Director of Technology
>> Equitek, Inc. - Oak Park / Chicago
>> [hidden email] <mailto:[hidden email]>
>>
>> #############################################################
>>
>> This message is sent to you because you are subscribed to
>> the mailing list Lasso [hidden email]
>> Official list archives available at http://www.lassotalk.com
>> To unsubscribe, E-mail to: <[hidden email]>
>> Send administrative queries to  <[hidden email]>
>
>
> #############################################################
>
> This message is sent to you because you are subscribed to
>  the mailing list Lasso [hidden email]
> Official list archives available at http://www.lassotalk.com
> To unsubscribe, E-mail to: <[hidden email]>
> Send administrative queries to  <[hidden email]>


#############################################################

This message is sent to you because you are subscribed to
  the mailing list Lasso [hidden email]
Official list archives available at http://www.lassotalk.com
To unsubscribe, E-mail to: <[hidden email]>
Send administrative queries to  <[hidden email]>