I am using an onchange event on a dropdown list to update the database, then return back to the same page to display this change.
What I need is for the page to keep the scrolled location rather than the user scrolling back down the page to where the user was working.
Here's the onchange <select> tag
<option value=''>--Please Select</option>
<!-- Lots of code not pasted here -->
</option>
Here's the function that is executing
function updatePO(poID, trackerID) {
//this function will add the PO/Vendor chosen from the drop down list on each individual tracker item on the fly
window.location="https://www.webpage.php?poID="+poID+"&trackerID="+trackerID;
}
I've tried various methods from these links but still having trouble incorporating them with my function... Thanks in advance.
How to maintain page scroll position after a jquery event is carried out?
http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/
Refresh Page and Keep Scroll Position
Related
I'm using a RadComboBox in the load on demand (lazy) mode with a web service.
I'm using a client side item template of this form: <input type='checkbox' id='cb_#= Value #'/><span>#= Text #</span> (adding a checkbox before each item's text)
In the itemDataBound client side handler for this RadComboBox I'm retrieving the particular item's DOM element and the nested checkbox'es DOM element and adding a click handler function for each of them (using jquery's $(element).click(function() {})).
The click handler functions work fine until I scroll the items out of view and then scroll back, after that the click handlers are not called anymore (the checkbox selection is also lost).
I suppose this is because the DOM elements representing the items get re-created as they are scrolled in and out of view. But the itemDataBound event is raised only once and is not raised again when an item is scrolled back in view.
The only workaround I can think of is to use the onclick attribute in the HTML and reference a global function from there, but this is ugly.
Is there a nicer solution for this then using the onclick attribute?
What it does actually it appends to innerHtml of the list element, but this is effectively re-moving and re-adding every node under the list element.
I worked around this by assigning my click hander and doing the databiding in the itemsRequested client side handler, iterating over the entire list of items obtained with the get_items() method of the RadCombobBox client side object.
itemsRequested is called every time after new items are added to the list and therefore every time after the DOM is re-created.
I have a bootstrap dropdown button for each table row.
When the dropdown is clicked it shows a small form with some input fields.
When the user submits this form data or the row gets redrawn the dropdown closes.
I tried preserving the dropdown state using the Template.preserve() method, similar to inputs but with no success.
Some suggested using {{#constant}} directive surrounding the dropdown I also have some reactive content inside the form that needs re-rendering, so this options is not for me.
I have noticed this issue with reactive templates and there is no good solution that I know of. This is somewhat of a hack but it works.
Option 1
Manually add and remove a css class to your dropdown. Use session variables to save the state of the dropdown.
This should be the default state of your dropdown... class="dropdown"
When a user clicks on the dropdown use a session variable to save its state and add 'open' to the HTML class attribute. class="dropdown open"
When a user closes the dropdown remove 'open'
Option 2:
1. User clicks dropdown button.
2. Save dropdown button ID as active using a session variable.
3. Use the following callback to reopen your dropdown... Template.myTemplate.rendered = function ( ) {
if (dropdown = active) {
$().dropdown('toggle'); //instead of toggle try 'open'
}
}
I haven't tried this with dropdowns yet but I was having the same issue with modals disappearing every time the template kept rendering. I tried the second option and it didn't work that great. I ended up using something like the first option to solve the issue and it worked great.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});
I am writing a Selenium script in Ruby (As a beginner), wherein I need to change the selection of dropdown menu.
Functionality to automate-
1.Change the drop-down selection from a default value. (This dropdown is in an iframe)
2.Press Save button.
3.Handle a popup that confirms the change.
4.Page reloads with the new selection.
I am able to change the selection on UI by using "select(locator, value)". I have already disabled Javascript to handle the popup.
Issue-
Now, when I press the 'Save' button, the page reloads with the default value that was set.
e.g- Dropdown menu has 4 options-
<option value="920">Apple</option>
<option selected="selected" value="1">Mango</option>
<option value="910">BlackBerry</option>
<option value="921">Orange</option>
Now, when I change the selection to Orange, and then press Save, the page reloads but only with option 2 selected.
Please suggest any solution/reason for this and how can it be avoided? I hope I am clear with the question.
The main reason that might be happening is because you disabled the javascript. The script usually fires the postback event which loads the page with the new selected element. You should enable the javascript and handle pop-up using switch_to_alert function and explicitly click the confirmation button like a user would.
I have binded RadCombo on LoadonDemand Event. when i change page of radgrid, RadCombo looses its selected item.
How to maintain RadCombo selected item.
Please Help
Have you tried using the RadComboBox's trackChanges() and commitChanges() methods to preserve the selected item across post-backs?
http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
I'm assuming the RadGrid is not contained in a RadAjaxPanel because if it were this would be taken care of automatically through partial page rendering (i.e. only the RadGrid would be re-rendered when paging occurs). It would probably be helpful if you could post you page's markup.
When you page the grid is rebound and the controls inside it are recreated. To keep the combobox selection, save it Cache of Session object and then recover it from there wiring the PageIndexChanged event of the grid.