I made a form that links a button with from an attribute but it's not hiding the parent("form")
but when I try this it works
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
alert();
});
I don't know whats the problem with this code
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).parent("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
Pls Help me Thanks
.parent() only selects the direct parent (one level up). .parents() will select all the way up the ancestor chain.
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).parents("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
You can also use .closest() which will only select the nearest parent that matches instead of all parents.
$($("[editFormContent]").attr("editFormContent")).click(function(e) {
e.preventDefault();
$(this).closest("form").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main container">
<div class="breadcrumb col-100">
<h2>UserProfile #<?=$_SESSION['Dname']?></h2>
<small><i class="fal fa-home"></i> Home \ Settings \ Account</small>
</div>
<div class="card col-100 ">
<form method="post" editFormContent="#edit">
<table class="col-100">
<tr>
<th width="50%"></th>
<th width="50%"></th>
</tr>
<tr>
<label>
<td>First Name</td>
<td>
<span class="editFormSpan">Fname Lname</span>
</td>
</label>
</tr>
<tr>
<td colspan="2">Edit</td>
</tr>
</table>
</form>
</div>
</div>
You just need to add an id to your form and grab it with jquery, then calling .hide()
form id="myForm" ....
Add this script tag at the end of the body.
<script>
$(document).ready(function () {
$('#edit').click(function(e){
e.preventDefault();
$('#myForm').hide();
});
});
</script>
I think when we are using jquery, there is no need to make our life hard with complicated selectors.
Related
The checkbox created in MS Sharepoint form has this html structure;
<div class="fd_field " fd_name="purchase_order" style="">
<div class="fd_title" style="width: 150px;">purchase_order</div>
<div class="ms-formbody fd_control" fd_type="MultiChoice">
<span dir="none">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Carica dati">
<input id="ctl00_ctl40_g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860_purchase_orderField_ctl00_ctl00" type="checkbox" name="ctl00$ctl40$g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860$purchase_orderField$ctl00$ctl00">
<label for="ctl00_ctl40_g_2bbe8d3f_1b61_4103_9ca6_2e943eb28860_purchase_orderField_ctl00_ctl00">Carica dati</label></span>
</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
with ajax i got other data that i want to add as option in that checkbox.
The loop to retrieve data is not a problem but, how can i append those data in a new row of the checkbox?
In the past i was able to edit dropdown field but it not works with checkbox.
I was thinking to the a solution like this:
var f = '<tr><td><input type="checkbox" name="xxx" id="ss"><label for="ss">Other</label></td></tr>';
$( ".ms-RadioText" ).parent().append(f);
Thanks
You mean this?
PS: I would not expect a table in a span !
var f = '<tr><td><span class="ms-RadioText" title="XXX"><input id="ss" type="checkbox" name="xx"><label for="ss">Other</label></span></td>';
$(".ms-RadioText").closest("tbody").append(f);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fd_field " fd_name="purchase_order" style="">
<div class="fd_title" style="width: 150px;">purchase_order</div>
<div class="ms-formbody fd_control" fd_type="MultiChoice">
<span dir="none">
<table cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td><span class="ms-RadioText" title="Carica dati"><input id="xx" type="checkbox" name="xx"><label for="xx">Carica dati</label></span></td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
Brief:
In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too. How i can do that and provide an example will be much of help too ?
Screenshot of current page:
https://ibb.co/51SRgKw
Current page structure:
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none.
or use jquery mobile.
$(function(){
let switch_page = function(p_id){
$('.manage-at__scroll').hide(200)
$(`#${p_id}`).show(200);
}
$('a.list-class').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
$('a.list-st').on('click', function(e){
e.preventDefault();
switch_page('tab3');
});
$('#b1').on('click', function(e){
e.preventDefault();
switch_page('tab1');
});
$('#b2').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2">
<p>
<a class="btn btn-default" href="#" id="b1"> back </a>
</p>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3">
<p>
<a class="btn btn-default" href="#" id="b2"> back </a>
</p>
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
I want to when I click the button it will add what I wrote in the field with the prefix say and send it through POST, the POST is working fine because if I don't use the script it will send it but without the "prefix"
<script>
function say() {
document.actionsv.command.value = ("say " + "\"" + document.COMMOM.SAY.value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
I've tried everything but can't get it to work..
This is the error in console: http://prntscr.com/oq4084
There more than one error with your code. I've made a fiddle for you.
<script>
function say()
{
console.log("say " + "\"" + document.actionsv.elements['SAY'].value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
You are poiting the result ta element that doesn't exist (document.actionsv.command) and you were using the forms array wrong. I don't know what you were trying to do with document.actionsv.command so i made e console.log with the result.
I am using a expendable table for that the code is below
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Here I am using ng-repeat-start directive for expandable table.
but pagination showing this alert:
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
and an error:
pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.
Help me I need pagination in expandable table.
You have 2 errors, i think.
dirPaginate require use dir-paginate instead of ng-repeat.
You need use pagination control directive.
To solve you problem do next:
Change ng-repeat on dir-paginate in ng-repeat="position in listPositiondtls | itemsPerPage:10"
Add in html <dir-pagination-controls></dir-pagination-controls>
Modified html
<dir-pagination-controls></dir-pagination-controls>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
I want to select the apply button in the following code. There are two buttons and only one button is visible.
//input[#value='Apply' and #id='btn' and #name='btn' and not(ancestor::td[contains(#style,'display:none')])]
I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)
<table class="ColumnTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style=" display:none;">
<div id="dashboard~Contents" style="">
<table style="width:100%">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="dashboard~Contents" style="">
<table class="SectionTD" style="width:100%; border-top:none;">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?
You could try the following in case this is a Selenium issue:
//input[#value='Apply'][#id='btn'][#name='btn']
[not(ancestor::td[contains(#style,'display:none')])]
It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.
Another issue I just want to mention is that you shoudn't use the same id for multiple elements, ids should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.
Selecting an element using xpath:
Selecting the first element:
//div[#id='dashboard~120']descendant::input[#id='btn'].Click;
Selecting the second element:
//div[#id='dashboard~121']descendant::input[#id='btn'].Click;