I have these js code;
$(document).ready(function() {
$.getJSON("Stations.php", function(jsonData){
$.each(jsonData, function(key,value) {
$('#selectStation')
.append($("<option></option>")
.attr("value",key)
.text(value.name));
});
});
});
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
//$('#sta_numberOfIcons').append('<i class="icon-user" ></i>');
var pas_icon = document.createElement("a");
pas_icon.className = "icon-user";
pas_icon.id='id_'+(j);
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
});
}
});
});
}
Here is some html part:
Stations
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);">
</select>
First when the page is loaded the combobox is filled with Station 1 ,Station2 etc.The when I want to select one of them (this refer 1, 2, 3, 4 or 5 ) I am calling sta_callStation function.I dynamically create person icons giving them some attributes, for example their ids; id_1 ,id_2 etc.But after that how can I trigger them when mouse over, should I use class or id of them?
Before choosing station:
https://docs.google.com/file/d/0B1RbKsJ4B8eoeW5wdWhLQW85QTQ/edit?usp=sharing
After choosing one station(randomly produced passengers in php)
https://docs.google.com/file/d/0B1RbKsJ4B8eoQmYwWVpYbno2NnM/edit?usp=sharing
You could use some client side UI framework (eg. Knockout.js).
If you would like to keep your UI rather simple, then yes as you said, you could create class with person attributes and appended reference to icon HTML element. When creating instance of class, link HTML callback function to your object function.
Somethig like this:
var PassInfo = function (name)
{
name: name,
onhover: function ()
{
// do something special
}
};
var passInstance = new PassInfo('passenger1');
$(pas_icon).hover(function()
{
passInstance.onhover();
});
Related
Long story short. I'm attempting to implement a file upload feature in my C# MVC 3 application.
I have a fileuploader.js file which I beleive was taken was taken from http://github.com/valums/file-uploader (this is not my application originally).
I'd like to make the file upload feature available to reach row on the table in my view, number of rows will be based on the number of entries received from the database.
The problem I'm encountering at present is that the Upload btn is only appearing on the first row.
I'm certain this is because this feature begins with finding the div with an id of "file-uploader-attachment"
I tried changing the javascript to document.getElementsByClass and giving the div a class instead of an ID but it was unsuccessful.
So I need to either generate and assign ID's on the fly or of another way to id elements in each row and allow the javascript to find them.
I will put on more code as needed, but I don't want to fill the page with code.
If someone can point me in the right the direction or knows of a similar solution.
Again, I need a file upload btn/feature for each row in a table whose size is changeable.
cell in table
<td id="file-uploader-attachment"></td>
start of the createUploader() function in associated javascript code
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-attachment'),
script in view:
<script type="text/javascript">
$(document).ready(function () {
// requests attachments from server, clears existing attachments and
// replaces with most up to date attachments
function LoadAttachments() {
$('.loading').show();
$.post('/CalibrationViewer/GetAttachments', { calibrationId: CAL_ID }, function (data) {
$('#attachment').empty();
$('#attachment').append(data);
$('.loading').hide();
});
}
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
//$(this).find('#file-uploader-attachment').html($('#myHTML').html());
createUploader();
$(this).find('file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
$(".qq-upload-button").css("margin-top", "-6px");
$(".qq-upload-button").css("margin-bottom", "-20px");
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
function createUploader() {
$(".file-uploader-attachment-Class").each(function (element) {
var uploader = new qq.FileUploader({
element: element,
sizeLimit: 2147483647, // max size
action: '/Controller/Action',
allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
params: {
customer: CUST_NAME,
calibrationId: CAL_ID
},
multiple: false,
debug: false,
onComplete: function (id, fileName, responseJson) {
var resultMessage = document.getElementById('resultMessage');
alert(responseJson.msg);
$('#resultMessage').addClass('greenText');
resultMessage.innerHTML = responseJson.msg;
$('#attachment').prepend('<p><a class="attachment-file" href="' + responseJson.fileId + '">' + responseJson.fileName + '</a>');
$('#removeAttachment').prepend('<p><a class="attachment-delete" href="' + responseJson.fileId + '">X</a></p>');
$('#no-attachments').remove();
}
});
});
}
});
The reason is that you can have an id (file-uploader-attachment) only once in your html page (they should be unique). If they are not unique the first one is taken (if this is by standard or common sense, I do not know).
What you want to achive is something like this:
<td class="file-uploader-attachment"></td>
and
var elements = document.getElementsByClassName('file-uploader-attachment');
Array.prototype.filter.call(elements, function(element){
var uploader = new qq.FileUploader({
element: element, ...
});
or even simpler with jquery (if already in use):
$(".file-uploader-attachment).each(function (element) {
var uploader = new qq.FileUploader({
element: element, ...
});
I'm currently facing a problem with the Kendo UI MultiSelect widget for selecting an option more than once. For example, in the image below I want to select Schindler's List again after selecting The Dark Knight, but unfortunately the MultiSelect widget behaves more like a set than an ordered list, i.e. repetitive selection is not allowed. Is there actually a proper way to achieve this? Any workarounds?
That's the intended behavior of the multi-select control and there is no simple way to make it do what you want using the available configuration options. Possible workarounds are ...
Creating a custom multi-select widget
Something like this should work (note that I haven't tested this much - it lets you add multiples and keeps the filter intact though):
(function ($) {
var ui = kendo.ui,
MultiSelect = ui.MultiSelect;
var originalRender = MultiSelect.fn._render;
var originalSelected = MultiSelect.fn._selected;
var CustomMultiSelect = MultiSelect.extend({
init: function (element, options) {
var that = this;
MultiSelect.fn.init.call(that, element, options);
},
options: {
name: 'CustomMultiSelect'
},
_select: function (li) {
var that = this,
values = that._values,
dataItem,
idx;
if (!that._allowSelection()) {
return;
}
if (!isNaN(li)) {
idx = li;
} else {
idx = li.data("idx");
}
that.element[0].children[idx].selected = true;
dataItem = that.dataSource.view()[idx];
that.tagList.append(that.tagTemplate(dataItem));
that._dataItems.push(dataItem);
values.push(that._dataValue(dataItem));
that.currentTag(null);
that._placeholder();
if (that._state === "filter") {
that._state = "accept";
}
console.log(this.dataSource.view());
},
_render: function (data) {
// swapping out this._selected keeps filtering functional
this._selected = dummy;
return originalRender.call(this, data);
this._selected = originalSelected;
}
});
function dummy() { return null; }
ui.plugin(CustomMultiSelect);
})(jQuery);
Demo here.
Using a dropdown list
Use a simple dropdown list (or ComboBox) and bind the select event to append to your list (which you have to create manually).
For example:
var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
select: function (e) {
var item = e.item;
var text = item.text();
// store your selected item in the list
mySelectedList.push({
text: text
});
// update the displayed list
$("#myOrderedList").append("<li>" + text + "</li>");
}
});
Then you could bind clicks on those list elements to remove elements from the list. The disadvantage of that is that it requires more work to make it look "pretty" (you have to create and combine your own HTML, css, images etc.).
I have that web app I am working on.
Here is a picture.
The idea is that there is an array of objects, it gets displayed as a row of divs. Each of these objects also has an array of objects inside them and they are displayed as a row of divs inside these divs.
The user should be able to add new objects to the objects listed on the page. That should be accessed by pressing "Edit".
The problem: How do I make the script grab the objects from that div that was clicked and display them in a window?
I am using meteor bootstrap package.
Ask me questions if you didn't understand something - that stuff is like a maze.
Javascript
var state = 0;
var
sides = [
{
name:"MURICA",
types:[
{
name:"EAGLE",
desc:"FREEDUM",
power:10
}
]
}
];
if (Meteor.isClient) {
Template.global.side = function(){
var obj = [], m;
m = 1;
for (var i in sides){
obj.push({
index : m,
object : sides[i]
});
}
console.log(JSON.stringify(obj));
return obj;
}
Template.content.state = function(){
return state;
}
Template.global.events ({
'click .edit': function(){
jQuery('#edit').toggle()
console.log("PRESSED FREEDOM");
}
});
}
HTML can be found here (was too big to post) http://pastebin.com/kmNnSV1w
This may be helpful:
html
<template name="asdf">
<div class="asdf-box" data-nameOfTheParam="{{putSomeValueHere}}">
<span class="asdf-button">Click me!</span>
</div>
</template>
js
Template.asdf.events({
'click .asdf-button': function(e) {
console.log( $(e.target).closest('.asdf-box').data('nameOfTheParam') );
}
});
When working with database items, you may just use the id: data-id={{_id}} and fetch the desired object in the callback based on this id.
hello i want to create a edit interface for array based div-array.
for example i create in a loop 15 divs,
based on this i want to load via ajax an edit interface where i can
select one of those divs and change their classes,
like so, i can do this by hand,
var divs = {
'selector': ['Select One'],
'id': ['div-1', 'div-2', 'div-3', 'div-4'],
'class': ['class-1', 'class-2', 'class-3', 'class-4']
};
the point is i dont know how many they are until the user inputs a int to render them.
id and class should be populated based on my current rendered div amount,
for example:
current code:
(function($) {
var container = $('.holder');
//The input getter for amount of divs
var form1 = new Backbone.Form({
schema: {
nDefine: 'Number',
}
}).render();
$('.input').append(form1.el);
// rendering amount of divs
function render(){
num = parseInt($('input').val());
for(var i = 1; i <= num; i++) {
container.append('<div id="id'+i+'" class="box category'+i+'">Id:'+i+'</div>');
}
}
// renders divs on click
$('.n-definer').click(function() {
container.empty();
render();
//form1.commit();
});
})(jQuery);
this works fine,
how can i get now those id's and classes into my backbone form selects in array form?
I have a page with severl jqGrids, but only one is visible at a time. I want a simple function to return which one is visible at any time. Is there some function like this, which would show which divs are visible:
$('div').each(function(){
if($(this).is(':visible')){
alert($(this).attr('id'));
}
});
Is there something like this that can parse through all jqGrids on a page?
Thanks!
You need probably something like the following
$("table.ui-jqgrid-btable:visible").attr('id');
If no grid are on the table you will get undefined value. If more as one grid is visible you will get the id of the first one.
To have array of ids of all visible grids you can use the following code
var ids = $.map($("table.ui-jqgrid-btable:visible"), function(value) {
return value.id;
});
// now we have all ids in the array
alert(ids.join()); // display all as comma-separated
You can make the above code more safe with the test for grid expandos:
var ids = $.map($("table.ui-jqgrid-btable:visible"), function(value) {
if (value.grid) { return value.id; }
});
// now we have all ids in the array
alert(ids.join()); // display all as comma-separated
As far as I have seen, All grids are wrapped with a div class ui-jqgrid. So try something like below,
$('div.ui-jqgrid:visible').each(function () {
alert(this.id); //above would return the gview_<table_id> or gbox_<table_id> or
//something_<table_id>
alert($(this).find('.ui-jqgrid-btable').attr('id')); //should return table_id
});