I'm using this kind of button to redirect in my spring controller, and it works well:
<a class="btn btn-info" role="button" th:href="#{/grid/year/2017/month/12}">
<span th:text="#{grid}"></span>
</a>
I need to change the values of year and month based on values selected in a javascript function like this:
$('#year').on('change', function() {
var year = $(this).find('option:selected').val();
var selectedYear= $(this).val();
});
For example, if the year selected is 2016 I want to create a th:href="#{/grid/year/2016/month/12} so I can redirect to my controller with this values.
Is this possible, or there is another option? Thanks.
UPDATE 1:
If I add an id
<a class="btn btn-info" id="add" role="button" th:href="#{/grid/year/2017/month/12}">
<span th:text="#{grid}"></span>
</a>
and
alert($('#add').attr('role'));
I get value: button, but not with th:href, maybe ":" is the problem.....
You can change year in th:href attribute using jquery as follows:
$('#year').on('change', function() {
var year = $(this).find('option:selected').val();
var selectedYear= $(this).val();
var str = $('a').attr('th:href');
var arr = str.split('/');
arr[3] = selectedYear;
newVal = arr.join('/');
$('a').attr('th:href',newVal);
});
With the above code, href will be changed to "#{/grid/year/2016/month/12}"
Related
<script>
function setSortMethod(param) {
var sortMethod = "#sortMethod";
var asecending = false;
var currUrl = "";
var currSort = "";
var outputUrl = "";
currSort = "sortMethod=" + param;
if ($('#filterPending')[0].checked == false {
outputUrl = (currSort);
}
window.location.href = "?" + outputUrl;
}
</script>
<button type="button" class="btn btn-link" id="action" onclick="setSortMethod('StartDate')" value="LeaveDate">
Leave Date
</button>
So I am trying to get this link button working to toggle between ascending and descending sorting order.
../Index?sortMethod=StartDate which sort the display data by
ascending order
../Index?sortMethod=StartDate_desc will sort the display data by
descending order
I have tried using a boolean variable toggle true/false but to no avail.
Backend c# code I already have the ViewBag with ternary
ViewBag.StartDate = sortMethod == "StartDate" ? "StartDate_desc" : "StartDate";
With switch case it will work if you manually key in the url.
But because right now I am reworking on the link button I changed from actionlink to bootstrap's button link, so I have to find some ways to get the "StartDate" parameter for this onclick="setSortMethod('StartDate') passed into setSortMethod function and try to toggle between StartDate or StartDate_desc.
Trying out razor syntax with ViewBag,
#{
string sortMethod = ViewBag.StartDate;
}
but I am not sure what can I do with this.
Try this One.
<button type="button" class="btn btn-link" id="action" onclick="setSortMethod('StartDate')" value="LeaveDate">
Leave Date
</button>
<script>
function setSortMethod(param) {
var sortMethod = "";
var asecending = false;
var currUrl = "";
var currSort = "";
var outputUrl = "";
currSort = "sortMethod=" + param;
window.location.href += "?" + currSort
}
</script>
Okay, so I am using the dribbble API to GET my works from dribbble
I set up a few VAR's to help with the process;
var dribbble = 'crobertson97';
var limit = '10'; //items per page
var per_page = '&per_page='+limit+''; //url
var accessToken = '12345678910'; //client
var url = 'https://api.dribbble.com/v1/users/'+dribbble+'/shots/?access_token='+accessToken+'&callback=?'+per_page; //url
I want to add a view more button that if clicked will do three things;
the button <a id="readmore" class="btn btn-success white"> View More</a>
Change the text of the button from view more to view less
Change the var limit = 10 to 20
3.Be able to revert --> view less
Add an onclick function to the html:
<a id="readmore" class="btn btn-success white" onclick="buttonClick(this)"> View More</a>
And create the following function in the JS:
function buttonClick(but) {
if(limit==10) {
limit = 20;
but.innerHTML= "View less";
} else {
limit = 10;
but.innerHTML = "View more";
}
}
There's still the display of the content to manage, but you didn't give much information about what you want and how the data is given!
Pretty easy, using modern web API.
readmore.addEventListener('click', readmoreless);
var limit = 10;
function readmoreless(){
if(limit == 10){
readmore.innerHTML = "View Less";
limit = 20;
} else {
readmore.innerHTML = "View More";
limit = 10;
}
}
<a id="readmore" class="btn btn-success white">View More</a>
I have form which gets clone when user click on add more button .
This is how my html looks:
<div class="col-xs-12 duplicateable-content">
<div class="item-block">
<button class="btn btn-danger btn-float btn-remove">
<i class="ti-close"></i>
</button>
<input type="file" id="drop" class="dropify" data-default-file="https://cdn.example.com/front2/assets/img/logo-default.png" name="sch_logo">
</div>
<button class="btn btn-primary btn-duplicator">Add experience</button>
...
</div>
This my jquery part :
$(function(){
$(".btn-duplicator").on("click", function(a) {
a.preventDefault();
var b = $(this).parent().siblings(".duplicateable-content"),
c = $("<div>").append(b.clone(true, true)).html();
$(c).insertBefore(b);
var d = b.prev(".duplicateable-content");
d.fadeIn(600).removeClass("duplicateable-content")
})
});
Now I want every time user clicks on add more button the id and class of the input type file should be changed into an unique, some may be thinking why I'm doing this, it I because dropify plugin doesn't work after being cloned, but when I gave it unique id and class it started working, here is what I've tried :
function randomString(len, an){
an = an&&an.toLowerCase();
var str="", i=0, min=an=="a"?10:0, max=an=="n"?10:62;
for(;i++<len;){
var r = Math.random()*(max-min)+min <<0;
str += String.fromCharCode(r+=r>9?r<36?55:61:48);
}
return str;
} var ptr = randomString(10, "a");
var className = $('#drop').attr('class');
var cd = $("#drop").removeClass(className).addClass(ptr);
Now after this here is how I initiate the plugin $('.' + ptr).dropify().
But because id is still same I'm not able to produce clone more than one.
How can I change the id and class everytime user click on it? is there a better way?
Working Fiddle.
Problem :
You're cloning a div that contain already initialized dropify input and that what create the conflict when you're trying to clone it and reinitilize it after clone for the second time.
Solution: Create a model div for the dropify div you want to clone without adding dropify class to prevent $('.dropify').dropify() from initialize the input then add class dropify during the clone.
Model div code :
<div class='hidden'>
<div class="col-xs-12 duplicateable-content model">
<div class="item-block">
<button class="btn btn-danger btn-float btn-remove">
X
</button>
<input type="file" data-default-file="http://www.misterbilingue.com/assets/uploads/fileserver/Company%20Register/game_logo_default_fix.png" name="sch_logo">
</div>
<button class="btn btn-primary btn-duplicator">Add experience</button>
</div>
</div>
JS code :
$('.dropify').dropify();
$("body").on("click",".btn-duplicator", clone_model);
$("body").on("click",".btn-remove", remove);
//Functions
function clone_model() {
var b = $(this).parent(".duplicateable-content"),
c = $(".model").clone(true, true);
c.removeClass('model');
c.find('input').addClass('dropify');
$(b).before(c);
$('.dropify').dropify();
}
function remove() {
$(this).closest('.duplicateable-content').remove();
}
Hope this helps.
Try this:
$(function() {
$(document).on("click", ".btn-duplicator", function(a) {
a.preventDefault();
var b = $(this).parent(".duplicateable-content"),
c = b.clone(true, true);
c.find(".dropify").removeClass('dropify').addClass('cropify')
.attr('id', b.find('[type="file"]')[0].id + $(".btn-duplicator").index(this)) //<here
$(c).insertBefore(b);
var d = b.prev(".duplicateable-content");
d.fadeIn(600).removeClass("duplicateable-content")
})
});
Fiddle
This does what you specified with an example different from yours:
<div id="template"><span>...</span></div>
<script>
function appendrow () {
html = $('#template').html();
var $last = $('.copy').last();
var lastId;
if($last.length > 0) {
lastId = parseInt($('.copy').last().prop('id').substr(3));
} else {
lastId = -1;
}
$copy = $(html);
$copy.prop('id', 'row' + (lastId + 1));
$copy.addClass('copy');
if(lastId < 0)
$copy.insertAfter('#template');
else
$copy.insertAfter("#row" + lastId);
}
appendrow();
appendrow();
appendrow();
</script>
Try adding one class to all dropify inputs (e.g. 'dropify'). Then you can set each elements ID to a genereted value using this:
inputToAdd.attr('id', 'dropify-input-' + $('.dropify').length );
Each time you add another button, $('.dropify').length will increase by 1 so you and up having a unique ID for every button.
I have a button and when I click it, I want the html object (aka button) to be passed as a parameter to another javascript function. I want the javascript function to print the data-hi from the element in the button.
HTML BUTTON
<button type = "button" onclick = "whoIsRdns(this)" class="dns-information btn btn-xs btn-info pull-right" data-toggle="modal" data-target = "#whois_rdns_modal" data-path="{{ path( '_who_is_rdns', { 'peer': peer.number, 'ip': peer.mac } ) }}" data-hi = "hi2">
<i class="icon-search"></i>
</button>
JS FUNCTION(W/ JQUERY)
function whoIsRdns(thisButton){
//Enable jQuery properties from the param of the HTML object
var btn = $(thisButton);
var test = btn.data('hi');
console.log('Value is ' + test);
}
Why would test return as null?
Shouldn't var btn = $("thisButton"); be var btn = $(thisButton); (without quotes)
Just a typo
$("thisButton") !== $(thisButton);
drop the quotes so you are not looking for an element with a tag name thisButton
var btn = $("thisButton");
needs to be
var btn = $(thisButton);
I need to pull, break down into an integer, and store in jQuery the second from last element with the class ".admin-product".
The id will be something like "admin-42" and I need that stored as the number 42.
The stored variable is sent through my AJAX handler and will be manipulated and put to use from there.
Here's my current code:
$(document).on('click', '.create-btn', function() {
var data = {'id':$('.admin-product:last').attr('id'),
'username':$('#ausername').val(),
'email':$('#aemail').val(),
'password':$('#apassword').val()};
ShowCreateLoadingScreen("Creating...");
AjaxHandler('library/ajax/ajax.admin-account-create.php', data, 'POST', true);
});
Any ideas?
EDIT:
Preferrably in this format, ish:
$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
EDIT:
The following code stores the number as 2.
{'id':$('.admin-product:nth-child(-n+2)').attr('id').split("-")[1]
EDIT:
My mark-up is generated through a parser, the code it is here, basically rewrites the same line for as many times as there is still information in my database.
if($stmt->num_rows > 0) {
$stmt->bind_result($aId, $aUsername, $aPassword, $aEmail);
while($stmt->fetch()) {
$html .= file_get_contents(ROOT_LIB . 'html/admin-accounts/row-user.html');
$rowNumber = $aId;
$replace = array(
'userHere' => $aUsername,
'emailHere' => $aEmail,
'passHere' => ' ',
'IdHere' => $aId,
'buttonDisplay' =>
'<button type="button" data-id="'.$aId.'" name="edit" class="btn btn-info edit-product span6" title="Edit Account" value="Edit">Edit</button>
<button type="button" data-id="'.$aId.'" name="delete" class="btn delete-btn btn-danger span6" title="Delete Account" value="Delete">Delete</button>'
);
$parser = new Parser($replace);
$parser->ParseHtml($html);
}
It sounds like what you're interested in is the ID number of some DOM elements; in this case, the "ID number" is the suffix of the HTML ID of the element. So what I would do is construct a list of said ID numbers:
var idNums = $('.admin-product').toArray()
.map(function(domElt){
return Number(domElt.id.split('-')[1]);
});
Note that if there are any elements with class admin-product that don't have a properly formatted ID, it will result in an element with a value of NaN; you can use Array.prototype.filter to get rid of those if you wish.
Then its easy to get the penultimate (second-to-last) ID (with a safety in case there's only one element):
var penultimateIdNum = idNums.length>1 ? idNums[idNums.length-2] : null;
Demonstration: http://jsfiddle.net/3SvxB/
this is a very basic ancient way:
var elements = $('.admin-product');
var len= elements.length;
var element = elements[len-2];
var data= $(element).attr('id');
var id= data.split('-')[1];
You can simply do
var id = $('.admin-product:nth-last-child(2)').attr('id').split('-')[1];
update: fiddle
Give this a try:
var ele = $(".admin-product").length;
var id = $(".admin-product:eq(" + (ele - 3) + ")").attr('id').split('-')[1];
Let me know if it doesn't work.