Meteor: Prevent template from re-rendering - javascript

So I have a page which displays some data (questions) coming from a collection in a ul.
Link to example (feel free to fiddle around, it's just sample data!)
If the user clicks on the button in the bottom right a previously hidden div is shown with a textarea so the user can post a new question. That all works fine. Problem is that if a new question is posted from another user while the user is typing a new question, this user gets thrown back into the "questions view" because the ul is rerendered because of the new entry.
What I want is that the user, who is currently typing a new question, does NOT instanly see the new question so he can continue typing in the textarea in the div. --> What I need is a way to prevent the ul (its template) from rerendering.
I tried {{#constant}} and all that stuff + had a look into that post but it can't get it to work.
What I need is a way to prevent the rerendering onclick of the "post a question" button and of course a way to continue rerendering after the question is posted and the textarea + its div is hidden again.
I hope you guys can help! thx!
best regards P

I think that it's not necessary to wait with rendering the new question, since the dialog is opaque anyway, so it won't be a difference to the user. You need only to make sure that the dialog itself will not be rendered.
There are three ways to achieve it:
Put dialog only in {{#constant}} block.
Put dialog and question list to separate {{#isolate}} blocks.
Put dialog and list in separate templates. That's the most robust and thus recommended method.

Try putting unique ids on your questions:
id="question_{{_id}}"
Then meteor can be smarter about what it is updating.

Related

Windows with space to write text dont appear AJS

I have created custom Issue Tab Panel with field, where I can add comment when Ill press my custom button “add comment”
In my VM template I have
AJS.$("#add-comment-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#add-status-comment").show();
});
This button works fine and window to write text appears, but… In other section in Issues --> Current Search —> Views (Detail Views), windows with space to write text dont appear when I click button “add comment”. It only appers in normal view of issue… Whats problem?
I'm not sure if I understand your question right so I'll give it a try. Maybe it helps in one or the other way.
As you didn't provide the code affecting the window I assume it is possible you are retrieving the issue key or issue id. There are some Jira JS calls that don't work in every view. The reason is unknown to me, but maybe if you use different calls it will work.
Here is the question and answer to this field availability problem on the atlassian community: https://community.atlassian.com/t5/Jira-questions/Get-issueID-in-JavaScript-in-Project-Screen-viewing-issue/qaq-p/824175
Otherwise you should provide some more information.
Regards
Chris

Can I keep fields in a form populated even if I move to a different page and then back?

I am currently looking at creating a form using HTML, CSS and a bit of JavaScript. I was wondering though if anyone had any ideas how I could keep all the fields populated?
I want to be able to fill in a form and click 'Next' which will go to a different page with a different form. But if the user presses the 'Back' button to edit some information on the previous page for example, how would I keep all the fields populates?
Bit stumped on this, so any suggestions would be appreciated :)
You may use localStorage or cookies for that purpose to store content of the page on the client' side.
See https://stackoverflow.com/a/27273657/696034 for an example; in you case, you call save() when receiving location change event, and load() on the page' initialization.

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.

Radio buttons not retaining selection when user controls are posted back

I am facing some problems when page is posted back partially. I have some radio buttons based on which I am making tr display="" and display="none" by javascript. After that I am adding rows gridview. The gridview contains empltyTemplate and footer to add new rows. But when I add row in grid view, the user control is posted back and hence all the tr becomes displa="none" which is default when page is loaded. I tried to keep gridview in update panel but it not working. Hierarchy of my controls is as below.
Level-1-Master page--->Level-2-master page--->Level 3-.aspx page--->Level 4-user control--->Level-5 -multiple accordians-->Level-6: 1 user control in each accordian..
code is too long to past here.. I tried to keep update panel inside user control(Level 6) but it was not working. After some googling I found that update pane not works if it is inside accrdian. So I tried to keep all accrdian inside update panel but in that case .aspx page is not posted back but all user controls placed inside accrodian are posted back so the selection is set as they are on default load.
I want all selection to retain when the last level user control is posted back.
The situation is quite complex to understand but this is what the things are..How to solve my problem?
Changes made to the DOM from JavaScript are not retained cross-PostBack; the server has no idea what you've done, and therefore has no way to track it.
To solve this, you either need to have your JS code update state on the server side with a Callback or Ajax call -- or perhaps have it update a hidden input field in the form that reflects the state of your tags, and have the server look there and update the rendered HTML accordingly.

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Categories

Resources