+ Reply Thread
#1
Hello everyone, welcome to the new version of Afrcoders.
#2
Hey....  Am working on a site on my local machine and I want to create a functionality which the administration has the ability to click a button which triggers a request via Ajax to update a particular data in the update and then dynamically change the color of Burton clicked
#3
mista_cee wrote:
Hey....  Am working on a site on my local machine and I want to create a functionality which the administration has the ability to click a button which triggers a request via Ajax to update a particular data in the update and then dynamically change the color of Burton clicked
that appears quite straight forward, are you experiencing any difficulties?
#4
Yea...  Am experiencing difficulty in changing the buttons color via ajax
#5
And am using codeigniter for this project.  I tried taking the code for the buttons and putting it in a separate file the loading it using $("id"). Load("url"); but didn't wrk
#6
mista_cee wrote:Hey....  Am working on a site on my local machine and I want to create a functionality which the administration has the ability to click a button which triggers a request via Ajax to update a particular data in the update and then dynamically change the color of Burton clickedGotcha!!!!!

I don't know how CodeIgniter works, but what I know is applicable in every framework is this (kinda like a flow chart):

Get the button using jqueryCode:var button = $('.button)Handle on clickCode:button.on('click', function (event) { // Stops the event from carrying it out its default action
// Useful for links and submit buttons from reloading 
event.preventDefault(); 
})
Get the data you want to send to your api, usually I do have a function in all my component called prepareData when I need to post data to the API
Something like this
Code:
function prepareData () { return { // returns an object containing my data ready to be sent to the server username: $('input#username').val(), password: $('input#password').val() } }

Note that the function returns an object

Then you can now go back to your button event handler and send your request to the server.

Code:button.on('click', function (event) { // Stops the event from carrying it out its default action
// Useful for links and submit buttons from reloading  
event.preventDefault(); 

var self = $(this)
data = prepareData()
$.ajax({
 type: 'post',
 data: data,
 url: 'http://somewhere.com'    success: function (data) {
  // The request was successfull
  // Do other stuffs in here
  self.css({color: 'red', background: 'white'}
 },
 error: function (error) {
  // Handle your error here
 }
})
})
The above code should be something you are looking for!!!



PEACE!!!
#7
Thanks man..... I'll try it right away 
Back to top