Here's my code, lifted from waypoints docs:
var sticky = new Waypoint.Sticky({
element: $('.objectheader')[0]
})
<div class="object" id="object2">
<div class="objectheader" id="header2">Header Item 2</div>
<div class="objectbody" id="body2"><img src="images/samplechart.png" /></div>
<div class="clear"></div>
</div>
Basically, I have multiple objects (the list will grow, so hard coding for each ID isn't an option) that each contain an objectheader and objectbody. Every time I hit an objectheader, I want it to apply the sticky class and stick at the top until it reaches a new one, however it's only working on the first object. I know I'm missing something simple here...
with [0] you are specifying the very first element. You need to iterate over them to add a waypoint to each element...
var sticky = [];
$('.objectheader').each(function(idx){
sticky[idx] = new Waypoint.Sticky({ element: this });
});
then sticky will be an array of all your waypoint objects.
Related
I now and I can show a chart with dynamic data but a fixed number of chart. When I want to show a dynamic number of charts, something happens with ng-repeate. I said something happens, because if in mycharts[0].container.outerHTML I had the html that I need to show the graph (generated by the library), and if I copy and paste in a fixed place in my html, it will show the graph. My ng-repeate code looks as follow:
<div class="row" ng-controller="nodesDataTablesCtrl as nodeCtrl" >
<div ng-repeat="(index, node) in nodeCtrl.nodes" on-finish-render>
<div class="row">
<div class="col-lg-12">
<div id="{{ node.name }}_MEMORY" class="ct-chart snp_dynamic_chart"></div>
</div>
</div>
</div>
</div>
I found a solution, I'm not sure if is a bug of ng-repeate or Chartist.
In my ng-repeate I use nodeCtrl.nodes, which is an array that I receive from an http.get, my solution was create an range function, wich is, a function that receive a Number and return a list from 0 to n-1. Instead of passing the nodeCtrl.nodes which is updated everytime I make a request, I update a variable numberOfNodes with the range function, I mean, my new ng-repeat will be as follow:
<div ng-repeat="(index, node) in nodeCtrl.numberOfNodes" on-finish-render>
and in the success function of my request I do:
numberOfNodes = range(nodeCtrl.nodes.length)
which from my point of view make that ng-repeate don't update in some way internally.
Is important to se that programatically it shouldn't be differen but ...
I have called scripts on _Layout.cshtml page and my Index.cshtml page has partial view into it. So on page load, SignalR scripts working perfect on partial view, on page end I make another ajax request and load the partial view with another data filled in that and embed under already displayed data, and then the SignalR does not work on the newly embedded record.
This is my index page code:
<div class="col-md-6">
<div class="profile-body">
<div class="row infinite-scroll">
#Html.Partial("_AlbumRow", Model)
</div>
</div>
</div>
This is my partial View Code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#foreach (var item in Model)
{
<div class="widget">
<div class="block rounded">
<img src="#Url.Content(item.ImageUrl)" alt="#item.Title">
<input type="button" data-image-id="#item.imageId" class="btn btn-sm btn-default">Like</input>
</div>
</div>
}
Kindly help me how to resolve this issue that after making an ajax request I am not able to get those SignalR working. Here is more to say when I put the SignalR scripts on PartialView that works but it also sucks that on each ajax request there is again SignalR loaded on the page and when I click on LIke button it makes many calls to the function behind it.
Kindly help me to resolve this issue, I am stuck at this point since 1 week.
Here is signalR Code:
$(".btn.btn-sm.btn-default").on("click", function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(imageId);
});
Problem: You are binding event to elements directly, So when you remove this element and replace it with a different one the events are also removed along with that element, This is something like strongly coupled.
Solution: Use Jquery event delegation. This will make sure the events will be triggered on the current elements and also all the elements that can come in future.
syntax is as below.
$(document).on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
NOTE: This was never a singlaR issue, it was Jquery issue.
Efficient Way: The problem in using $(document).on("click"... is that when ever there is a click happening on the entire page the Jquery framework will bubble the events from the clicked element upwards(its parent, and its parent and so on..) unless the element specified in the selector arrives, So its kind of performance hit as we don't want this check's to run if we are clicking outside the required area ( button .btn.btn-sm.btn-default in this example).
So best practice is to bind this event delegation to the closest parent possible which will not be removed, <div class="row infinite-scroll"> in this question. So that only when the click happens within this element the event bubbling will happen and also will be stopped once it reaches the parent element,it acts kind of a boundary for event bubbling.
$('.row.infinite-scroll').on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
I have a requirement to show time estimates for each file currently in progress of being uploaded. We are testing out the UI portion of the uploader and wondered if there is a way to add this in near the current % complete/size information that is currently displayed.
I don't really want to make my own entire custom UI just for that purpose.
You can add custom elements to Fine Uploader's template, and these elements will be rendered onto the DOM which you can than manipulate via JavaScript.
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
...
<ul class="qq-upload-list-selector qq-upload-list">
<li>
...
<!-- custom element for updating with progress -->
<span class="file-progress"></span>
</li>
</ul>
...
</div>
</script>
You would then have to tie into Fine Uploader's events to update that element when the file is submitted (onSubmitted) or progresses (onProgress). To do this you'd use the getItemByFileId API method to select the file list item in the DOM, and then use JS to select that child element containing the progress element that you wanted to update, and -- naturally -- update it as you would.
// ...
onSubmitted: function (id, name) {
var el = getElementByFileId(id) // retrieves the list element for this file id.
// initialze the progress element, with 0% for example
},
// ...
onProgress: function (id, name, uploadedBytes, totalBytes) {
// update as the file progresses ....
}
// ...
The documentation has more examples on how easy it is to add custom elements to the DOM.
MVC/Razor/Javascript newbie question:
I have a MVC3/Razor form where the use can select a single product from a drop down list.
<div class="editor-label">
Product
</div>
<div class="editor-field">
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
#Html.ValidationMessageFor(model => model.ProductID)
</div>
What I then want is to display the price of the selected product on a label just below the drop down list (model property name is Amount).
This should be pretty easy, but I am pretty new at Razor, and know almost nothing about Javascript, so I would appreciate any verbose explanations of how do do it, and how it all hangs together.
Add a div/span under the Dropdown .
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
<div id="itemPrice"></div>
and in your Script, make an ajax call to one of your controller action where you return the price.
$(function(){
$("#ProductId").change(function(){
var val=$(this).val();
$("#itemPrice").load("#Url.Action("GetPrice","Product")", { itemId : val });
});
});
and have a controller action like this in your Product controller
public string GetPrice(int itemId)
{
decimal itemPrice=0.0M;
//using the Id, get the price of the product from your data layer and set that to itemPrice variable.
return itemPrice.ToString();
}
That is it ! Make sure you have jQuery loaded in your page and this will work fine.
EDIT : Include this line in your page to load jQuery library ( If it is not already loaded),
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The Amount isn't available to your view when the user selects a product (remember the page is rendered on the server, but actually executes on the client; your model isn't available in the page on the client-side). So you would either have to render in a JavaScript array that contains a lookup of the amount based on the product which gets passed down to the client (so it's available via client-side JavaScript), or you would have to make a callback to the server to retrieve this information.
I would use jQuery to do this.
Here's a simple example of what the jQuery/Javascript code might look like if you used an array.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This code can easily be built up server side as a string, then
// embedded here using #Html.Raw(Model.NameOfPropertyWithString)
var list = new Array();
list[0] = "";
list[1] = "$1.00";
list[2] = "$1.25";
$("#ProductID").change(displayAmount).keypress(displayAmount);
function displayAmount() {
var amount = list[($(this).prop('selectedIndex'))];
$("#amount").html(amount);
}
});
</script>
<select id="ProductID" name="ProductID">
<option value="" selected>-- Select --</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<div id="amount"></div>
You'll want to spend some time looking at the docs for jQuery. You'll end up using it quite a bit. The code basically "selects" the dropdown and attaches handlers to the change and keypress events. When they fire, it calls the displayAmount function. displayAmount() retrieves the selected index, then grabs the value out of the list. Finally it sets the HTML to the amount retrieved.
Instead of the local array, you could call your controller. You would create an action (method) on your controller that returned the value as a JsonResult. You would do a callback using jquery.ajax(). Do some searching here and the jQuery site, I'm sure you'll find a ton of examples on how to do this.
I would like to build one MVC application to create the account of a user using more then one wizard steps.
Do I need to go with one view page and hide or display a div by client side logic or do I need to create different view for each wizard (using partial views)?
What is the best option here? I need to maintain state data between wizard steps so the user can move back or next and on last step he or she can save it to the database.
There are different possibilities. You could use a pure client side solution by showing/hiding sections or a full server side solution. It's up to you to decide which one is best for your particular scenario. Here's an example you might take a look at if you decide to go the server side approach.
Depends on if you allow javascript or not.
If you allow javascript, use jQuery to show/hide divs.
I just made the following wizard script. It supports multiple wizards on the same page, as long as you follow the class/div syntax below.
<div class="wizard">
<div class="step active">
some information
</div>
<div class="step" style="display:none">
Step 2 info
</div>
<div class="step" style="display:none">
Step 3 info
</div>
<input type="button" class="prev" style="display: none" value="Previous" />
<input type="button" class="next" value="Next" />
</div>
<script type="text/javascript">
$(function() {
$('.wizard .prev').click(function() {
var wizard = $(this).parent('.wizard');
$('.step.active', wizard).hide();
var currentStep = $('.step.active', wizard);
currentStep.hide();
currentStep.removeClass('active');
var newStep = currentStep.prev('.step', wizard);
newStep.addClass('active');
newStep.show();
if ($('.step:first', wizard)[0] == newStep[0]) {
$(this).hide();
}
$('.next', wizard).show();
});
$('.wizard .next').click(function() {
var wizard = $(this).parent('.wizard');
$('.step.active', wizard).hide();
var currentStep = $('.step.active', wizard);
currentStep.hide();
currentStep.removeClass('active');
var newStep = currentStep.next('.step', wizard);
newStep.addClass('active');
newStep.show();
if ($('.step:last', wizard)[0] == newStep[0]) {
$(this).hide();
}
$('.prev', wizard).show();
});
});
</script>
Without javascript:
Create a view model which contains information for all steps and share it between all wizard step views. This allows you to keep all state between the different POSTs.
I'm doing something similar at the moment. I'm collecting a large set of data over several steps and allowing the users to save the data at any point.
I've basically split it up into multiple views and created ViewModels for each view with the relevant info for that wizard step. Seems to be working reasonably well for my purposes.