I know the question is not so understandable and might also be duplicate but i cant find the specific solution of my problem so allow me to elaborate.
I am displaying lots of images using bootstrap in article thumbnails
I am using PHP to get the values from the database
I am using a foreach loop and adding elements dynamically
here's a snippet:
foreach ($cursor as $document)
{
foreach ($document["Pics"] as $photos)
{
echo "<article id='hasMenu' class='development design'>
<a href=".$photos["Photo"])." class='swipebox'>
<img src=".$photos["Photo"]." class='work img-responsive'>
</a>
</article>";
}
}
This code fetches all the images from the database and displays it on my page
Now this was the adding part i am having problem in deleting the specific image. I am using a right click context menu but i am not able to get a specific element which i want to delete as there is no id or class name because i dont know how much images will be added....
Here's my context menu snippet:
$(function() {
$.contextMenu({
selector: "#hasMenu",
callback: function(key, options) {
if (key == "delete") {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
}
if (key == "open") {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
}
},
items: {
"open": {
name: "Open",
icon: "edit"
},
"delete": {
name: "Delete",
icon: "delete"
},
}
});
$('.context-menu-one').on('click', function(e) {
console.log('clicked ', e);
})
});
By this I add a right click context menu that shows Delete and open option.
Now when i will click on delete i want to get the ID of that specific image(article) which i want to delete...
I hope my problem statement is clear...
Firstly, your PHP loop is generating a lot of HTML elements all with the same id of hasMenu, which is invalid. You should change that to a class.
You can then attach the context menu plugin to the elements with that class. Finally you can use the this keyword within each callback function placed on the buttons to reference the elements which triggered the menu to be shown in the first place. Try this:
$.contextMenu({
selector: ".hasMenu",
items: {
"open": {
name: "Open",
icon: "edit",
callback: function(key, opt) {
$(this).find('span').show();
}
},
"delete": {
name: "Delete",
icon: "delete",
callback: function(key, opt) {
$(this).remove();
}
},
}
});
.hasMenu span { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.5/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.5/jquery.contextMenu.min.css" />
<div class="hasMenu">Right click me... #1 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #2 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #3 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #4 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #5 <span>Opened content...</span></div>
Related
I'm trying to make a web-part which is basically a Kendo tabstrip . it has a simple ul on it's own and linking external html files to each relative li using a javascript code. it works fine so far.
but now I want to be able to call functions to add or remove whatever file I selected to my tabstrip and so far it's not working .
I've searched and found some functions to the job but this one is closer to what I had in mind .
when I use the add button the tabstrip is made but the contecturl link doesn't work and it's just an empty tab.
<------------------------ web-part ------------------------>
<div class="row">
<input type='text' id='tabname' name='tabname'>
<input type='text' id='tabLink' name='tabLink'>
<input type="button" value="Add Tab" onclick="AddTab()" />
<input type="button" value="Remove Tab" onclick="closeTab()" />
</div>
<div id="tabstrip">
<ul id="tabStripUL">
<li class="k-state-active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<------------------------ Javascript ------------------------>
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
select: function(element){selecttab(element)},
contentUrls: [
'Page1.html',
'Page2.html',
'Page3.html',
]
}).data('kendoTabStrip');
}
function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();
$("#tabstrip").data("kendoTabStrip").select(itemIdx);
}
function AddTab() {
var title = jQuery("#tabname").val();
var Address = jQuery("#tabLink").val();
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({
text: title,
contentUrl: Address
});
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function closeTab() {
var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
tabStrip.remove(tabStrip.select());
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
It should get a name and an Address and add that tab to the tabstrip or remove it based on the button.
I'd really appreciate it if someone could help.
<---------------------------- A quick update ----------------------------->
I tried to remove the buttons and simply add a single parameter to the addTab function to add each page that the is called . something like this :
function addTab(tabName) {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
if (tabName == "name1") {
tabStrip.append({
text: "title1",
contentUrl: 'page1.html',
});
}
else if (tabName == "name2") {
tabStrip.append({
text: "title2",
contentUrl: 'page2.html',
});
}
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
and call them like this :
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
select: function(element){selecttab(element)},
contentUrls: [
]
}).data('kendoTabStrip');
addTab("name1");
addTab("name2");
}
right now the problem is when I try to add more than one tab , one after the other(like the code), tabstrip sets both list items as active and it breaks the tabstrip. I think it's probably because of the 'tabstrip.select' , but I don't really understand what went wrong .
So I managed to fix it on my own , thought it may help someone else later .
the problem was that after appending I had multiple list items with "k-state-active" class that broke my tabstrip . I used jquery to manually remove the active classes whereever they were and add it up to the first li .
also I used to create a new variable each time I called addTab() instead of working on the same variable which made the whole thing alot slower and didn't have animation and select. so I made 'ts' public to be used in all the functions.
so that final code is like this :
<---------------HTML------------------>
<div id="tabstrip" style="width: 100%">
<ul id="tabStripUL">
</ul>
</div>
<----------------Script--------------->
var ts;
$(document).ready(function () {
InitLoadTabstrip();
});
function InitLoadTabstrip() {
ts = $("#tabstrip").kendoTabStrip({
animation: { open: { duration: 150, effects:"fadeIn" }
},
select: function(element){selecttab(element)},
contentUrls: [
]
}).data('kendoTabStrip');
addTab("tab1");
addTab("tab2");
}
//ts couldn't work on selecttab because of call limited size (don't really know what it is)
function selecttab(element) {
var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
itemIdx = item.index();
$("#tabstrip").data("kendoTabStrip").select(itemIdx);
}
function addTab(tabSelect) {
if (tabSelect == "tab1") {
ts.append({
text: "title1",
contentUrl: 'page1.html',
});
//sets an id to each tab
ts.tabGroup.children().last().attr("id", "tab1");
}
else if (tabSelect == "tab2") {
ts.append({
text: "title2",
contentUrl: 'page2',
});
ts.tabGroup.children().last().attr("id", "tab2");
}
ts.select((ts.tabGroup.children("li").length - 1));
$("#tabstrip li").find(".k-state-active").removeClass("k-state-active k-tab-on-top");
$("#tabstrip li:first").addClass("k-state-active k-tab-on-top");
}
// ClearTS: clears all the tabs and contents
function clearTS() {
$("#tabstrip li").remove();
$("#tabstrip .k-content").remove();
Hope it helps !
I have been trying to get the tag of a deleted chip from the div in the Materialize chips class, but nothing is working.
Here is what I have already tried.
$('.chips').on('chip.delete', function(e, chip){
console.log(chip);
console.log(e);
console.log(chip.tag);
});
None of the above is working.
With just only console.log(chip), I get undefined error in JavaScript console, but the function is firing when I delete the chip. I am just not able to get the value of tag of deleted chip. I want to store the tag in a variable.
I am creating chips dynamically on Materialize date select:
$('#pm_date').change(function () {
var chipvalue = $(this).val();
if (chipvalue !== "") {
// checking if tag already exits
if ($("#date_chip_select:contains(" + chipvalue + ")").length > 0) {
alert('Date already selected');
} else {
var appendstring = "<div class='chip' id='date_chip_child_" + chip_id + "'>" + chipvalue + "<i class='material-icons close'>close</i></div>";
}
}
});
Here is the fiddle: https://jsfiddle.net/hq22mne4/1/
chips.js, which is part of materialize, doesn't seem to expose any methods for adding or removing chips programmatically. It seems to exclusively listen for an enter keydown event and then internally add the chip.
So, I stitched together a workaround that does just that. I set potential chip's value within your onchange event:
$("#datechips").find('input').val($(this).val());
And create the chip when date picker is closed:
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
onClose: function() {
// add chip via filling the input and simulating enter
$("#datechips").find('input').trigger({ type : 'keydown', which : 13 });
},
});
It may not be ideal, but you should be able to tailor this going forward.
https://jsfiddle.net/j3ej8240/
I've also had a lot of trouble working this out. This is how I capture the add and delete chip events without using jQuery:
function chipDeleted(e, data) {
console.log("Chip was deleted with text: " + data.childNodes[0].textContent);
}
function chipAdded(e, data) {
console.log("Chip was added with text: " + data.childNodes[0].textContent);
}
//
document.addEventListener("DOMContentLoaded", function (e) {
console.log("DOM fully loaded and parsed");
var firstTag = "Initial Tag";
var elems = document.querySelectorAll('.chips');
var instances = M.Chips.init(elems, {
data:[{
tag: firstTag
}],
autocompleteOptions: {
limit: Infinity,
minLength: 1
},
placeholder: "No search...",
onChipDelete: function (e, data) { chipDeleted(e, data) },
onChipAdd: function (e, data) { chipAdded(e, data) }
});
});
And my HTML part is like this:
<body>
<div class="chips search-history"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
(rewriting the question now that it's more specific)
I had a sortable list working perfectly while I had manual 'li' items created. Then, I stopped creating the items manually since they should come from the server side. But once I started populating the li items through jquery, the sorting function stopped working.
<section>
<div class="taskcontainer">
<h1>alpha</h1>
<ul id="sortable1" class="connected sortable list">
<!-- <li class="list-group-item">This worked perfectly before</li> -->
</ul>
</div>
</section>
<script>
$('.sortable').sortable();
$(function() { //run when the DOM is ready
$(".list-group-item").click(function() { //use a class, since your ID gets mangled
$(this).addClass("completed"); //add the class to the clicked element
});
});
</script>
<script>
function getTasks()
{
var jsontasks = jQuery.parseJSON('<%=raw(#jsontasks)%>');
$.each(jsontasks, function(index, element) {
$("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");
});
$('.sortable').sortable();
}
</script>
Now, when I run the getTasks function, the li items get populated correctly. But the sortable function can't fire. Browser returns an error:
Uncaught TypeError: undefined is not a function
Somehow the sortable feature is not accessible from within the getTasks function.
Here is the full code:
http://pastebin.com/wbdNLC9f
Thanks
I can only suggest that you need to update your jQuery UI code. Similar code works:
$('.sortable').sortable();
function getTasks() {
var jsontasks = {
"name1": { name: "geoff"},
"name2": { name: "mark"},
"name3": { name: "lucy"},
"name4": { name: "richard"},
"name5": { name: "amelia"},
"name6": { name: "james"},
"name7": { name: "ronald"}
}
$.each(jsontasks, function (index, element) {
$("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");
});
$('.sortable').sortable();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<section>
<div class="taskcontainer">
<h1>alpha</h1>
<ul id="sortable1" class="connected sortable list"></ul>
</div>
<button onclick="getTasks();">Sortable</button>
</section>
As the code snippet seems to be broken in Google Chrome (seems to be a Stack Overflow problem, works in Firefox though), here's the Fiddle I used to test this.
Try to call sortable after you add all elements to list.
When you open nodes, it's fine. The "select_node.jstree" is not called. However, when you select a node and then close its' parent, jstree fires "select_node.jstree" for that parent node for some strange reason. Is there any way around this or is that just a flaw with jstree? I'd appreciate the help! Here's my code:
$("#RequirementsTree")
.bind("select_node.jstree", function(event, data) {
ReqNode = data.rslt.obj;
$("#req_tree_modal").dialog({ height: 400, width: 600, modal: true, closeOnEscape: true, resizable: false, show: "blind" });
$("#RMSDoc_ParentNodeID").val(data.rslt.obj.attr("id").substring(4));
if(is_requirement_node(data))
{
dispEditRequirementView();
var ReqCheck = data.rslt.obj.attr("name");
#* This is a REQUIREMENT *#
if(ReqCheck == "requirement")
{
// Ajax call to Server with requirement id passed in
$.ajax({
type: "POST",
url: '#Url.Content("~/RMS/getRequirementStateByID")',
data: {
ReqID : data.rslt.obj.attr("id").substring(4)
},
success: function(new_data) {
if(new_data == 1){
$("#RMSDoc_ReqEnabled").attr("checked", "checked");
$("#RMSDoc_ReqEnabled").val("true");
}
else if(new_data == 0) {
$("#RMSDoc_ReqEnabled").removeAttr("checked");
$("#RMSDoc_ReqEnabled").val("false");
}
}
});
$("#RMSDoc_RBSRequirement_RequirementsId").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_RBSRequirement_RequirementsText").val($.trim(data.rslt.obj.text()));
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSEditReqButton.ConfigurableLabelDesc");
}
else {
alert("Requirement node select error");
}
}
#* This is a TREE BRANCH *#
else
{
dispAddRequirementView();
$("#RMSDoc_TreeBranch_Text").val($.trim($('.jstree-clicked').text()));
$("#RMSDoc_TreeBranch_id").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_TreeBranch_Level").val(data.rslt.obj.attr("name").substring(7));
$("#RMSDoc_RBSRequirement_RequirementsText").val("");
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSCreateReqButton.ConfigurableLabelDesc");
}
})
Update:
I found a way to get it to work within the plugin, add the following to the "ui" config section:
"ui": {
"select_limit": 1,
"selected_parent_close":false
},
I believe what was happening is that when a sub-node was selected, collapsing the parent node would cause the parent node to be selected, triggering the event.
---------- Original Answer ---------------------
I'm not sure on the answer working within the bounds of the plugin. But I did find a work-around.
I added a class to each of the anchor () tags inside the tree "an".
<li class='jstree-closed' id="phtml_3" rel="folder">
test node 2
</li>
Then I wired JQuery to look for anchors with this class, and handled my click that way.
instance.on("click", "a.an", function (e) {
alert("click");
});
I still need to add code to find the ID from the parent-container, not optimal... but I don't have to compete with the collapse anymore for my click.
i am using the jquery for developing my system.
for particular functionality i am sending link through json data to have link for each row
of jqgrid table.
as
"<a href='#' class='ui-icon ui-icon-pencil' onclick='EditClick(\"" + {MYPRIMARY KEY}+ "\");return false;'>Edit</a>"
in javasript i have function as
function EditClick(param)
{
$('#mainDiv').load('/contoller/action/' + param, function() {
});
return false;
}
here action returns the view().
in this EditClick function i am loading another page in my main div.
This runs on IE7,firefox smoothly,but using it on IE8 sometimes its works sometimes not.
i mean sometime required page loads in main div sometimes not.
i realy dont understand the problem.
please guide me through this.
thank you.
I had a few problems working with jgGrid events a row.
What I did was to add a custom button:
jQuery("myGrid").navGrid('#myPager', { edit: false, add: false, del: false, search: false }, {}, {}, {})
.navButtonAdd('#myPager', { caption: "Do something", buttonicon: "ui-icon-note",
onClickButton: function() { var rowid = jQuery("myGrid").jqGrid('getGridParam', 'selrow');
if ((rowid == null) || (rowid == 0)) {
alert("Select a row before!"); }
else {
EditClick(rowid);
}
}, position: "last" })
As you can see the function EditClick is triggered only if you've selected one row in the grid. rowid should be your primary key.
Hope it helps.