Welcome Guest, Not a member yet? Register   Sign In
How to change the text on a button progamatically?
#1

(This post was last modified: 01-07-2018, 02:30 PM by richb201.)

I have a button on my page

 <button class="btn pull-right btn-danger navbar-btn">Active Campaign: Create a Campaign</button>


I like the red color! Right now it says "Active Campaign:". I want to change the text on it to be Active Campaign: company name. If a user presses an action button in my crud (below in controller), I want to run a function just_a_test2() see below. It is also in the controller.


$crud->add_action('Make Active', '\'http://www.grocerycrud.com/assets/upload...smiley.png\'', 'Configure/just_a_test2','ui-icon-plus');

function just_a_test2($primary_key , $row)
{
   <script src="  $('.selector') . find('.ui-btn-txt') . text('custom label')"></script>
}



I can't seem to get the jquery in the function just_a_test2() to run.  Can I not have a <script tag in a function in my controller? What is the tag of my Button? I think I can get the name of the company on the line that the user chose when they pressed "Make Active". Any pointers are appreciated. 



Thanks for your help. 



Rich
proof that an old dog can learn new tricks
Reply
#2

Don't put jQuery in your controller, but in your view.
Let the jQuery script call your controller script (via AJAX) to fetch the active company name.
Your AJAX function (controller) returns the company name.
On success, jQuery replaces the button's text with that.
There are numerous examples of AJAX (in combination with CodeIgniter) on the internet.

Don't forget to give the button element it's own id. That way, you don't need functions like FIND to refer to it.
Reply
#3

Your question tells me that you didn't read the CI tutorial: http://www.codeigniter.com/userguide3/tu...index.html
Please do! It gives you an idea how URL's in CI work.
You can't run a URL that refers to a view, model, library etc. CI expects a controller name and a method name (function) inside that controller, optionally followed by one or more parameters.
Like: http://website_base_url/controller_name/...am2/paramn}
Routes are a way to manipulate that, but you'll first need to understand the basics.

I'll come back later to give you an example of AJAX.
Reply
#4

You can use this code for change text on a button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
        $(".content").text("Test");
    });
});
</script>
<h2 class="content">This is a heading</h2>
<button>Click me to hide paragraphs</button>
Reply
#5

(This post was last modified: 01-08-2018, 11:56 PM by richb201.)

(01-08-2018, 10:52 PM)Wouter60 Wrote: Your question tells me that you didn't read the CI tutorial: http://www.codeigniter.com/userguide3/tu...index.html
Please do! It gives you an idea how URL's in CI work.
You can't run a URL that refers to a view, model, library etc. CI expects a controller name and a method name (function) inside that controller, optionally followed by one or more parameters.
Like: http://website_base_url/controller_name/...am2/paramn}
Routes are a way to manipulate that, but you'll first need to understand the basics.

I'll come back later to give you an example of AJAX.

I have read that and am well aware of how URL's pass parms in CI. I use it all over my app. This is more of a question of  sending data from a controller function to a view.  Here is what I have in a function in my controller;


$data = array('campaign' => $campaign);
$str = $this->db->update_string('users', $data, $where);
$this->db->query($str);   //set active to 1
$iRc = $this->input->post($campaign);      //THIS IS THE LINE THAT DOESN'T WORK


The first 3 lines update the database and this seems to work fine. The last line is the problem. I want to send the campaign name to the jquery that is now running in the view. Here is the head section of the view:


 <head>
       <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

       <link href="/assets/css/screen.css" rel="stylesheet" type="text/css" />

       <!--  the following two lines load the jQuery library and JavaScript files -->
       <script src="/assets/js/jquery-1.4.2.js" type="text/javascript"></script>
       <script src="/assets/js/global.js" type="text/javascript"></script>


       /* Global JavaScript File for working with jQuery library */

       $.when().then{
       var elem = document.getElementById('myCamp');
       elem.text = campaign;
       }

</head>

Finally, here is the defintion of the button:
<button id="myCamp" class="btn pull-right btn-danger navbar-btn ">Active Campaign: None</button>

I am not sure what $.when does? I probably need to loop and wait until that post() in the controller has an updated campaign label. Or wait for a "post event'. So the two parts a) sending the string b) waiting for the string

are my issue. I am only going in one direction: from controller to view. 

thanks for your help, btw
proof that an old dog can learn new tricks
Reply
#6

(This post was last modified: 01-09-2018, 06:56 AM by richb201.)

(01-08-2018, 11:25 PM)XtreemDeveloper Wrote: You can use this code for change text on a button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
        $(".content").text("Test");
    });
});
</script>
<h2 class="content">This is a heading</h2>
<button>Click me to hide paragraphs</button>

