I'm trying to use one of these:
http://www.eyecon.ro/bootstrap-datepicker/
However, I'd like it to be the main element, i.e. always be displayed, not hide when clicked away from, and not display the element it writes to. I can't find any documentation or examples on how to do this. Any ideas?
I'd like to use this datepicker if at all possible because it's what I use in other areas of the site (where a non-persistent picker is needed) and would like to keep things consistent.
<input type="text" name="startdate" id="date" />
<div class="date" data-altfield="#date"></div>
$(function(){
$('.date').each(function(i,e){
var $d = $(this);
$d.datepicker({
altField: $d.data('altfield')
});
});
});
check it here : http://jsfiddle.net/MDTXS/2/
Related
I'm having a hard time trying to connect SUI modal with SilverStripe to generate them dynamically.
I want to achieve something like this:
I have button (attach events) to trigger modal with some content. I wanted to loop that elements (GridField) to generate everything dynamically. But the only thing I can achieve is multiple modals with the same "trigger class" and it doesn't matter which button I have clicked (first, last or whatever). I only have one modal (the last in hierarchy). Without SUI the solution is easy - put "this" to fetch the closest element and I can have as many different modals as I want, but SUI seems to complicate things.
I think the best solution will be to generate a class/id with SilverStripe and pass it to the JavaScript to use with modal or use one class for every modal and to "somehow inform" that this button triggers this modal.
Basically I need one code snippet to handle many modals, not many snippets to handle many modals. I hope it's clear enough what the the problem is.
Here is my code:
HTML/SS
(without specific SilverStripe tags)
<% loop SomeName %>
<div class="job-offers">
<a class="ui right floated button job-application">Click here</a>
</div>
<div class="ui basic modal job-application">
<div class="job-application-sheet">
(...)
<div class="job-application-sheet-content">
<div class="ui grid">
(...)
<div class="ui center aligned container job-application-action">
<p>Lorem ipsum</p>
<button class="ui primary button">Click here</button>
</div>
</div>
</div>
</div>
</div>
<% end_loop %>
JavaScript
$('.ui.basic.modal.job-application')
.modal({
autofocus : false,
observeChanges: true
})
.modal('attach events', '.job-application', 'show');
As you can see "job-application" class is a trigger for modal, so is this possible to change it to "(this)" so I don't have to write "specific" class for each button/modal. Or maybe there is a different/easier solution?
first i generated a data-type attribute for each of my elements that are going to display a modal when they are clicked, and in send as a local the same index to the modal this way:
<% #relateds_array.each.with_index do |related,i| %>
<div class="card custom" data-id="<%=i%>">
<%= render partial: 'my_modal', locals: {index: i} %>
</div>
<% end %>
the i put the modal in the partial that i called my_modal for this example and used the index that i sent as a local to create an unique id for each my modals, like this:
<div class="ui modal" id="modal-<%=index%>">
<p>blabla things inside this modal.</p>
</div>
and then with javascript, simply get the data-id of the element clicked and select the element that contain the id for that data-id, like this:
$('.element_that_you_want_to_open_moda_on_click').click(function(event){
var card_clicked = $(this).attr('data-id');
$('#modal-' + card_clicked).modal('show');
});
Hope this was useful for you.
Note that i used Ruby on Rails for this example, but the behaviour that you should use should be something similar to this, no matter what framework you use.
Answer based on Sebastian's solution. I did some minor tweaks to meet my needs, like I've used ID variable to automatically get DataObject ID which is generated dynamically.
Basically to dynamically add Semantic UI (SUI) modal in SilverStripe, first you should add "data-id" in a modal trigger, for example:
Template.ss
<a class="ui button custom-trigger" data-id="my-item-$ID">Click here</a>
then inside modal container add an "id" tag, for example:
<div id="modal-my-item-$ID" class="ui basic modal">
(...)
</div>
Finally in JavaScript file:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('#modal-' + triggerItem).modal('show');
});
I meet problem with SUI autofocus, so after a modal opens, screen went to the bottom and button placed there was highlighted.
I tweaked original snippet adding SUI settings:
$('.custom-trigger').click(function(event){
var triggerItem = $(this).attr('data-id');
$('.ui.modal')
.modal({
autofocus: false,
observeChanges: true
})
$('#modal-' + triggerItem).modal('show');
});
If someone wants to write "data-id trigger" manually using fields in CMS, then change $ID to $SomeField variable. Then normally add that field in .php file and in Page Controller add something like this:
public function init() {
parent::init();
Requirements::javascriptTemplate($this->ThemeDir().'/js/script.js', array(
'SomeField' => $this->SomeField
));
}
Hope this helps someone.
I am trying to get the filename of an uploaded picture to appear in the input field next to the picker button (for filepicker.io) . Basically I am trying to find what to put in the value field for the input tag to get the filename to appear once the picture is uploaded. Here is the code I have:
<div class="row margin" id='img-row'>
<input id="filename" disabled="disabled" value="<WHAT DO I PUT HERE?>" class="input" type="text" style="width: 360px;"/>
<input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-services="COMPUTER,FACEBOOK,FLICKR,INSTAGRAM,PICASA" data-fp-container="modal" data-fp-mimetypes="image/*" type="filepicker" data-fp-apikey="#################" id='campaign-img-input' value="<php echo h($_POST['img'])"/>
</div>
Thank you for your help! I haven't found any other examples like this in the documentation.
The recommended way to do this would be to bind a function to the onchange event of the filepicker input type. Once the upload occurs, the function will be called, and you can pull the filename out of the e.fpfile attribute.
Alternatively, it may be easier to use the filepicker.pick call directly given that you are interested in customizing the behavior. The widget is great for a drop-in solution in many cases, but if you're looking to customize further I'd recommend using the javascript api directly.
Feels like I'm missing something stupid here, but what's the recommended method to listen to the click event on a listview?
At the moment I've got:
WinJS.Utilities.query(".menuHolder").listen("click", linkClickHandler, false);
And my listview template uses the class 'menuHolder' for it's items:
<div id="menuTemplate"
data-win-control="WinJS.Binding.Template">
<div class="menuHolder">
<!-- menu img -->
<img src="#" data-win-bind="src : pic; alt : title" />
<div class="menuText">
<!-- menu text -->
<h1 data-win-bind="innerText : title"></h1>
<!-- menu desc -->
<h4 data-win-bind="innerText : description"></h4>
</div>
</div>
</div>
I don't seem to hit my breakpoint, in my link handler, or invoke it's function. Any thoughts?
EDIT:
As a follow on question (bearing in mind the item invoked event) is anyone aware of the recommended approach to pass data between a listview and the iteminvoked event, if I say wanted to use the WinJS.Navigator class to move around an application? I'm guessing I need to cast some part of the eventInfo into a suitable object and retrieve information, what part?
Assuming the data you want to "pass" is the data that is bound to the item that was invoked, you can do that in the event arguments that are passed in to the iteminvoked event. One of mine looks like this...
demosLV.oniteminvoked = function(e) {
e.detail.itemPromise.then(function(item) {
var location = format("/pages/{0}/{0}.html", item.data.key);
WinJS.Navigation.navigate(location, item.data);
});
};
So the demosLV is the ListView. I'm setting the oniteminvoked to a function. That function receives "e" as the event args. In the function I access e.detail.itemPromise and hang a .then off of it. Then I access the actual data in the .then using item.data.
Hope that's what you meant. BTW, the format function is one of mine in case you're wondering why it doesn't work for you.
Seems I was being a sausage, I needed to listen for the 'iteminvoked' event on the parent listview id reference, not the child level.
WinJS.Utilities.query("#menu").listen("iteminvoked", linkClickHandler, false);
I have a problem to add and delete html div dynamically. Below is the simplified code that I am working on:
<input type="button" value="+ Add More Division" name="add_div" id="add_div">
<div id="div_1">
<input type="button" value="+ Delete Div A" name="del_a" id="del_a">
</div>
<div id="div_2">
<input type="button" value="+ Delete Div B" name="del_b" id="del_b">
</div>
<div id="div_3">
<input type="button" value="+ Delete Div C" name="del_c" id="del_c">
</div>
This is the situation, div_1, div_2 and div_3 can be added and removed dynamically. div_1 will always be associated with button id del_a, div_2 with del_b and div_3 with del_c. It is only 3 divs maximum can be added.
I need jquery that can add and remove the div and reuse div_1, div_2 and div_3 along with the associated button ids.
For example, if the user delete the div_2, and the user want to add more division (which is only 1 more can be added), the jquery will try to find the existing divs, and somehow remember it. Since div_2 is not exist, div_2 will be added, does not matter the order. div_3 can go first before or after the other divs.
I just want to give freedom for the user to edit the form, since this massive form. I do not know how to do this in jQuery using .each().
Thanks for your help.
Edited:
By default, only div_1 is exist on the form. The user can have the freedom to add another 2 divs to add more divs. The user is also have the capability to delete div_1 when either div_2 or div_3 exist. One div must be exist.
you can use detach() function....it will simply remove the div and if you want to add it again have, a reference of that div and add it again..something like this
suppose, user deleted the first div like this...
var div
$('#del_a').click(function(){
div= $('#div_1').detach();
});
...
and when user click on add button you can do something like this...
$('#add_div').click(function(){
$(div).appendTo('where you want to append')
});
i think this might help you..
If you want to delete div dynamically den use it:
$('#mydiv').empty();
Add /Remove dynamically HTML element with jQuery plz see below
Add /Remove dynamically HTML element with jQuery
You can have three variables acting as flags for the divs present. When the add div button is clicked, check for the first flag which is not set, add that div and set the flag for that particular div. If all three flags are set, then disable the add more divs button. Hope this helps.
Its working fine (Plz optimized this code) :)
<script type="text/javascript" >
$(document).ready(function(){
$('#add_div').click(function(){
if(($('#del_a').is(":hidden"))){$("#del_a").show(); return; }
if(($('#del_b').is(":hidden"))){$("#del_b").show(); return; }
if(($('#del_c').is(":hidden"))){$("#del_c").show(); return; }
});
$('#del_a').click(function(){
if($('#del_b').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_a').hide();
});
$('#del_b').click(function(){
if($('#del_a').is(":hidden") && $('#del_c').is(":hidden") )
return;
$('#del_b').hide();
});
$('#del_c').click(function(){
if($('#del_a').is(":hidden") && $('#del_b').is(":hidden") )
return;
$('#del_c').hide();
});
});
I've got a list of objects in an MVC view, each with a set of submit buttons - Move up, Move down and Remove.
Using the answer from this question, I can get the button clicked - but I need to know which item it would be operating on.
The problem comes from the fact the input's value attribute is passed back, I need more information than that - i.e. an id.
Below is a snippet of the contents of a for loop, rendering each item.
<ul>
<li><input type="submit" name="SubmitButton" value="Move-Up" class="linked-content-position-modifier" /></li>
<li><input type="submit" name="SubmitButton" value="Move-Down" class="linked-content-position-modifier" /></li>
<li><input type="submit" name="SubmitButton" value="Remove" class="linked-content-modifier" /></li>
<li><%= Model.Contents[i] %></li>
</ul>
When the form is posted back, I can see that the SubmitButton has a value of either Move-Up, Move-Down or Remove - but no idea which item in the array it's referring too.
Without changing the value to something really ugly, how would I tell which item it's referring to?
Just a quick idea, but maybe you could try adding hiddenfield to each row and see which one gets submitted?
Why are you using a button?
Could a link work instead?
Move Up
I use similar code to update items in a table, but I do it with javascript and update the table accordingly...
<script type="text/javascript">
$('img.action').click(function(){
var itemId = this.attr('id'); // Do some parsing of the id here, i use a format of bi-##
$.ajax({ uri: 'controller/MoveUp/' + itemId });
});
</script>