With the below code I expect to see a popover with the name of the product as title.
$('.btn-blue').click(function(){
var btnName = $(this).parents('.individual-content').children('.name').html();
//alert(btnName);
$(this).popover({title: btnName,content: "<p>Added to cart!</p>", html: true, placement: "bottom"});
});
When I uncomment the alert it shows the title in the alert so the variable is correct.
But the popover still gets triggered with the default title. And not with btnName.
I made a fiddle that has everything in it for quick reference.
https://jsfiddle.net/gr19fmcu/
2 questions
Why is it still displaying the default title and not the variable content?
Why do I need to double click to see the popover at all?
I did not get it to work with the above code. The code seems to me to be correct and I got no clue why it ain't working. Anyhow I needed it for a Joomla website and resorted back in using the System Messages from Joomla itself.
I triggered it with this code:
$('.btn-blue').click(function(){
var btnName = $(this).parents('.individual-content').children('.name').html();
Joomla.renderMessages({"success":[btnName + " is being added to your cart!"]});
});
The result is even better then I expected. Anyhow, I leave the question open as I still hope someone to shed some light over why the original code is not working.
Related
I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");
I'm working on a small coding game project where the user has to search the page by hovering for clues in order to advance to the following level.
For this specific example, the clue is 1+1 (can be found by hovering around the bottom 2/3 of the page) and the answer is to type number '2' (keycode 50).
When the page loads I autofocus the input field where the script is looking for '2' to be pressed, but my issue is if the user clicks on any of the letters inside "#search" or "#math" it removes the focus from the input.
If the user clicks anything inside either "#search" or "#math", I need the focus to still be thrown to the "text" input. I've looked on stackoverflow for the solution and found this article (Click on <div> to focus <input>), but I can't seem to make it work with my code. I'm assuming it's some stupid simple incorrect syntax, but I need some fresh eyes to look over it because I've got nothing!
Here is a JSFiddle: http://jsfiddle.net/ncx54y3r/2/
Here is the JS I'm using to attempt to accomplish this:
$('#search').click(function() {
$('text').focus();
});
$('#math').click(function() {
$('text').focus();
});
All other code can be seen in the JSFiddle. To check if the script works correctly, just click on any of the letters and type "2". If it redirects to an error page, that means it worked correctly!
Thanks guys! I appreciate it.
You are not including the class indicator "." in the jquery
$('text').focus();
should be
$('.text').focus();
Any errors on the console? Is that all the code ? Its not working for me because Jquery is not loaded.
ReferenceError: $ is not defined
a couple of days I'm working on to integrate the calendar in my project. I am actually reusing one of the examples given by the developer. The question is:
even if you visit the Demo you'll notice that when you open the dropdown menu with events for a certain day on each line next to an event there are a delete and edit bootstrap glyphs. When you click on any of them an alert pops up telling you that the event's been deleted but physically the event remains there after that. What I am trying to do is to make this glyphs onClick to literally delete an even from the drop-down just like the red Delete in the bottom right corner does by the way. I guess it's a matter of 1-2 at most lines of code but I can't still make it work.
<button
class="btn btn-danger"
ng-click="vm.events.splice($index, 1)">
Delete
</button>
This works, this is the 'bottom right button'. ^
onClick: function(args) {
alert.show('Deleted', args.calendarEvent);
console.log("event Deleted");
vm.events.splice($index, 1);
}
This doesn't.
Thank you in advance.
vm.events.splice(vm.events.indexOf(event), 1);
This is actually the line of code which fixes it, I figured it out. The problem was that $index is not defined anywhere so if you use it in the form I did at the first post then you'll receive exceptions. If you use the line I'm just giving you now you'll fix this deliberate, I guess, incompleteness of the example code.
I have a webpage where the user inputs a number into a textbox and then that number of rows are created in a table with textboxes in each row with the id in the format of "id[I]" where I is the number assigned from the for loop used to add the textboxes. On form submit I'm trying to get the value of these textboxes. This is my form submit code to test things out.
$("#biopsyform").submit(function () {
var site = $("#site[1]").attr("value");
alert(site);
});
when I submit the form I get an alert of undefined
I've tried saying var site = $("#site[1]#).val(); and get the same result.
When using chrome developer tools in the javascript debugger when I break before the alert, it shows the correct value for $("#site[1]") so I'm not quite sure what is going on.
Any help is greatly appreciated.
Here is a jsfiddle I'm getting an error in jsfiddle when I submit and I'm not sure why, I've never used jsfiddle. It could be part of my problem, it could be when I copied stuff over to jsfiddle, I don't know.
Try escaping [ and ] with \\
var site = $("#site\\[1\\]").attr("value");
or
var site = $("#site\\[1\\]").val();
FIDDLE DEMO
You were missing a $ sign.
You need to use the parent of the $("#site[1]").attr("value");
Example:
$("#parent").find("#site[1]").val();
Or any variations of that.
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