i am having the same problem as in this thread
jQuery unexpected sortable behaviour
my system is doing identically the same thing. the only difference between my code and his code is that my code is 100% generated by ajax on the fly, and im inserting tables into each of the LI, but alas the results are the same. here is the html im inserting for each of my master list entries.
here is the blank list thats in my html
<ul id=\"questionList\">
</ul>
this is generated by javascript and ajax calls on the fly
<li id="liName-11" class="ui-state-default">
<table width="600" border=".5" cellspacing="2" cellpadding="2" class="singleBorder">
<tr>
<td width="386" align="left" valign="top">
<span id="quesEditText-11">Does Default Work
</span>
<table>
<tr>
<td>
<span id="quesEditSpan-11" onclick="setEditField('ques', 11)">Edit
</edit>
</td>
<td>
<span id="quesUpdateSpan-11" onclick="updateQuestionCall('ques', 11)">Update
</edit>
</td>
<td>
<span id="deleteSpan-11" onclick="deleteQuestionAjax(11)">Delete
</edit>
</td>
</tr>
</table>
</td>
<td width="200">
<input type="text" id="answerBox11">
<br>
<a href="#" onclick="insertAnswer(11, 'answerBox11')">Insert Answer
</a>
<ul id="answerList-11">
<li id="17">
<span id="answEditText-17">lets try this answer
</span>
<table>
<tr>
<td>
<span id="answEditSpan-17" onclick="setEditField('answ', 17)">Edit
</edit>
</td>
<td>
<span id="answUpdateSpan-17" onclick="updateQuestionCall('answ', 17)" style="display:none;">Update
</edit>
</td>
<td>
<span id="deleteSpan-17" onclick="deleteAnswerAjax(17)">Delete
</edit>
</td>
</tr>
</table>
</li>
<li id="13">
<span id="answEditText-13">yet another question
</span>
<table>
<tr>
<td>
<span id="answEditSpan-13" onclick="setEditField('answ', 13)">Edit
</edit>
</td>
<td>
<span id="answUpdateSpan-13" onclick="updateQuestionCall('answ', 13)" style="display:none;">Update
</edit>
</td>
<td>
<span id="deleteSpan-13" onclick="deleteAnswerAjax(13)">Delete
</edit>
</td>
</tr>
</table>
</li>
</ul>
</td>
</tr>
</table>
</li>
folling the suggestion in the above thread, ive modified his suggestion into this
$("ul.list").live("mousedown", function(e){
e.stopPropagation();
});
but it has zero effect. works perfectly in chrome and firefox, but screws up in IE. trust me im about to just put in a script where if they see the site in IE that it will forward them to firefox and tell them to download a real browser but my boss doesn't like that idea. you guys have any idea?
Make sure your html is valid: you are closing your <span> elements with </edit>
Your script applies to a ul element with a list class which you don't define anywhere in your html.
http://api.jquery.com/event.stopPropagation/
You'll notice on this page that live() handles an event after it's already propagated up to the top of the document, so you'll need to use bind() instead of live().
Related
I have a table set up in Amazon mturk with a single row which the user can fill in with the relevant details. However, sometimes the user will need to fill in two or three more rows of data. I want them to be able to click an "add new row" button and then a new row appears at the bottom of the table which is identical to the row above for them to fill in.
I tried looking at another task to see how they got the add row button to work but I can't figure out how they did it https://worker.mturk.com/projects/3PP5EK5QU1Q6PKONUENX4D1ESGSUNM/tasks?ref=w_pl_prvw
When I include their code of <input data-action ... it gives me an error saying the name is not defined
<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script
<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->
<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">
<div>
<strong>Instructions: </strong>
<span>XX</span>
<div>
<div>
<p>Link to the Website: URL </p>
<p>City: "${City}"</p>
</div>
<div>
<table>
<tr>
<th>Plan Name</th>
<th>Price</th>
<th>Internet Quota (GB)</th>
<th>Local Quota (GB)</th>
<th>Other Quota</th>
</tr>
<tr>
<td>
<form>
<crowd-input name="Plan" placeholder="e.g. InternetMAX 4.5GB" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Price (Rp)" placeholder="e.g. 42000" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Internet Quota GB" placeholder="e.g. 0.5" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Local Quota GB" placeholder="e.g. 2" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Other Quota GB" placeholder="e.g. 0.5" required></crowd-input>
</form>
</td>
<td>
<input data-action="more-items" type="button" value="Add Items">
</td>
</tr>
</table>
</div>
</div>
</div>
```
``
I am using geb spoke. For the below html structure I am not able to get the text from specified location:
Below is the html structure:
<div class="tab-pane ng-scope active" uib-tab-content-transclude="tab" ng-class="{active: tab.active}" ng-repeat="tab in tabs">
<div id="algemeen-tab-header" class="ng-tab-hdr ng-scope"></div>
<div id="algemeen-tab-body" class="ng-tab-bdy table-view ng-scope">
<table class="ng-tbl valign-top">
<tbody class="esuite-table-body">
<tr>
<td class="tp-label">
<label class="ng-binding">
Reference:
</label>
</td>
<td class="tp-field ng-binding">
I-5006-2015
</td>
<td class="tp-label ng-hide" ng-show="!zaak.anoniem"></td>
<td class="tp-field ng-binding ng-hide" ng-show="!zaak.anoniem"></td>
<td class="tp-label" ng-show="zaak.anoniem"></td>
<td class="tp-field ng-binding" ng-show="zaak.anoniem"></td>
<td class="tp-label"></td>
<td class="tp-field ng-binding"></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
I wanted to verify the text "I-5006-2015". I am not able to do it. Also, second scenario is that, I just wanted to assert that initial word is "I" from that location. How I can do that.
I have tried below variable to get the location but got failed:
referenceNumberText(wait:true){$("td", class: contains("tp-field ng-binding"))}
Please help me on this. Thanks!
Since you use html ids rather rarely, the selector for you text would be:
$("#algemeen-tab-body > table > tbody > tr:nth-child(1) > td:nth-child(2)").text()
Did you consider naming <td>'s? Example:
<td id="referenceNumber" class="tp-field ng-binding">
I-5006-2015
</td>
So your selector would be as easy as $("#referenceNumber").text()...
<td th:remove="all-but-first">
<span th:each="groups : ${userView.user.groupMemberships}">
<span th:text="${groups.group.name}"></span>;
</span>
</td>
I was trying to display the first two rows returned in th:each, so I tried displaying just the first row at first and it didn't work.
How do you display just the first row and also what should we do if we want to display just the first two or three rows in th:each?
The attribute th:remove is used for removing prototyping generated tags.
As an example:
<table th:remove="all-but-first">
<tr th:each="user : ${users}">
<td th:text="${user.name}">John Apricot</td>
</tr>
<tr>
<td>Martha Apple</td>
</tr>
<tr>
<td>Frederic Orange</td>
</tr>
</table>
This means that will remove the second and third tr, leaving only the tr used for iteration. More details here.
So if you only want to display the first element of your collection, there is no need to perform the iteration, you could simply access it by index (or even key if it's a map).
Example:
<td>
<span th:text="${userView.user.groupMemberships[0].group.name}"></span>
</td>
Displayed the first two elements of my collection and then gave a see more option to view the rest of the elements
<td>
<span th:each="groups,itrStatus : ${userView.user.groupMemberships}">
<span th:if="${itrStatus.count < 3}">
<span th:if="${itrStatus.count == 2}">,</span>
<span th:text="${groups.group.name}"></span>
</span>
<span th:if="${itrStatus.count == 3}">
, See more
</span>
</span>
</td>
I'm a newbie.
My problem is that i have a button and i want to set the value by a ASP.NET variable.
<input type="button" id="mybt" value="<%=Student.Name %>" />
This code is not working.
The code:
<%var Products = (IEnumerable<Demo.Models.Product>)ViewBag.Products;%></div>
<div>
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
<%foreach(var product in Products)
{ %>
<tr>
<td style="width:68px;height:20px">
<%=product.Id %>
</td>
<td style="width:120px">
<%=product.Name%>
</td>
<td style="width:120px">
<%=product.Price %>
</td>
<td style="width:120px">
<input type="button" value='<%=product.Id%>' />
<%} %>
</td>
</tr>
Instead of <%=Student.Name %> use this: #Student.Name
Provided that "Student" is the model name and "Name" is the property you want.
The reason for this is because <%= %> works for aspx but not the razor view engine which is probably what you have chosen for your MVC solution.
I'm trying to use jquery ui spinners in a table with jquery mobile 1.4.0
<div class="table_data">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Address</th>
<th>Doorbells</th>
<th>Mailboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$( ".spinner" ).spinner();
</script>
In the jsfiddle link below you can see my problem. The buttons don't show up in the correct place and they don't even work anymore.
http://jsfiddle.net/murtho/ZZqu6/5/
When I do not include the jquery ui js and css file the spinners work just fine. I need the mobile ui for other features in my application, but I also wish to implement the jquery spinner (of an alternative solution)
This is how it should be working:
http://jsfiddle.net/murtho/tf89L/2/
jQuery UI and jQuery mobile don't play together that well.
For your number spinner, you can fix the formatting with one extra line of code to remove the jQM classes from the spinner button divs:
$(document).on("pagebeforeshow", "#page1", function(){
$( ".spinner" ).spinner();
$(".ui-spinner div" ).removeClass(function() {
return $( this ).attr( "class" );
});
});
Here is your updated FIDDLE
Another option is to set type="number" on the input boxes; however, not all browsers understand this.
You will need to see if jQuery UI causes any other problems with your particular application...