CodeIgniter Forums
Dynamic ajax calls - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forum-5.html)
+--- Forum: General Help (https://forum.codeigniter.com/forum-24.html)
+--- Thread: Dynamic ajax calls (/thread-62616.html)



Dynamic ajax calls - Urastor - 08-05-2015

Hellou,

My current application uses the "normal" way of processing data (User submits a form, data is send to a controller method and Redirects if everything is ok).
But I wanted to make everything a Little more smooth, so I decided to use Ajax calls and bootstrap modals. To test everything, I just rewrote my user-panel-functionality, but it seems a Little.. hm complex doing it with Ajax calls, because for every function I Need an jQuery Event handler.

For example:

My view has a modal form, to Change the users Name (simplified), and a submit button, to save the changes, if everything goes right.
In my jQuery file I Need an Event, that triggers, if I click a button. Then it should perform an Ajax call:

Default.js
PHP Code:
$('form').submit(function() {
  var dtf = $(this).serialize();
  $.post('/admin/user/edit/'dtf, function(result) {
   if(data.error) {
     //Show some fancy Errors
   } else {
     location.reload(true);
   }
  }
}, 
'json'); 


The big Problem is, if I want to add a user, I would call '/admin/user/add' as URL and with that, i Need another click event. Also the edit method expects an id, or after deleting a user Location.reload() wouldn't work.
When I now have 30 of those methods, all over my application, it would be rather annoying to write all those submit handlers and it's not very .. dynamic.

Does anyone has some advice to make it better? And also how I could get CI values into my Ajax call, so I can use something like an id?









(don't know why there's so much whitespace, but I can't delete it...)


RE: Dynamic ajax calls - mwhitney - 08-05-2015

One approach to this would be to add data-* attributes to your form(s) which can hold data you need to handle your AJAX requests, then write some JavaScript which builds your AJAX request based on those attributes. If you use some sane defaults and check whether the attributes exist on each form, you should be able to use one function which examines the form(s) on the page and creates the appropriate submit handler(s), then binds the handler(s) to the submit event(s).

Similarly, you could get CI values into your JavaScript (without just writing them into the script) by adding a hidden input to the page with a pre-determined ID and JSON data in the value, or by attaching data attributes to an element on the page. Another possibility would be to add script to the page which defines an object containing your data before the main script is included, and have the main script look for that object. In any of these cases, you would still want the main script to use sane defaults and handle the absence of this data in a safe manner, so you don't have to include data on pages which don't need it.


RE: Dynamic ajax calls - Urastor - 08-06-2015

Ahhh.. the data-* Attributes.. I'm actually use them, but I totally forgot that I could give data to the js. x.x (Stupid, if I think of it, because as I said, I already use it in another part of this application..)

Quote:mwhitney

Another possibility would be to add script to the page which defines an object containing your data before the main script is included, and have the main script look for that object.

It sounds interesting, but I have little idea what you mean. Like an script in a view, which creates variables (or objects), that stores CI-data and then include the external script, so that I could use those data? Is this right?


RE: Dynamic ajax calls - mwhitney - 08-06-2015

(08-06-2015, 02:58 AM)Urastor Wrote: It sounds interesting, but I have little idea what you mean. Like an script in a view, which creates variables (or objects), that stores CI-data and then include the external script, so that I could use those data? Is this right?

Exactly. Your view at some point will be including the main script, so you might put a script element before that inclusion which just defines a JavaScript object with some of the variables you've defined in CI, then your main script would check whether that object exists and pull in the data as needed.

It's not something I would consider a good long-term solution, but it's an easy way to pass data to a script, especially early in development and/or when testing new ideas/scripts.


RE: Dynamic ajax calls - Urastor - 08-06-2015

(08-06-2015, 06:24 AM)mwhitney Wrote: It's not something I would consider a good long-term solution, but it's an easy way to pass data to a script, especially early in development and/or when testing new ideas/scripts.

Yes and in my application it isn't required on every page. Since I'm using a header-file, which is included on every page load, it would be unnecassary data.
I went with the data-* attr., it's working like a charm. I feel a little stupid, to forgot those, but ... Big Grin

Thanks for your response. Tongue