Yearly Calendar - pop up when click on day - javascript

Some of you must recognize me from other posts I posted yesterday regarding issues I was having writing a calendar from scratch. Well, I have desisted, I think it is too difficult for my level as even with lots of resources I couldn't understand what was going on. So I've decided to grab a calendar already done, and add the functionality I need for my project.
It needs to be an event calendar, where the user clicks in a day ( from a table) and it opens that day and allows the user to write stuff, and when it click save, it will change the background color of that cell day.
Can anyone give me a hint about how to do it? Not the solution, but a guide to start! At the moment the only way I think is adding onclick function, but I don't think it's the best as I would need to add this function in every single !!
Maybe I am completely wrong and it is not even possible... any clue will be appreciate it!
Thank you!

This all depends if you save call is using ajax, or a form post.
If its ajax you could have an id and class attribute for each calendar entry eg.
<div id="2015-october-14" class="clickable" />
Then you search in your javascript code using jquery for clickable class:
$("#clickable").onclick(function() {
//here you find the element id defined above
//and pass that id into the popup/modal thing you want
});
This means you only define onclick event once. If the content is dynamic you could start the search at the document: $(document).on("click", "#clickable", function() {});
For instance a modal could then show once clicked on a calendar entry and you can write and submit it. You then add a function to call ajax with the message and the html element id added in the example above.
In the $.ajax function onComplete you can then search for the id of the html element eg "2015-october-11" and do whatever you need to do with it.
If its a form post then you will have to just update it from server side to include the entries.
I hope this helps.

Related

How to track when a Radio button is clicked in Google Tag Manager without clicking the submit button/moving on from the page?

I've a pretty simple question but its been bothering me for a few days now. I want to track when someone clicks a radio button as a trigger or click, essentially to track the click and pull the data I need even if they haven't clicked submit or moved off the page. I just want to be able to do it when its clicked on the page but I can't seem to get my head around it in Google Tag Manager.
I ended up coming up with this so far but its pulling all clicks.
My solution was to create a custom variable that isolates the radio button by its class using Query Selector, then create a tag that fires on all clicks. The issue is that this is bringing back way more data than I need. It is bringing back random clicks on the page.
I tried to set it up in google tag manager as Some clicks, then set it to My Radio Variable - Equals - True but this didn't bring back anything at all.
My Radio Variable:
function () {
return document.querySelector('[class="radios__input"]:checked').id
}
I'm still new to this so any help would be greatly appreciated, thanks in advance.
This might require not only the variable.
Now you can get the id from the radio element which is great.
But you said it is returning a lot of other element you don't need so looks like it is lack of the trigger setting.
Trigger should be the important one in this scenario.
You can narrow down the range to only the radio element you want to track.
Like configure the trigger to
Click Element , match css selector , {Your special css selector to the radio button}
If you are not familiar about the above I mentioned. You can attach some screenshots about what is your trigger and variable and how you use it in your GTM.

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Display Image on mouse-on hover

I am having this application where I need to have something like, when we bring the mouse over an employee's name, which is an actionlink , it is suppose to show the employee's image.
I am trying to do so using MVC, but am till far unable to do so.
Please can anyone help me out in this..
Thanks in advance for help.
This is a JavaScript thing, not an ASP.NET MVC thing. You'll take one of two approaches:
Put the image on page at load, but give it a class or otherwise style it to be hidden initially. Then you'll just need to add an JS event handler for the mouseover event of your links that will cause the image to display.
Again, you'll use a JS event handler tied to the mouseover event of your links, but you send an AJAX request for the image URL and then dynamically insert the image into the page based on the response. This is kind of overkill for something this simple though.
#1 is really the best way to go for this use case, and there's probably around 10 million articles, blog posts, tutorials, etc. online regarding hiding and showing content based on a JS event. Google your heart out.

Strange javascript/jquery issue

Hopefully someone can help me here.
I have a page that displays a list of users in a modal popup. This page can be accessed in two ways, one way you choose Unapproved users and it will open the page, the other way you choose user accounts which will open a popup asking if you have any search criteria such as name, once you have finished there you search and it brings up the page of users.
I have a button on the form to clear any filters. When i run it on the Unapproved users page, it clears the box fine, however if i do it on the form from the other way the code will not empty the textbox and when i try an alert it shows no data. Where as the alert works on the Unapproved route!
Here is the jquery that i am using:
clear: function () {
//reset filters//
$('.usersFilterList li').remove();
$('.userFilterSelect option').show();
$('#UserFilter_SearchTermIncluded').attr('value', ''); // This line doesn't seem to work properly
alert($('#UserFilter_SearchTermIncluded').attr('value'));
//hide filter options
MSG.showNHide('', '#usersFilterBox');
//reset modal control buttons
$('#usersButSaveFilter,#usersButClearFilter').hide();
$('#usersButFilter').fadeIn();
usersFilter.refresh(0);
}
Can anyone see if i am doing anything stupid? As i say, it is exactly the same form called from the same MVC action just with the other popup in between.
Apologies if this is confusing, I cannot post anymore code i am afraid. I can assure you that the ID of the textbox is correct though.
Any advice here would be much appreciated as I have been staring at it for hours now...
Cheers,
Gareth
If i right click the second option and run in new tab and run that first pop up as a full page the code will then work! So the problem appears to be that there are two popups.
SOLVED
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.
To change the value of an element (or to retrieve it), accessing the attribute is the wrong way to go - it's not synchronized in both directions. What you want is the property. While also exposed through .prop('value'[, newvalue]) the correct way to get/set it with jQuery is .val([newvalue]).
To clear the element's value use the following:
$('#UserFilter_SearchTermIncluded').val('');
To retrieve/show it, use
alert($('#UserFilter_SearchTermIncluded').val());
You should use val() to get/set the value of the input.
Use without a parameter to get the value:
$('#UserFilter_SearchTermIncluded').val();
And with a paramater set the value, in this case set it to nothing:
$('#UserFilter_SearchTermIncluded').val('');
Is there an ajax call involved which might be loading the Javascript you posted twice and hence when called the second time (after the ajax call) it finds a conflict?
As mentioned by others best to use .val('') to set a value and .val() to get the value. Check in firebug if there are any Javascript errors.
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.

Need help making a design decision with jQuery tabs

There will be a list of "plans" that the user has, and I want to be able to click on any of them (separated by divs) and have its information dynamically loaded from the database.
My question is whether I should use a jQuery tab interface and load the content that way, or a button which triggers an ajax call? Is there any easier/prettier way to do this that I'm not thinking of?
Thank you for any help, it is much appreciated!
There are many existing solutions online . You can roll your own too . Here are some samples which has many with AJAX content loading . You can either use existing or change then as you need.
http://flowplayer.org/tools/demos/tabs/ajax.html . You can change .html to your own php,asp ,jsp what ever pages and pass plan id and page can return HTML .
http://webdesignledger.com/tutorials/11-useful-jquery-tab-navigation-solutions
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
http://justintadlock.com/archives/2007/11/07/how-to-create-tabs-using-jquery
I used the jquery-jvert-tabs plugin for something very similar. Each tab had its content dynamically loaded and the whole div was called via ajax, it worked pretty well together.
Talking about which one is prettier, it doesn't matter whichever you choose if you just make sure is cohesive with your overall design :)
I would use tabs- no need to have a separate button if the plan name can be the tab name.
Design should almost always focus on usability and it seems like this approach would serve that goal well.
If your list of plans; however, is dynamic or can grow overtime then I would go with a dropdown populated with the list and a button that gets the details or wire up on onchange event and get the data.
The question is a bit vague so maybe if you provided more information we could better help you here.

Categories

Resources