Angular Bootstrap Calendar Delete/Edit events - javascript

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.

Related

Trying to programatically click a button on a web page with cefsharp

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(); })();");

use a variable in bootstrap 2.3.2 popover

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.

Click on div to focus on input

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

Modifying google analytics code event tracking with javascript one event per user with multiple scripts

I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks
If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.

Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs

Categories

Resources