If i have a formtastic button with a CSS override like this:
-f.buttons do
=f.commit_button :button_html => { :class => 'button positive' }
I am seeing the rendered style as "button positive update" in the browser. How do I get it to only reflect the CSS class that I want to use and dump the "update" class?
No can do, it's part of formtastic
button_html.merge!(:class => [button_html[:class], key].compact.join(' '))
The key in there is the 'create' or 'update' string.
Related
I would like to add a custom button to toggle the option filterResourcesWithEvents. Ideally the button would change style into a pressed state but for now I'm simply trying to change the button text after setting the option. The problem is that the text does not change.
One can find a full example here in CodePen.
custom1: {
text: 'Filter off',
click: function() {
var cal = $('#calendar').fullCalendar('getCalendar');
var newFilterResourcesWithEvents = ! cal.option('filterResourcesWithEvents');
cal.option('filterResourcesWithEvents', newFilterResourcesWithEvents);
// The following line being ignored.
$(this).text(newFilterResourcesWithEvents ? 'Filter on' : 'Filter off');
}},
I suspect the scheduler option function might be interferring with the text() update.
Does anyone have any suggestions?
After a little experimentation I discovered if I use a class selector to change the button it just works. I'm not exactly sure why.
Basically if I replace the last line as:
$("button.fc-custom1-button").text(newFilterResourcesWithEvents ? 'Filter on' : 'Filter off');
I'm hoping that class naming remains consistent.
I have used data-confirm attribute with Html::a tags in datagrids and it worked. But now I want to use it with a button like this:
<?php echo Html::button("<span class='icon delete'></span>", [
"class" => "delete",
"title" => Yii::t("app-upload-list", "delete"),
"data-confirm" => Yii::t("yii", "Are you sure you want to delete this item?"),
])
I don't use anchor here because this button doesn't do anything in server-side.
But when I attach a click event to the button, it precedes the confirm box. I can get round it by write the confirm code myself in the click event and use a data-my-confirm (or so) attribute to prevent the double confirm boxes, but it is not so nice. Can I do that with data-confirm?
I had the same problem. Here is Yii's listener (yii.js, line 486):
// handle data-confirm and data-method for clickable and changeable elements
$(document).on('click.yii', pub.clickableSelector, handler)
.on('change.yii', pub.changeableSelector, handler);
It uses Event Delegation
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
In this case, the listener is attached to the document node, which is listening for clicks to bubble up from the clicked element. Listeners placed on the clickable elements themselves or anything that is a child of the document node will fire before those on the document node i.e. before Yii's listener.
To ensure Yii's listener fires before your listener you will have to attach your listener to the document node as Yii has done; Listeners on the same node are invoked in the order of their registration.
$(document).on('click', '.delete', yourHandlerFunction);
Note: Event delegation is used when you need a listener for elements that don't necessarily exist when the listener is added or to listen to a single node rather than several. It is usually recommended to use the nearest parent element that exists at the time of adding the listener and that continues to exist while needed. I wouldn't suggest putting listeners on the document node without good reason.
Even if it's an old question I'd like to contribute what I know.
In case you want to use html::button() instead of html::a()
Here is an example
<?php echo Html::button("<span class='icon delete'></span>", [
"class" => "delete",
"title" => Yii::t("app-upload-list", "delete"),
"onclick" => 'if(confirm("Are you sure you want to delete this item?")){
return true;
}else{
return false;
}',
]) ?>
I'm sure it should work.
I think you can find an example of something similar to that in the Yii2 template of a View.
In my view I have the following code:
<?= Html::a('Delete', ['delete'], [
'class' => 'btn btn-danger',
'data' => [
'confirm' => 'Are you sure you want to delete this item?',
'method' => 'post',
],
]) ?>
I have to admit that I have not try to use it with Html::button. But you can try something like this:
<?php echo Html::button("<span class='icon delete'></span>", [
"class" => "delete",
"title" => Yii::t("app-upload-list", "delete"),
"data" => [
'confirm' => 'Are you sure you want to delete this item?',
'method' => 'post',
],
]) ?>
EDIT:
Yes, this way do not Work.
What is recommended is to use a link (Html::a) and style it as you wish.
If you want to submit a Form you should use: Html::submitButton()
If you want to use a button... you can make it work with jQuery as mentioned by Stu here: https://stackoverflow.com/a/12697511/2437857
Hi I am a total newbie to JS and am trying the following:
I am having a Yii application in which there is an ajaxLink that triggers a fancybox. This link renders a view in an iframe inside the fancybox. The rendered view is a form containing Yii zii.widgets.jui.CDatePicker widget. This renders the view and shows the date text field with proper date values. But onclick it doesnt show up the calendar.
Code triggering the fancybox:
echo CHtml::ajaxLink('Add Entry',Yii::app()->createUrl('site/myentry', array('action'=>'new')),
array('type'=>'GET', 'update'=>'#adexp', 'complete'=>'afterAjax'));
js function:
function afterAjax()
{
$.fancybox({
href : '#adexp',
scrolling : 'no',
transitionIn : 'fade',
transitionOut : 'fade',
width: 1024,
height: 500,
autoDimensions: false,
onClosed: function() { $('#adexp').html(''); location.reload();},
});
}
Rendering the iframe for the form:
<iframe src="<?php echo $this->createUrl('site/entryform', array('UtcRecord'=>$model->UtcRecord, 'UserId'=>$model->UserId, 'action'=>$action));?>" style="width: 100%; height:440px;" id="entryform"></iframe>
and the widget inside this form view:
$this->widget(
'zii.widgets.jui.CJuiDatePicker',
array(
'model' => $model,
'attribute' => 'EntryTime',
'language'=> 'en',
'options' => array(
'dateFormat' => 'dd-mm-yy',
'style'=>'z-index: 5000;',
),
)
);
Observation made by Firebug:
the input field in the form doesnt have the Datepicker class. If I use the same Yii widget code in a normal page, this class is present in the input tag and the widget works fine.
I tried:
1. Increasing the z-index of the datepicker widget to 5000.
2. Including jquery and css manually in iframe head tag since I thought iframe might not be picking up styles and js.
Could this be a Yii widgets rendering issue inside an iframe?
Would really appreciate any insights on the issue. :-)
Change your renderPartial() to
$this->renderPartial('path.to.view',$variables_into_view,false,true);
The last parameter is $processOutput which calls CController::processOutput() which inserts the required client scripts (in your case the datePicker js and css) into the output.
How can I ckick the button or link with a random ID?
Have this button or link a number?
For Example:
#b.link(:number => "1").click
or
#b.button(:number => "1").click
Anyone idea?
If the element is a button, look for some of these static elements:
If the name attribute is known, try: b.button(:name => 'submit').click
If the value (text on the button) is known, try: b.button(:value => 'Submit').click
If the button is an image, you can use a regex on the source: b.button(:src => /destination-url/).click
If the element is a link, look for some of these static elements:
If the name attribute is known, try: b.link(:name => "link").click
If the href attribute is known, try: b.link(:href => "http://example.com").click
If the text of the button is static, b.link(:text => "Text of link here.").click
If these don't work, you can always look to parent elements. Hopefully this helps. I'm glad to elaborate if you provide more information about your specific case.
It works:
#b.link(:index => 1).click
I'm trying to dynamically change (if it got clicked) a normal table header (which is a link) to another defined CSS class 'th.hilite'. This link simply sorts this column and the header should got highlighted every time a user sorts the list.
The view where the class in question should be changed, looks like this:
%table#mytable
%thead
%tr
%th= link_to 'Title', mytable_path(:sort => 'title'), :id => 'title_header'
My question is simply: How and where could I dynamically set the class to %th.hilite if the header is clicked?
You can bind it from the view directly:
%th{:class => ("hilite" if #sort == "title")}= link_to 'Movie Title'...
However, you will also have to declare the #sort instance variable in your controller, and set it to either title or release, according to which column you are sorting. (i.e. #sort = params[:sort])
Be careful not to put logic (even conditionals) in your views if you can find a way around it. In order to avoid this common mistake, you need to make good use of the params and session hashes and set appropriate variables in controllers
# In your view
%th{:class => #title_header}= link_to 'Title', my_path(:sort => 'title'), :id => 'title_header'
# In your controller
sort = params[:sort] || session[:sort]
if sort == 'title'
ordering = {:order => :title}
end
BTW as long as values of your param match column name - no need to code each one
def index
#by=params[:by]
#movies = Movie.order(params[:by]).all
end
Javascript or jquery is not required..
The following HAML will work
%th{:class=>('title' == #sortby)?'hilite':""}= link_to 'Movie Title', movies_path(:sort => 'title'), :id => 'title_header'
You should use JavaScript to do this. I think it's good idea for you to use jQuery instead of pure JavaScript. Here are some examples
http://api.jquery.com/click/
http://api.jquery.com/css/