Is there any way to change database field value on button click using PHP,HTML, Javascript?
What I need to do is, I have a list of layouts from database and displaying in a webpage. I need to add one button for each layout. When I click a button of one layout, it will be the active layout and the database field called 'active' should be changed to 1. All other value of 'active' will be 0. SO that user can select one active layout at a time.
Is there any simple way to do this? Any tutorial or example?
Thanks!
Yes. you should use an ajax call with Jquery.
First include the jquery on your header template. Don't forget that (I always do).
Let's say that for the first active layout
you have
...
switch one
...
after the table you will make a
<script>
$("activeOne").click(
function()
{
$("activeOne").fadeOut("fast",
function()
{
$("activeOne").load('get_page.php?act=switch_one','',
function()
{
$("activeOne").fadeIn("fast");
}
);
}
);
}
);
</script>
I hope you understand what I'm saying.
1. for every layout you have an ID.
2. for any of that IDs you have a script that calls a get_page.php with an parameter called switch for you layout
3. now, for the php function that does that... you either check if it is inactive and you make it active (or check if active to make inactive) ...either you send another parameter with the status you want to set.
Hope this is useful... I used exact same tehnique for exact same problem.
Related
I am using below script on a form (say, form-A) to load another form (form-B) in thickbox, with values passed by controller.
First, in form-A, i am selecting one option from dropdown "customerID", then "Add Project" button (with id 'addProject') becomes visible, on clicking which, a thickbox appears with form-B in it. Here, in form-B, i want to pass selected customer. How can I do that?
I tried below code, and tried to access the $_GET['custID'] in controller's manage_project function, but it is showing blank. But when i am alerting the url1 (i have commented below), ID is coming there.
Below code is in form-A view file.
('#addProject').click(function(){
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox&custID='+$('#customerID').val();
//alert(url1);
tb_show('Add More Project',url1,'');
})
According to documentation at (http://thickbox.net/):
Important to Remember: Add all other query parameters before the
TB_iframe parameters. Everything after the "TB" is removed from the
URL.
So, try add custID before TB_iframe. And then you will be able to operate with a variable in the script, such as access them via $_GET['custID']. For example:
var url1='<?php echo SITEURL ?>/xome/invoice/manage_project?custID='+$('#customerID').val() + '&TB_iframe=true&height=800&width=700&inlineId=innerDiv&class=thickbox';
I have a grid that have buttons in one of it's columns like this:
how can I show a lister or a new grid when the button clicked?
$grid=$page->add('Grid');
$grid->setModel('Tickets',array('subject','date','time','department','status','text'));
$grid->addColumn("button",'read_ticket_id','Read');
if($_GET['read_ticket_id']){
// this generates javascript to be executed on buttion click
//how can I show a lister or a new grid when the button clicked?
}
Check out examples in ATK4 Codepad.
http://agiletoolkit.org/codepad/gui/grid
Edit:
This is snippet from one of my pages. Maybe you can find it useful.
The idea behind this is that you actually generate JavaScript inside this IF statement and JavaScript then is sent back to your browser which then can make another request for something (reload existing object, create new, redirect to somewhere etc.)
...
if($_GET['ticket']){
// Join this report with selected ticket
$this->grid->model->addToTicket($_GET['ticket']);
// Reload
$this->js(null,array(
$x->js()->reload(),
$this->js()->univ()->successMessage('Successfully saved')
))->execute();
}
...
With $_GET['ticket'] you get ID of record in grid in which you clicked button "Add to Ticket". $x is some other object in this page, for example, some form, field, tab or other grid. With $this->grid->model you get reference to model associated with this grid and in that model I have custom action/method defined - addToTicket which do something with database.
You can also redirect to other page with $this->js()->redirect() or $this->js()->location() etc. Basically you can do whatever you want, but all of this need to generate JavaScript as result or instructions for your browser what to do next.
And don't forget to add ->execute() at the end! That will stop further parsing your page and will instantly generate JS response.
I found a good example for this question:
http://agiletoolkit.org/doc/grid/interaction
==========
$g=$p->add('Grid');
$g->setSource('user');
$g->addColumn('name');
$g->addColumn('surname');
$g->addColumn('button','info','More Info');
$g->dq->where('name is not null')->limit(5);
if($_GET['info']){
$g->js()->univ()->dialogURL('More info',
$this->api->getDestinationURL(
null,array(
'more_info'=>$_GET['info'],
'cut_object'=>'myform'
)))
->execute();
}
if($_GET['more_info']){
$f=$this->add('Form','myform');
$f->addField('readonly','name');
$f->addField('readonly','surname');
$f->setSource('user');
$f->setConditionFromGET('id','more_info');
}
I have a CListView that uses ajaxLink() in the _view file.
View (index.php)
<?php
Yii::app()->clientScript->registerScript('ajaxUpdate',
"
//javascript function to update the listview using ajax
function updateItemList(){
$.fn.yiiListView.update('itemList');
return false;
}
", CClientScript::POS_READY);
?>
<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
'id'=>'itemList',
)); ?>
partial (_view.php)
<?php echo CHtml::ajaxLink('Delete',array('libdbitems/delete','id'=>$data->id),
array('type'=>'POST','success'=>'function(){updateItemList()}'),
array('confirm'=>'Are you sure you want to delete this item?',
'id'=>'delete-'.$data->id)); ?>
The controller is basically just the default actionIndex() that is generated with Gii.
Here's the problem: when I click my Delete link the first time after a page load, it behaves as expected. After that, clicking Delete does nothing. (It refreshes the ListView, but no changes are made.)
I'm pretty sure the problem lies in how Yii is binding click() events to my links in javascript, but I have no idea how to fix it. I have tried using the live=true option as others have suggested, but it does nothing.
Does anyone know how to fix this issue so that my Delete link works multiple times without having to reload the page?
Is your delete link part of the itemlist that's refreshed? If that's the case, the script won't re-register with the new link when a new link is created.
Two options:
1) Make sure your link is not being refreshed, and is a permanent aspect of the page
2) Write a custom jQuery handler rather than using Yii's ajaxLink. You'll need to use .on and delegated events. Something of the form:
$("#parentContainer").on("click", ".deleteLinkClass', updateItemList)
Where the parentContainer is a permanent item on the page, and deleteLinkClass will be a class you'll need to assign to the delete links you're using.
Eh, a stupid fix. I realized I had accidentally left a CHtml::$liveEvents = false in my controller that I put there while I was still earlier in the troubleshooting phase.
The solution is just to leave CHtml::$liveEvents = true (default) and to make sure all the links have unique IDs.
I am using Agile Toolkit. I have a drop-down field in my CRUD.
How can I make the "New" button display different set of values in this drop-down to when the "Edit" button is clicked?
Here is my code:
class page_things extends Page {
function init(){
parent::init();
$p = $this;
$f = $p->add('Form');
$idCat = ($f->get('idCat')?$f->get('idCat'):$this->api->getConfig('idCat','MASP2U03'));
$dpUE = $f->addField('dropdown', 'Category');
$dpUE->setModel('Category');
$dpUE->js('change',$f->js()->submit());
$dpUE->set($idCat);
$f->addSubmit('OK');
$c = $f->add('CRUD');
$c->setModel('things',array('name', 'field1', 'field2', 'field3'))->setMasterField('idCat',$idCat);
if($f->isSubmitted()){
$c->js(true)->show()->execute()->reload()->execute();
}
}
}
Thank you for help !!
use
$crud=$this->add('CRUD',array('allow_add'=>false));
to disable default Add button, then add your own button:
if($crud->grid)$crud->grid->addButton('Add')->js('click')
->frameURL('Add',$this->api->url('./new'));
After this you'll need to create a new page
class page_things_new extends Page {
and inside this page define the form the way you want it to appear no the "add" click. I don't fully understand your question, but with these instruction you can have a different page appear when adding new entries to your crud.
Here's an alternative to Romans that I've tried. It uses $this->api->memorize to store a GET variable chosen in the drop down list in a session variable. Then in the Form, you can set default the chosen value by using recall in the model.
Something like this
in page/things
// load the javascript function (see later)
$this->js()->_load('your_univ');
/*****************************************************************/
/* Code to populate drop down lists - amend where as required*/
$catList=$this->api->db->dsql()->table('category c')
->field('c.id')
->field('c.name')
->where('c.type',$cat_type)
->order('c.id')
->do_getAssoc();
// Check if one is set on URL or default from config and memorize the value
if ($_GET['cat']){
$cat=$_GET['cat'];
} else {
$cat=$this->api-getConfig('idCat');
}
$this->api->memorize('category',$cat);
$f=$p->add('Form',null,null,array('form_empty'))
->setFormClass('horizontal bottom-padded');
$l1=$f->addField('dropdown','category')->setValueList($catList)->set($cat);
// calls a bit of javascript described later to reload with the parameter
$l1->js('change')->univ()->yourfunc($p->api->getDestinationURL(null), $l1);
.. rest of your page code goes here ..
Then in /lib/Model/Category.php
Add the following recall for the field
$this->addField('idCat')->system(true)->visible(false)
->defaultValue($this->api->recall('category'));
Note the system(true) and visible(False) means it wont show up and wont be changeable on the CRUD but you can play around with the options so it shows in the CRUD grid but not in the form.
Finally, the little bit of javascript to make the reload work (Romans might advise a better way to do this). Make sure yourfunc matches in the page and in the js.
in /templates/js/your_univ.js add the following
$.each({
yourfunc: function(url, name){
document.location.href=url+'&cat='+$(name).val();
},
},$.univ._import);
I've got code similar to this working in my own pages. You can probably make it work as a POST as well as the drop down is a form if you dont want the cat to show on the URL.
I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?
Here is some javascript that should help:
// Called when the edit (A) button is pressed
function edit(event, editButton)
{
// Get existing title and change element to textarea
var stickyTitle = $(editButton).parent().find('p.stickyTitle');
var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
$(textareaTitle).text(stickyTitle.html());
// Get existing description and change element to textarea
var stickyDescription = $(editButton).parent().find('p.stickyDescription');
var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
$(textareaDescription).text(stickyDescription.html());
// Create save button
var saveButton = $(document.createElement('div')).addClass('jSticky-create');
// Add save button, then replace title, then replace description, then remove edit button
$(editButton).before(saveButton);
$(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
$(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
$(editButton).remove();
// Set description textarea focus and set button actions
textareaTitle.focus();
setActions();
}
// Called when the save (tick) button is pressed
function save(event, saveButton)
{
// Get existing title and change element to paragraph
var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
var newTitleValue = textareaTitle.val();
$(stickyTitle).html(newTitleValue);
// Get existing description and change element to paragraph
var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
var newDescriptionValue = textareaDescription.val();
$(stickyDescription).html(newDescriptionValue);
// Create edit button
var editButton = $(document.createElement('div')).addClass('jSticky-edit');
// Add edit button, then replace title, then replace description, then remove save button
$(saveButton).before(editButton);
$(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
$(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
$(saveButton).remove();
// Set button actions
setActions();
// Add the object to the ads div
$('#ads').append(object);
// Update your database here
// by calling the saveAd.php
}
function setActions()
{
// call these after changes are made to anything
$('.jSticky-create').unbind('click').click(function(e)
{
save(e, this);
});
$('.jSticky-edit').unbind('click').click(function(e)
{
edit(e, this);
});
$('.jSticky-delete').unbind('click').click(function(e)
{
remove(e, this);
});
}
function remove(event, deleteButton)
{
var stickyMaster = $(deleteButton).parent();
$(stickyMaster).remove();
//then call savead.php with delete parameter
}
Have you looked at any of the code? I took a really quick look at jStickyNote.
Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).
If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:
Add some button to each note that says "Save" or with a similar meaning.
When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.
With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table.
You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.
Good Luck!
You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.
Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.
I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.