For a project I'm currently working on am trying to reach the following:
I have a simple page, on this page are 4, hidden and not visible elements,
they are simply formatted as this:
Basically all i want, is too build a sort of Easter egg, so when a user clicks these buttons in a specific order, i.e. link_4 -> link_1 -> link_3 -> link_2
it triggers a certain event, whatever this might be.
Ofcourse the event could only be triggered if the right combination/order of clicks have been done.
Any ideas how to go about this using jQuery?
var click_order = [];
$('a').click(function (e) {
click_order.push($(this).index());
if (click_order.slice(-4) == '3,0,2,1') {
// easter egg stuff
}
});
Related
I have 30 records in the IEnumerable in the view. I want to iterate each one of them using button. Like when I click "Next" button, the next record of the model should be displayed.
I am using MVC 5 and Entity framework.
Suppose you have 30 records and you want to display 5 records at time in view.
filter 5 records at a time using following manner.
public class StudentDetail
{
string StudentID;
string StudentName;
}
public List<StudentDetail> GetData(List<StudentDetail> lst, int start, int length)
{
List<StudentDetail> result = new List<StudentDetail>();
for(int i = start; i < start + length; i++)
{
result.Add(lst[i]);
}
return result;
}
then return data in view:
<P>
#foreach(lst in Model.Details)
{
<P>lst.StudentID</P>
<P>lst.StudentName</P>
}
<P>
on "Next" click you need to increment the start counter. Now you can take start counter in query string
#Html.ActionLink("Next", "Next", "StudentDetails", new { #start = Model.Start + Model.Length })
Something like that, Please let me know, if any issue found. Thanks :)
The best way I can think of to achieve this is to render them all to the view at once (using a foreach in your view), but hide all but the first one using some simple CSS.
Then use something like jQuery to listen for the button to be pressed, and when it is clicked, use jQuery to hide the currently displayed item, and make the next one visible.
The nice thing about this approach is that the user will not need to wait for the page to re-load after each click.
Dear SAPUI5 developers,
I have a sap.m.IconTabBar and I set the active tab by the code when the user switch between pages. I used the following code:
sap.ui.getCore().byId(this.createId("iconTabBar")).setSelectedKey("1");
The problem is that it switch the selected tab correctly to the first tab. But it does not show the blue line under the tab that shows it is selected.
Please look at the following images:
What shows when I select the first tab by code:
But what it shows when I press the tab by the mouse it shows a blue line under the icon like the following:
As #Ash said in the comments you need to call fireSelect but this works just if user the second tab at first. If the user is on the first tab and switches between the pages then fireSelect does not act properly. Thus you need to select the second tab at first then it will works almost all times.
sap.ui.getCore().byId(this.createId("iconTabBar")).setSelectedKey("2");
sap.ui.getCore().byId(this.createId("iconTabBar")).setSelectedKey("1");
sap.ui.getCore().byId(this.createId("iconTabBar")).fireSelect();
Ok I had a look into the IconTabBar source Code and theres something I dont really get why but here is how it proceeds :
when you call IconTabBar.setSelectedKey(key), it calls IconTabHeader.setSelectedKey(key)
then internally the IconTabBarHeader calls setSelectedItem(item, true)
the 'true' here is important, the parameter is named 'bAPIchange' in the setSelectedItem function, and it is used as condition for the fireSelect() :
if (!bAPIchange) {
// fire event on iconTabBar
if (bIsParentIconTabBar) {
oParent.fireSelect({
selectedItem: this.oSelectedItem,
selectedKey: sSelectedKey,
item: this.oSelectedItem,
key: sSelectedKey
});
} else {
// fire event on header
this.fireSelect({
selectedItem: this.oSelectedItem,
selectedKey: sSelectedKey,
item: this.oSelectedItem,
key: sSelectedKey
});
}
}
Which explains why the event is not fired in your case
I have a rather large form, that I've broken up into individual sections with "Next" and "Back" buttons for the user to navigate each step.
Here is how I set it up to work for now:
Each section is within its own xp:panel
Each xp:panel is hidden with "display:none". The transition happens when the user clicks on "Next" or "Back" by using JQuery's fade animation
What I am trying to do is, if the user clicks on "Next" I would like to validate only the fields in the current, visible section. If the validation fails, don't transition to the next step. If the validation passes, transition to the next step.
Right now, when I click on the "Next" button, every field is being validated and the transition doesn't happen.
Is there a way, that I can only validate the fields in a certain section or would I have to use something like Don Mottolo's code snippet: http://openntf.org/XSnippets.nsf/snippet.xsp?id=ssjs-form-validation-that-triggers-errormessage-controls
Thank you for your help!
P.S.: I know I could use the CSJS portion of the onClick event of the button to run some validation, but I'd like to use the "Display Error" controls.
You could look at computing the required attribute of each control that is to be validated and have that check which button is submitting the form. Tommy Vaaland has a function that does this:
// Used to check which if a component triggered an update
function submittedBy( componentId ){
try {
var eventHandlerClientId = param.get( '$$xspsubmitid' );
var eventHandlerId = #RightBack( eventHandlerClientId, ':' );
var eventHandler = getComponent( eventHandlerId );
if( !eventHandler ){ return false; }
var parentComponent = eventHandler.getParent();
if( !parentComponent ){ return false; }
return ( parentComponent.getId() === componentId );
} catch( e ){ /*Debug.logException( e );*/ }
}
Link: http://dontpanic82.blogspot.co.uk/2010/03/xpages-making-validation-behave.html
You can look at using a client side form validation framework such as Parsley: http://parsleyjs.org
This can of course be combined with server side validation for at least the final submission.
I don't see an event in the Bing map API v7 that will surface a double click event. Is there a way to do this? Assuming there isn't native support that I missed, I think I will have to write my own double click handler with a timer.
I had also a problem with the click-events. In facts, the normal click-event also fires during a double-click event. That is why I had to implement my own double-click handler. My approach can be translated to the rigth click, because I am only using the single-click event, which is also available for the right mouse button.
//Set up my Handler (of course every object can be the target)
Microsoft.Maps.Events.addHandler(map, 'click', Click);
//count variable, that counts the amount of clicks that belong together
myClick=0;
//A click fires this function
function click (e)
{
//If it is the first click of a "series", than start the timeout after which the clicks are handled
if (myClick == 0)
{
//Target have to be buffered
target= e;
//accumulate the clicks for 200ms and react afterwards
setTimeout("reaction(target)", 200);
}
//count the clicks
myClick = myClick+1;
}
//At the end of timeout check how often a click has been performed and react
function reaction(e)
{
if (myClick==1)
{
alert("Single Click!");
}
else (myClick==2)
{
alert("Double click!");
}
else (myClick==3)
{
alert("Tripple click");
}
//reset ClickCount to zero for the next clicks
myClick = 0;
}
Moreover it might be interesting to remove the standart double-click behaviour of Bing-Maps, to zoom in. This can be realized by the following code:
Microsoft.Maps.Events.addHandler(map, 'dblclick', function(e){
e.handled = true;
});
If you only use double click event
Microsoft.Maps.Events.addHandler(this.map, 'dblclick', functionHandler)
should solve the problem
I have successfully implemented dragging of a jquery-ui element onto my fullCalendar. The problem is that what I want to drop onto is not the calendar itself but a specific event displayed on the calendar in order to add the dropped item to the event. The missing piece is how to identify the event that was under the mouse when I dropped.
drop: function (date, allDay, jsEvent, ui)
{
var event = ???;
event.description += ui.helper.data("filters").text;
$('#calendar').fullCalendar('updateEvent', event);
}
I've discovered the solution. Basically you have to add "droppable" to the event element. I do this by catching the "eventRender" (I assume this is a good spot)...
eventRender: function (event, element)
{
// store the ID for later...
$(element).data('id', event.id);
element.droppable({
drop: function (event, ui)
{
// get the ID I stored above...
var rowID = $(this).data('id');
I just implemented this - thankyou for your solution!
I'm using it in combination with drop - I need to be able to drop events either onto another event or onto a date.
In my case adding event.stopPropogation(); in element.droppable drop is necessary to stop the date drop function from also triggering.