Is there a jQuery plugin that will allow to sort a list of items (<li>...</li>) according to their meta data stored as a hidden element? For instance every list item has two hidden inputs: author and year. I want sort the list using those hidden elements. I wonder if there is a ready to use plugin for jQuery. So far, I have not found such plugin. The only I have found are for table sorting.
<ul>
<li>Position 1
<input type="hidden" name="author" value="Peter"/>
<input type="hidden" name="year" value="2004"/>
</li>
<li>Position 2
<input type="hidden" name="author" value="John"/>
<input type="hidden" name="year" value="2005"/>
</li>
<li>Position 3
<input type="hidden" name="author" value="Tony"/>
<input type="hidden" name="year" value="2006"/>
</li>
</ul>
Here you go:
<ul>
<li>Position 1
<input type="hidden" name="author" value="Peter"/>
<input type="hidden" name="year" value="2004"/>
</li>
<li>Position 2
<input type="hidden" name="author" value="John"/>
<input type="hidden" name="year" value="2005"/>
</li>
<li>Position 3
<input type="hidden" name="author" value="Tony"/>
<input type="hidden" name="year" value="2006"/>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
jQuery.fn.sort = function() {
return this.pushStack( [].sort.apply( this, arguments ), []);
};
function mySorter(a,b){
return $(a).find("[name=author]").val() > $(b).find("[name=author]").val() ? 1 : -1;
};
$(document).ready(function(){
$('ul li').sort(mySorter).appendTo('ul');
})
</script>
I adapted it from: http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/
Edit:fixed error with val() and 'ul'
Related
I'm creating an Object in GET method and initialize it with nulls. Then I set some values and send it to the POST method, but after this process all of values that I set earlier are nulls. How could I repair it? I've tried to use hidden fields, but it didn't help.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="#{/styles.css}" />
</head>
<body>
<form method="POST" th:action="#{sendorder}" th:object="${details}">
<label for="name">Name: </label>
<input type="text" th:field="*{name}"/>
<br/>
<input type="hidden" th:field="*{order}" id="order"><label for="surname">Surname: </label>
<input type="text" th:field="*{surname}"/>
<br/><label for="room">Room: </label>
<input type="text" th:field="*{room}"/>
<br/>
<br/>
<h2>Please, choose your company:</h2>
<select th:field="*{company}">
<option th:each="i : ${companies}" th:value="${i.id}" th:text="${i.name}">
</option>
</select>
</div>
</div>
<input type="submit" value="Submit Order"/>
</form>
</body>
</html>
I am new to Vue.js. I am trying to make a form dynamic (only a certain part of the form dynamic.). A user can have multiple guarantors. So I made the Guarantor form Dynamic with VueJS. When I submit the form and return the request, I see only the last array. Its always the last array, all others are lost.
This is the blade file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ asset('css/app.css')}}">
<title>Laravel</title>
</head>
<body>
<div id="app">
<div class="container pt-5">
<form action="{{ route('submit.store')}}" method="post">
#csrf
<div class="card-body">
<h4 class="card-title">User Detail</h4>
<input type="text" class="form-control mb-1" name="user_name" id="user_name" placeholder="Name" />
<input type="email" class="form-control mb-1" name="user_email" id="user_email"
placeholder="Email" />
<textarea name="about" class="form-control" id="about" cols="30" rows="10"
placeholder="About"></textarea>
</div>
<dynamic-form></dynamic-form>
</form>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
And this is how the VueComponent looks.
<template>
<div>
<button class="btn btn-success mb-3" #click.prevent="addNewUser">Add User</button>
<div class="card mb-3" v-for="(user, index) in users" :key="index">
<div class="card-body">
<span class="float-right" style="cursor:pointer" #click.prevent="removeForm(index)" >X</span>
<h4 class="card-title">Guarantor No: {{ index }}</h4>
<input type="text" class="form-control mb-1" name="name" id="name" placeholder="Name" v-model="user.name" />
<input type="email" class="form-control mb-1" name="email" id="email" placeholder="Email" v-model="user.email"/>
<textarea name="about" class="form-control" id="about" cols="30" rows="10" placeholder="About" v-model="user.about"></textarea>
</div>
</div>
<input type="submit" class="btn btn-primary" value="submit">
</div>
</template>
<script>
export default {
name: 'dynamic-form',
data() {
return{
users: [
{
name: '',
email: '',
about: ''
}
]
}
},
methods: {
addNewUser: function() {
this.users.push({
name: '',
email: '',
about: ''
});
},
removeForm: function(index) {
this.users.splice(index, 1);
}
}
}
</script>
How can I tackle this problem?
In PHP, values with the same name attribute value will get overwritten. (See the "How do I get all the results from a select multiple HTML tag?" section here).
You can create arrays of values by adding a bracket to the name. For example, if you made the name of the "name" input name[], name will be an array of names in PHP.
In your case, you could use this format: name="guarantors[][name]". That way you will get an array in PHP under the key guarantors (e.g. $request->guarantors) and each of the values in guarantors will be an array with the values name, email, etc.
I need to write xpath for 'New' button.
have tried:-
By.xpath("//form[#action='/intruvert/action/CustomRolesAction']/div/div[3]/div/a[1]")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#style='background-color: rgb(242, 242, 242);' and #title='New']")
By.xpath("//form[#name='CustomRolesForm']/div/div[3]/div/a[#title='New']")
but not able to click on New button.
I am not sure here if i missing anything.
kindly suggest.
here is the code:-
<html>
<head>
<body>
<div class="bodywrap">
<form action="/intruvert/action/CustomRolesAction" method="post" name="CustomRolesForm">
<input type="hidden" value="CustomRolesDetails_t" name="userAction"/>
<input type="hidden" value="fullaccess" name="accessRight"/>
<input type="hidden" value="" name="uuid"/>
<input type="hidden" value="true" name="fromTab"/>
<input type="hidden" value="" name="selectedDomain"/>
<input type="hidden" value="/My Company:0/Manager:0" name="resourceName"/>
<input type="hidden" value="MANAGER" name="topMenuName"/>
<input type="hidden" value="Users and Roles" name="secondMenuName"/>
<input type="hidden" value="Roles" name="thirdMenuName"/>
<input type="hidden" value="/My Company:0" name="domainName"/>
<input type="hidden" value="/My Company:0" name="currentDomainName"/>
<input type="hidden" value="/Manager:0" name="shortResourceName"/>
<input type="hidden" value="false" name="ucaplModeEnabled"/>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<div class="gensecholder clearfix">
<div class="gensecheader clearfix">
<div class="gensecbody pad10all clearfix">
<div class="gensecfooter clearfix">
<div class="gensecfootright">
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
</div>
#Pranay after viewing your code, i got javascript error. inside your html you have not defined anywhere to javascript. see the image
Your html
<a class="genericbtn" title="New" href="javascript:doSubmit('add')">New</a>
Modified html
<a class="genericbtn" title="New" href="#">New</a>
Now use xpath method using javascript executor.
WebElement new_button = driver.findElement(By.xpath("//a[contains(text(), 'New')]"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();", new_button);
OR
driver.findElement(By.xpath("//a[contains(text(), 'New')]")).click();
You can try to locate the button directly without ancestors
// by class name
By.className("genericbtn")
// by title
By.cssSelector("[title='New']")
// by partial href
By.cssSelector("[href*='add']")
//a[.="New"]
Just use text find a tag.
. means current context node(a).
You can just use either title or text property to find out the required link:
By.xpath("//a[#title='New']");
Or
By.linkText("New");
Or
By.xpath("//a[text()='New']");
i used this code to get the value of item that i checked however. its not working on my project. i just want every value that i checked it will go to my text box with comma separator
like 288,289,290. thanks in advance
<input type="text" name="holder" id="holder"
<input type="checkbox" name="example[]" value="288" checked/>
<input type="checkbox" name="example[]" value="289" checked/>
<input type="checkbox" name="example[]" value="290" />
<input type="checkbox" name="example1[]" value="289" checked/>
var output = jQuery.map($(':checkbox[name="example[]"]:checked'), function (n, i) {
return n.value;
}).join(',');
alert(output);
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="inputs">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Orange">
<input type="checkbox" value="Pineapple">
<input type="checkbox" value="Mango">
</div>
<input type="text" id="target"/>
</body>
</html>
var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#target').val(arr + '');
});
I have more than form in the same file like
<form name="myForm">
<input type="hidden" value="1" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="2" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="3" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="4" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
but when I click on any link it always take the first ID which is 1??
An ID needs to be unique to the page, as it is a key for that element.
Why not change id="lastphp" to class="lastphp" and pass the form to the function?
<form name="myForm">
<input type="hidden" value="1" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
<input type="hidden" value="2" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
<input type="hidden" value="3" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
<input type="hidden" value="4" class="lastphp">
<a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
And haddle it like this
function ajaxFunction(form) {
var lastphp = form.getElementsByClassName("lastphp")[0].value;
alert(lastphp);
}
This can be alot easier with a framework, like jQuery.