Change displayed price based on a button click - javascript

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.

// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..

The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.

You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

Related

Get link of a button and assign to other in jQuery

I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});

Jade/pug change layout if radio buttons are selected

I am looking for a way, to swap the layout of my site between to options.
I got this form right now that I use:
form(action="/xxx" method="post")
.row
.col-lg-2.col-md-2.col-sm-4.col-xs-8
.input-group
select.form-control.text-center(name="selectOptionVat")
each taxRate in taxRates
option.text-center= taxRate
span.input-group-btn
button.btn.btn-success(type="submit") #{getText('Submit')}
The form is used to update everything in a table.
I want to add another form that gets visible once the user clicks one radio button in the table, and then also hides this form. So swap between the two of them :-)
I know I could do this in many ways, but if it is possible, I have various reasons that I really want to do it only through Jade/pug :-)
Also, if the user deselect all radio buttons again, the original form should be shown again, and the other one hidden once again - but I suppose I can implement this myself, in case anyone got any hints of how to solve this.
I solved the issue by using JavaScript (and jQuery) as suggested. The solution is not so short as I hoped, but here it is, in case it helps anyone else.
https://jsfiddle.net/ushdo9cu/
$('body').on('mouseup', 'input[type="radio"]', function () {
var radio = $(this);
uncheck_radio_before_click(radio); });

Minimize tables under text link (used jQuery and Javascript already)

I have tried jQuery and overflow hidden and toggle options but none of them will allow me to do what i wish to do with these tables.
here's a picture of what I want to do....
http://26.media.tumblr.com/tumblr_lmvixzfYyY1qzp8feo1_500.jpg
I want the tables I've created to span the whole browser, I presume its a bit like tabs except I don't want them to be visible until the user clicks on the text option; I hope there's a way - I've seen it done before - so that when the page loads only the text is visible and then when the user clicks on the text the picture and options drop down. The code I've tried only work for one link or the code conflicts and the tables aren't 100% across either.
Sorry, I'll tell you I'm fairly basic in my coding knowledge but any help is greatly appreciated!
culturecouture.cc
alternative to jquery-ui jquery-tools might be: http://flowplayer.org/tools/demos/tabs/index.html
you could use:
$("#mytabs .shouldBehidden").hide();
Or I hope this code will clarify the potential methods and provided by jQuery Tools!
// Place the filter in the appropriate position
$("#new-filter-tab").before(data.filter);
$("#new-filter-pane").before(data.content);
// Remove the existing Tabs instance
$("ul.filter-tabs").removeData("tabs");
// Recreate the Tabs
$("ul.filter-tabs").tabs("div.filter-panes > div");
var filters = $("ul.filter-tabs").tabs();
// And select the new filter
var filterCount = filters.getTabs().length;
filters.click(filterCount - 1);

Use checkbox to set val() for field

Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?
Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");
look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.
SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax

Categories

Resources