Thanks Xtreem. I guess the code you posted does what I need but works by a user clicking the button itself. I'm using grocery crud where I created buttons for each record in my list. When a user clicks the button I jump to a function in the controller that either needs to change the text on a danger button, or initiate a jquery function (in the view) to change the text on a danger button. The user never clicks that danger button themselves. It is just informational.
proof that an old dog can learn new tricks
Reply
#7

(This post was last modified: 01-09-2018, 11:44 AM by Wouter60.)

First, create the controller function:

PHP Code:
public function ajax_update_danger_button()
{
 
  $row_id $this->input->post('row_id');
 
  $campaign_name $this->db->where('id',$row_id)->get('campaigns')->row()->campaign_name;
 
  echo $campaign_name;


Next, write the jQuery code in your view (not in the head section, but at the end of the body):

Code:
<script>
$(document).ready(function(){
  $('.show_campaign').click(function(){
       cb = $(this);
       url = "<?= site_url('campaigns/ajax_update_danger_button');?>";
       rid = cb.data('row_id');
     
       $.post( url, { row_id: rid })
.done(function(data) {
cb.parent('tr').find('.btn-danger').text(data);
});
  });
});
</script>

Explanation:
The url variable in the jQuery script is pointing to your controller/method.
The rid variable gets the value of the current record-ID. This value is passed as a POST value to the controller function.
The controller function finds the name of the campaign (by it's ID) and echo's the campaign's name.
This echo command will return the value to the AJAX call. There it's handled as 'data'.
jQuery replaces the text on the danger button that is on the same table row, with the returned value from the controller/method.

A few assumptions:
- The controller is named Campaigns; if the real name is different, use that.
- The database table from which the name is retrieved, is named Campaigns. If the table name is different, use that.
- The button or element the user must click, has the css class "show_campaign" and it has a data attribute: data-row_id="<?= $record['id'];?>";
- Within the same <tr></tr> tags, there is a button with the css class "btn-danger", which gets the new text from the AJAX function.

Hope this help you in the right direction.
Reply
#8

(This post was last modified: 01-09-2018, 10:23 PM by richb201.)

Thanks for that. I am getting there (I think). I think I have the controller code OK. But the Jquery in the view is not working. 


These two requirements are an issue:

- The button or element the user must click, has the css class "show_campaign" and it has a data attribute: data-row_id="<?= $record['id'];?>";

- Within the same <tr></tr> tags, there is a button with the css class "btn-danger", which gets the new text from the AJAX function.


I am using Grocery Crud and here is how the button is defined:

$crud->add_action('Make Active', '\'http://www.grocerycrud.com/assets/upload...smiley.png\'', 'Configure/company_update','ui-icon-plus');

I don't need the smiley and will get rid of that. So when a user clicks the Make Active button, my controller code company_update() runs. In it I update the database and then, at the bottom of it have have echo $campaign. 

The code in the view (at the bottom of the body) has this:
<script>
$(document).ready(function(){
   $('.show_campaign').click(function(){
   cb = $(this);
   url = "<?= site_url('configure/campaign_update');?>";
   rid = cb.data('row_id');

   $.post( url, { row_id: rid })
   .done(function(data) {
   cb.parent('tr').find('.btn-danger').text(data);
       });
       });
   });
</script>


It is not working and I don't even know if it is getting fired since I can't put a breakpoint in it. Any idea how to debug the jquery code in the view?
here is how the danger button in the view is defined:

<button id="myCamp" class="btn pull-right btn-danger navbar-btn ">Active Campaign: None</button>
Almost forgot, I am using Simplicity Codeigniter. Here is what the screen looks like:
proof that an old dog can learn new tricks
Reply
#9

Code:
cb.parent('tr').find('.btn-danger').text(data);

Can become:
Code:
$('#myCamp').text(data);

The difficulty is in the buttons you create with the crud->add_action method. These buttons must have a css class to enable jQuery to listen to the click event. Try to give the buttons a css class "make-active".
Then, see if jQuery can detect the event:

Code:
<script>
$(document).ready(function(){
   $('.make-active').click(function(e){
       e.preventDefault();
       alert('You clicked on a button with the css class "make-active".');
   });
});
</script>

Try if you get that working.
Reply
#10

Thanks. I will try that this morning. I noticed last night that the whole things stopped working. My Grocery Crud can no longer add in new records. The UI just gets stuck. I must have changed something while trying to get this button thing working. I am using the GIT built into phpStorm, so I guess I need to step backwards to find out when I broke it. Once it get it working again I will try out your recommendations above.

thx
proof that an old dog can learn new tricks
Reply




Theme © iAndrew 2016 - Forum software by © MyBB