Good day. I am using JQUERY Mobile and developing a dynamic selection list view. When I click the 'getGrouping' button to append, it works on single click. When I click the 'getDel' button on single click it wont remove until I do it a second time. Has anyone ran into this before? Did I forget to refresh something? It goes through the function on single click every time just removes on the second go around.
How do I execute a single click function that eliminates the last child of a selection without double clicking? Any help is most appreciated.
$(document).on('click','#getGrouping', function(){ // Add list
var listCreated = false;
ch = ch + 1;
$("#listMain").append("<li><li id = 'numLi-" + ch + "' data-role='collapsible' data-iconpos='right' data-shadow='false' data-corners='false'><h2>Build Tag Group</h2>"
+ " <div class='ui-bar ui-bar-a' style='height: 680px; overflow-y: auto; overflow-x: hidden;'>"
+ " <div class='ui-grid-b'><div class='ui-block-a'></div><div class='ui-block-b'><h1 id='listTitle'></h1></div>"
+ " <div class='ui-block-c'><button id = 'refreshTag'>Refresh</button></div></div></li>");
listCreated = true;
$("#listMain").trigger("create");
$("#listMain ul").listview("refresh");
glob = $("#listMain li").children().size() + 1;
alert(glob);
});
$(document).on('click','#getDel', function(){ // delete last row of list
glob = $("#listMain li").children().size() -1 ;
$("#listMain li").last().remove();
$("#listMain ul").listview("refresh");
$("#getDel").button("refresh");
});
Related
I am building a user interface with javascript and some jquery that is populated by a for loop from an array of products and their individual details. Once the products load with the abridged details, I want the user to be able to click on a 'details' button that will have make a pop up window appear showing the full details of the selected item. I have everything working HOWEVER the window is populated by the last item created by the for loop, as opposed to those of the item selected. I am pretty new to javascript and haven't been able to find any solutions that would fit this problem. Any ideas on how to accomplish this?
document.body.onload = addElement;
function addElement () {
for(i = 0; i < items.length; i++) {
//Create elements for items and pop windows, and html for individual item details
var prodDiv = document.createElement("div");
var popDiv = document.createElement("div");
// Add the rest of the html and looped data to variables
var popUpWindow = "<div class='popup-content'>" + divName + divPrice + divBrand + rating + prodId + divLong + "</p><button class='close'>Close</button></div></div>";
var blob = divImage + divName + divPrice + divBrand + divShort;
//Account for null values
if(items[i].brand == null) {
if(items[i].salePrice == null) {
var blob = divImage + divName + divPrice + divShort + dtlButton;
} else {
var blob = divImage + divName + divSale + divShort + dtlButton;
}
} else {
if(items[i].salePrice == null) {
var blob = divImage + divName + divPrice + divBrand + divShort + dtlButton;
} else {
var blob = divImage + divName + divSale + divBrand + divShort + dtlButton;
}
}
//Add item info to HTML element
prodDiv.innerHTML = blob;
popDiv.innerHTML = popUpWindow;
//Add class attributes
prodDiv.setAttribute("class", "col-sm-4 col-lg-2 prodContent");
popDiv.setAttribute("class", "popup-overlay");
//Add new element to div
var currentDiv = document.getElementById("allDiv");
currentDiv.appendChild(prodDiv);
currentDiv.appendChild(popDiv);
//Appends an "active" class to .popup and .popup-content when
the "Open" button is clicked
$(".open").on("click", function(){
$(".popup-overlay, .popup-content").addClass("active");
});
//Removes the "active" class to .popup and .popup-content when
the "Close" button is clicked
$(".close, .popup-overlay").on("click", function(){
$(".popup-overlay, .popup-content").removeClass("active");
});
}};
There're some problem.
You bind event in for loop, and event is bind for a class selector => all exists button will be binded again.
It's mean, if you have 10 item, first button will call 10 times click funtion.
You should move them outside for loop, or change selector.
And you must tell jquery exactly popup to show when you click a button
You can change like that:
1: add some thing to identify popup
var popUpWindow = "<div class='popup-content itemid-"+ yourItemId +"'>"
2: Then, bind to only right button
$(prodDiv).find(".open").on("click", function(e){
//do smthing to show right div,
// $(".itemid-"+yourItemId ) .....
});
and fix close button, too
So i want to make a remove player button, so that everytime i click it, it hides a images/button, the same for a add player function.
function addplayer(){
for (var i = 51; i <= 94; i++) {
if (i == 51 || i == 61 ||){
$("#" + "addplayer" + i).show();
}
}
}
This is my html caller
<button onclick="addplayer();"style="bottom:55;position:fixed;right:10;width:100;height:40px;background-color:#FFFFFF;">addplayer</button>
document.getElementById("addplayer2").onclick=function(){
document.getElementById("51Container").style.display="inline-block";
document.getElementById("52Container").style.display="inline-block";
document.getElementById("53Container").style.display="inline-block";
document.getElementById("54Container").style.display="inline-block";
}
document.getElementById("addplayer3").onclick=function(){
document.getElementById("61Container").style.display="inline-block";
document.getElementById("62Container").style.display="inline-block";
document.getElementById("63Container").style.display="inline-block";
document.getElementById("64Container").style.display="inline-block";
}
(i got 6 in total completly looking the same), just to illustrate, how it would work
Theese are my add player function, just on 5 different buttons, just to showcase that it is doing something, it doest seem to work for me, how do i do this, so that the same button will add (show), different object instead of the solution i got atm.
Hope somebody will help me.
If you want to invoke the function which is assigned to the addplayer# control, instead of calling $("#addplayer" + i).show() try calling $("#addplayer" + i).click() .. however, based on our back-and-forth, it seems that your i needs some attention.
As you said, your addplayer# controls are buttons, therefore, I suggest the following:
function addplayer(){
$("button[id^='addplayer']").each(function(i,e) { $(e).click(); });
}
This will invoke any click event function defined for any buttons whose id starts with addplayer.
See this fiddle for an example of how it works: https://jsfiddle.net/qhevn1x3/2/
Although I do not know your page's exact makeup, I would suggest something along these lines (if possible):
<div id='51Container'>some player</div>
<button class="addPlayer" data-id="51">Add Player</button>
<button class="removePlayer" data-id="51">Remove Player</button>
Then my JS would be something like:
// Page-level execution to assign my click events
$(function() {
$("button.addPlayer").on("click", function() {
var id = $(this).attr("data-id");
$("#" + id + "Container").css({'display':'inline-block'});
$("button.addPlayer[data-id='" + id + "']").toggle();
$("button.removePlayer[data-id='" + id + "']").toggle();
});
$("button.removePlayer").on("click", function() {
var id = $(this).attr("data-id");
$("#" + id + "Container").css({'display':'none'});
$("button.addPlayer[data-id='" + id + "']").toggle();
$("button.removePlayer[data-id='" + id + "']").toggle();
});
})();
This will wire up the add/remove buttons with the corresponding player. Then, if you wish to have a button to hide/show multiple, you need only select the appropriate add/remove buttons (by filtering by data-id) and invoke their click events.
Can you please tell me how to get click event of row which is generated on panel .Actually I am able to get event of row which is generated on page.But i used this http://dbushell.com/2012/06/17/nestable-jquery-plugin/
I want to get click event of row which is generated in panel.
I make a simple demo to show nested list in panel. To open the panel there is button on header "open panel".
when you click "add test case button".it generate rows in panel as well in screen.When you click any of row it open new screen .there is another "add test case " button .it generate the nested list in panel
http://jsfiddle.net/VRPMj/1/
I get the click event of row which is on page like that .
$(document).on('click', '.clickTestCaseRow', function (e) {
var clickId = this.id;
hideDisplayView();
displayNewView(clickId);
alert('click')
e.stopPropagation();
})
When I do same like that on panel list it not work .:(
So there seem to be two problems with this
Firstly, the items in the side panel don't have the class clickTestCaseRow so the $(document).on('click'.. doesn't trigger on them.
var menuid = "menu_" + id;
$('#testSuit').append('<li class="dd-item submenu_h" id="' + menuid + '" ><div class="clickTestCaseRow dd-handle" id="' + menuid + '">' + id + '</div></li>')
Secondly, it seems the nested list plugin stops mousedown events on its items.
So I've disabled the nested list to check and it works now. Without the drag function of nestable though:
http://jsfiddle.net/VRPMj/3/
To really fix the issue you'd have to fiddle with the nestable plugin itself.
I've had a quick look at it and the issue seems to be on line 104.
This prevents the mousedown event on the items. So there's a starting point.
var onStartEvent = function(e)
{
var handle = $(e.target);
if (!handle.hasClass(list.options.handleClass)) {
if (handle.closest('.' + list.options.noDragClass).length) {
return;
}
handle = handle.closest('.' + list.options.handleClass);
}
if (!handle.length || list.dragEl || (!hasTouch && e.button !== 0) || (hasTouch && e.touches.length !== 1)) {
return;
}
e.preventDefault(); // <=== Here
list.dragStart(hasTouch ? e.touches[0] : e);
};
I have a table with a default of 4 rows for user to input. please see the fiddle here http://jsfiddle.net/xaKXM/4/
When the user click on "Add More", the table will add new row to the "labelTable" with unique ID, as well as "configtableTable".
var displaymore = '<tr id=row'+currentIndex+'><td style="text-align: center">'+currentIndex+'</td>'+
'<td width="60%"><p id="label_row_'+currentIndex+'"></p></td>'+
'<td><button type="button" class="switch" id="switch_'+currentIndex+'"data-role="button" data-transition="fade">Activate</button></td></tr>';
When button "Submit" is pressed, user can see the description and the "Activate" button in the configtableTable. In order to make sure the Activate button is useful, i append thisIndex to a paragraph #ptest. It works for the first 4 default rows but does not work for the newly added rows (5 onwards).
What's wrong with my logic and code?
SOLVED: by creating a class "switch" and use .on()
$("#configtableTable").on('click', ".switch", function () {
thisIndex= $('td:nth(0)',$(this).closest('tr')).text();
if(thisIndex == ""){thisIndex = 0;}
$('#ptest').append(thisIndex);
$.post('/request', {responseNumber:$('#number_'+thisIndex).val(), key_pressed:"activate"});
});
there are two errors
1.In the generated code for "addmore", it should be following code for button
id="switch_' + currentIndex + '"
2.After creating new buttons, you have to add the click event for them.
I suggest the following code
$('#configsubmit').click(function () {
for (var x = 1; x <= currentIndex; x++) {
$('#label_row_' + x).html($('#label_' + x).val());
}
$('#configtable').show();
$("#configeditdiv").show();
$('#labels').hide();
$("#configtableTable [id^='switch_']:button").unbind('click');
$("#configtableTable [id^='switch_']:button").click(function () {
thisIndex = $('td:nth(0)', $(this).closest('tr')).text();
if (thisIndex === "") {
thisIndex = 0;
}
$('#ptest').append(thisIndex);
$.post('/request', {
responseNumber: $('#number_' + thisIndex).val(),
key_pressed: "activate"
});
});
I have a contentEditable div with following text for example:
<div contentEditable='true'> This document is classified</div>
Now for example if user clicks on 'm' in word document I want to show a context menu containing few text choices. That context menu will be contained in a div element. I want to replace the word "document" with the option(text) selected by user from context menu. In my view I have to find absolute position of click to show context menu and then I have to find space elements before and after the caret position and then replace the selection with option selected from context menu. Any idea how I can do it using JavaScript and jQuery?
Edit:
one part of my question is about context menu and other the more important is how i can detect the word on wchich user has clicked on in contentEditable div or in text area on the other hand. my goal is something like in below picture
actually i want to make a similar transliteration application. the process of script conversion from roman to Urdu has been done however i m facing lot of problems in user interface development on the web. google transliteration application can be found here. i hope someone can help me in getting word under user's mouse and display a context menu containing few choices.
You may want to have a look at some of the existing context menu plugins
http://www.trendskitchens.co.nz/jquery/contextmenu/
http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
http://plugins.jquery.com/plugin-tags/context-menu
To get the currently selected word in a text area, have a look at the fieldSelection plugin.
So using the second plugin and fieldSelection (Disclaimer: I think the indexing regarding string replacement is slightly off - have not fully tested)
Javascript
$(document).ready(function () {
//replace
$("#tx").contextMenu({
menu: 'replace'
}, function (action, el, pos) {
update(action, el)
});
function update(action, el) {
var range = $("#tx").getSelection();
var textLength = $("#tx").val().length;
var firstPart = $("#tx").val().substring(0, range.start);
var secondPart = $("#tx").val().substring(range.start, textLength);
var lastIndexofSpaceInfirstPart = firstPart.lastIndexOf(" ");
var firstIndexofSpaceInSecondPart = secondPart.indexOf(" ");
var startOfWord = 0
var endOfWord = 0
if (lastIndexofSpaceInfirstPart < 0) {
// start of string
startOfWord = 0;
} else {
startOfWord = lastIndexofSpaceInfirstPart;
}
if (firstIndexofSpaceInSecondPart < 0) {
// end of textArea
endOfWord = textLength
} else {
endOfWord = firstIndexofSpaceInSecondPart + range.start;
}
var word = $.trim($("#tx").val().substring(startOfWord, endOfWord));
var replaceMent = $("#tx").val().substr(0, startOfWord)
+ action.toString()
+ $("#tx").val().substr(endOfWord, textLength);
alert(
"rangeStart: " + range.start +
"\n\nrangeEnd: " + range.end +
"\n\nrangeLength: " + range.length +
+"\n\nfirstPart: " + firstPart
+ "\n\n secondPart: " + secondPart
+ "\n\n lastIndexofSpaceInfirstPart: " + lastIndexofSpaceInfirstPart
+ "\n\n firstIndexofSpaceInSecondPart:" + firstIndexofSpaceInSecondPart
+ "\n\nWordStart: " + startOfWord
+ "\n\nEndofWord: " + endOfWord
+ "\n\nWord: '" + word + "'"
+ "\n\nNew Text: '" + replaceMent + "'"
);
}
});
Html
<textarea id="tx">
Some text
</textarea>
<ul id="replace" class="contextMenu">
<li class="edit">youwordhere1</li>
<li class="cut separator">youwordhere2</li>
<li class="copy">youwordhere3</li>
<li class="paste">youwordhere4</li>
<li class="delete">youwordhere5</li>
<li class="quit separator">youwordhere6</li>
</ul>
To detect a word under the mouse cursor rock solid reliable: Just wrap every word you want to detect in a separate container, span for example. It is not difficult to do with javascript. Just parse the words in a loop and create span element for every one, then set its innerHTML = word. Then you can read the click event target and it will give you the span with the word.
To show a context menu on the spot is a trivial task:
Create a div with your content menu and make it positiion:absolute and display:none. When you want to show it, set its top and left styles (for example) equal to the target span element offset from the parent container and make its style display = "box". You are all set ;)