I have a form that uses jBox to provide additional info for some fields in tooltips. The text that is displayed depends on the value of the closest select-tag. jBox is executed on PageLoad (I create a single jBox which uses data-attributes to get title and content) and I then update the data-attributes in response to the change-event on the select-control.
Unfortunately that does not work, the tooltip stays with the initial value.
I have a cut-down repro with tooltip that illustrates the behaviour of not being updated (alertis used to show actual values of data-attributes after a change-event)
$(function() {
$("[data-jbox-content]").jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip",
getTitle: "data-jbox-title",
getContent: "data-jbox-content"
});
});
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<body>
<table>
<tbody>
<tr>
<th>Variable</th>
<th colspan="2">Type</th>
<th>Description</th>
</tr>
<tr>
<td><label for="dt1">Car</label></td>
<td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').data('jbox-title','blabla');$('#infoCar').data('jbox-content','dummy');alert($('#infoCar').data('jbox-title')+' / ' + $('#infoCar').data('jbox-content'))">
<option>Key</option>
<option selected="selected">Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option>Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
</tr>
<tr>
<td><label for="dt2">Age</label></td>
<td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').data('jbox-title','blabla');$('#infoAge').data('jbox-content','dummy');alert($('#infoAge').data('jbox-title')+' / ' + $('#infoAge').data('jbox-content'))">
<option>Key</option>
<option>Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option selected="selected">Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
</tr>
</tbody>
</table>
</body>
There is a common misunderstanding of how jQuery uses .data() and .attr() methods.
.data() adds some internal data to the element itself and will not set an attribute.
To set a data-xxx attribute you need to use .attr(). See more here: https://api.jquery.com/attr/
Also, check out updated snippet:
$(function() {
$("[data-jbox-content]").jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip",
getTitle: "data-jbox-title",
getContent: "data-jbox-content"
});
});
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox#v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<body>
<table>
<tbody>
<tr>
<th>Variable</th>
<th colspan="2">Type</th>
<th>Description</th>
</tr>
<tr>
<td><label for="dt1">Car</label></td>
<td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').attr('data-jbox-title','blabla');$('#infoCar').attr('data-jbox-content','dummy');">
<option>Key</option>
<option selected="selected">Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option>Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
</tr>
<tr>
<td><label for="dt2">Age</label></td>
<td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').attr('data-jbox-title','blabla');$('#infoAge').attr('data-jbox-content','dummy');">
<option>Key</option>
<option>Boolean</option>
<option>Ordinal</option>
<option>Nominal</option>
<option selected="selected">Interval</option>
<option>Ratio</option>
</select>
</td>
<td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
<i class="fas fa-info-circle"></i></span></td>
<td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
</tr>
</tbody>
</table>
</body>
Related
Hello guys I'm working on a project with Nodejs, Handlebars and Mysql and i want to ask something. I have 2 routes, /page1 and /page2. In /page1 im doing UPDATE and SELECT queries. One of table's column i want it to redirect to /page2 in a label without refresing, is it possible to do that?
Page 1 is 'home'
<script src="/socket.io/socket.io.js"></script>
{{#if removedUser}}
<div class="alert alert-success alert-dismissible fade show" role="alert">
User has been removed.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{/if}}
<div class="row">
<div class="col-6">
<h1>Users</h1>
</div>
<div class="col-6 d-flex justify-content-end">
+ add user
</div>
</div>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
<th scope="col">Credits</th>
<th scope="col" class="text-end">Action</th>
</tr>
</thead>
<tbody>
{{#each rows}}
<tr>
<th scope="row">{{this.id}}</th>
<td>{{this.first_name}}</td>
<td>{{this.last_name}}</td>
<td>{{this.email}}</td>
<td>{{this.credits}}</td>
<td class="text-end" id="text-end">
<div class="input-group input-group-sm mb-3 credits_container">
<form action="/credits/{{this.id}}" method="post" id="form_container">
<input type="number" class="form-control" placeholder="Credits" name="input_credits" id="input_credits"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
<div class="col-12 d-grid">
<button class="bi bi-plus" id="post_credits" type="submit">Add</button>
</div>
</form>
</div>
{{!-- <i class="bi bi-plus"></i> Add --}}
<i class="bi bi-eye"></i> View
<a href="/edituser/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-pencil"></i>
Edit</a>
{{!-- <a href="/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-person-x"></i>
Delete</a> --}}
</td>
</tr>
{{/each}}
Label {{this.credits}}
</tbody>
</table>
Page 2 is 'label'
{{#each rows}}
<div class="row">
<label class="label label-default" id="set_input" name="set_input"> {{this.credits}}</label>
</div>
{{/each}}
I'm a beginner in Laravel 7. I am trying to create a checkout form when purchasing items. The problem is whenever I try to delete the first item the 'The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST.' shows up. However, I am able to delete the following items under it that I put into the checkout form.
This is my CheckoutController
public function destroy($id)
{
Temp_order::where('id',$id)->delete();
return redirect('checkout')->with('success','Product deleted successfully');
}
And this is the code for the table
<tbody>
#forelse ($order as $item)
<tr>
<td id="item_code">{{ $item->item_code }}</td>
<td class="cart_product_img" id="image">
<img src="" alt="Unavailable" style="width: 70px; height:70px"></img>
</td>
<td id="item_name">
{{ $item->item_name }}
</td>
<td id="price">
₱ {{ number_format($item->price, 2) }}
</td>
<td class="qty" id="qty">
<div class="qty-btn d-flex">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="300" name="quantity" value="{{ $item->quantity }}">
</div>
</div>
</td>
<td id="subtotal">
₱ {{ number_format($item->subtotal, 2) }}
</td>
<td>
<form action="{{ route('checkout.destroy', $item->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Remove</button>
</form>
</td>
</tr>
#empty
<tr>
<td>
<p> NO ITEMS IN CART </p>
</td>
</tr>
#endforelse
</tbody>
And this is my route
Route::get('/', function () {
return view('auth.login');
});
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
Route::resource('ordering', 'OrderingController')->middleware('auth');
Route::resource('inventory', 'InventoryController')->middleware('auth');
Route::resource('checkout', 'CheckoutController')->middleware('auth');
Can you help me masters?
Try to update CheckoutController
public function destroy(Temp_order $item)
{
$item->delete();
return redirect('checkout')->with('success','Product deleted successfully');
}
i have retrieved a list of abjects from firebase onto my ejs file: and i am retrieving them in this manner:
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
I am however trying to implement an Onclick for so that when an item is clicked on it carries its info to the next page: I have tried to store it in aninput field like:
**<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">**
But i just cant get the individual item it pulls the whole array when i check for the value.Any help
Here is the sample data
Then i use jquery to submit:
$(document).ready(function () {
$("#event").click(function(){
var en = $("#evname").val();
$("#categ").val(en);
$("#eventform").submit();
});
});
Here is the rendered htmlsource and images /:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<%Object.keys(notes).forEach(function(key,idx){%>
<tr>
<td id="tid" name="tid" class="tid" ><%= idx %></td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
<input type="hidden" id="idd" name="idd" class="idd" value="<%= idx %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td id="elocation" name="elocation"><%=notes[key].location %></td>
<td id="ecodes" name="ecodes"><%=notes[key].code %></td>
<td id="edate" name="edate"><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Here is the rendered html from the browser:
<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
<tr>
<td id="tid" name="tid" class="tid">0</td>
<form name="eventForm-0" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-0" name="categ" class="categ" value="zuri.png">
<input type="hidden" id="idd" name="idd" class="idd" value="0">
<td id="evname-0" name="evname-0">zuri.png</td>
<td id="elocation" name="elocation">zuri.png</td>
<td id="ecodes" name="ecodes"></td>
<td id="edate" name="edate">-LZfAvzWGudUK78TGtT_</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">1</td>
<form name="eventForm-1" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-1" name="categ" class="categ" value="Africa Tourism Technology and Innovation Awards">
<input type="hidden" id="idd" name="idd" class="idd" value="1">
<td id="evname-1" name="evname-1">Africa Tourism Technology and Innovation Awards</td>
<td id="elocation" name="elocation">USIU – Africa</td>
<td id="ecodes" name="ecodes">AA24VI</td>
<td id="edate" name="edate">25th – 26th April, 2019</td>
</tr>
<tr>
<td id="tid" name="tid" class="tid">2</td>
<form name="eventForm-2" class="eventForm" method="post" action="/dasha"></form>
<input type="hidden" id="categ-2" name="categ" class="categ" value="2nd Annual Global M I C E Summit">
<input type="hidden" id="idd" name="idd" class="idd" value="2">
<td id="evname-2" name="evname-2">2nd Annual Global M I C E Summit</td>
<td id="elocation" name="elocation">Trademark Hotel</td>
<td id="ecodes" name="ecodes">RT79XV</td>
<td id="edate" name="edate">11th – 13th September, 2019</td>
</tr>
</tbody>
You have a number of issues with your code, and despite trying to highlight them in comments there isn't enough space, hence this 'incomplete' answer
For starters you are opening a form tag before your forEach loop. You then close it during the first loop. So on your subsequent iterations there isn't a form to find.
Secondly, you have reused the same ID during the loop, which you should not do as it will generate multiple items with the same ID if you have multiple Objects you're looping through. If you have 2 elements with an ID of 'foo', using multiple of the same ID will lead to unintended consequences , each ID should be unique.
Thirdly you don't have a <table> tag around your tbody, some browsers therefore strip the tbody so you're click event will never fire. Also your rows are within a <tr> element so you should attach your click handler to this.
<form id="eventform" method="post" action="/dasha">
<%Object.keys(notes).forEach(function(key){%>
<tbody id="event" name="event">
<tr>
<td>1</td>
<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">
<td id="evname" name="evname"><%=notes[key].event %></td>
</form> // YOU'RE CLOSING YOUR FORM HERE INSIDE THE LOOP ITERATION
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
Now this isn't tested, and as I don't know the complete layout of your page it's a bit of a stab in the dark, but you could try something like the following and see if you have any luck
<%Object.keys(notes).forEach(function(key,idx){%>
<table>
<tbody id="event-<%= idx =>" name="event" class="eventName">
<tr class="row">
<td>1</td>
<form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
<input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
</form>
<td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td>
<td><%=notes[key].location %></td>
<td><%=notes[key].codes %></td>
<td><%=notes[key].date %></td>
</tr>
<% }) %>
</tbody>
</table>
And a click handler similar to
$(document).ready(function () {
$(".row").click(function(ev){
let form = ev.currentTarget.querySelector('form');
form.submit()
});
A simpler version using vanilla JS can be found here https://jsfiddle.net/xvag0mj2/
I am having a table which contains multiple td/tr.
My problem is label which i want to get doesn't contains input immediately neither that label has any attributes property.
I want to get "Countries of Permanent Residence" and Dates which are in span but doesn't have any properties that span is in div that too doesn't contains any property.
I tried with
formElement[input[name="icims_gh_Permanent_Country_Residence"]]
But don't know how to get associate label.
Html looks like:
<div style="margin:0px">
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Countries of Permanent Residence (list all) </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Dates </span>
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style="margin:0px">
<div>
<input type="hidden" name="icims_gh_Permanent_Country_Residence" value="1">
<a name="0.1_icims_ga_Permanent_Country_Residence"></a>
<div>
<table style="width:100%;border:0px">
<tbody>
<tr>
<td>
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountry"> </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountryDates"> </span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Given the HTML snippet below how can I, using page-object field accessors, get the second input field, the one with id="333:".
I can't use the id to identify the field as it's auto-generated.
Using page-object accessors I can get the embedded table and the correct cell but the cell object is a PageObject::Elements::TableCell which doesn't seem to have any methods that allow access to the embedded span and input field.
I can get the input field using native Watir accessors - i.e., browser.div( ... etc ...) but would prefer to use just page-object accessors if possible.
If not possible then I'll live with native Watir. Thanks
<div class="modalContent">
<table role="presentation" id="324:_layoutTbl" class="axial">
<tbody>
<tr>
<td>
<input id="326:" name="" value="" onchange="juic.fire("326:","_change",event);" onfocus="juic.fire("326:","_focus",event);" onblur="juic.fire("326:","_blur",event);" type="text">
</td>
</tr>
<tr>
<td class="sfTH">
<label for="332:">Users:</label>
</td>
<td>
<table class="noborder" role="presentation">
<tbody>
<tr>
<th>
<label id="336:" class="rcmFormLabel">Hiring Manager</label>
<label id="337:" for="333:" class="rcmFormLabe">Users, Hiring Manager</label>
</th>
<td><span class="autocompspan ">
<input class="autocompinput" id="333:" name="333:" onfocus="juic.fire("333:","_focus",event);" size="20" value="Bill Murray" role="combobox" type="text">
<input value="111111" id="333:_hidden" name="333:_hidden" type="hidden">
</span>
<div id="335:" style="display:none"><img alt="" class="globalFloatLeft">
<div id="335:_error" style="color:#ff0000">undefined is required</div>
<div style="clear:both;"></div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
After more experimenting I found the answer to my question. I declared the table accessor, e.g., div(:my_table, :class => 'modalContent').table.table then in the code, to get the input field in the first row I did my_text_field = my_table_element[0].text_field_element which returned the PageObject::TextField object in column 2 of row 1