I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
Related
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
I have a page with an accordion that contains search criteria. Once a person clicks the search button, the criteria closes (I simulate a click on the accordion heading). This works great.
The problem is when there the user provides invalid input, my AJAX call returns and I attempt to show the search criteria again before the accordion finished closing (again with a simulated click on the accordion heading). This of course fails to open the search criteria.
A simple example of this would be double clicking on the accordion heading. Nothing happens if the accordion is in transition during this double click.
How to avoid this in my situation? NOTE: It seems to be more of a problem in Chrome/FF than in IE as IE does not animate the accordion open/collapse.
Basic idea from the code where #section1 represents the accordion heading:
$("#section1").click();
//some very fast AJAX.
$("#section1").click();
JS Fiddle: http://jsfiddle.net/mikeyfreake/gGaJn/2/
Thanks,
Mike
Call stop on the children of the accordion:
$("#accordion").children().stop(true, true);
http://jsfiddle.net/gGaJn/9/
Use async: false parameter in your Ajax call. This will let the Ajax call finish executing before the second click.
http://api.jquery.com/jQuery.ajax/
Or you can perform the second click in the success function:
$.ajax({
success: function (data) {
$("#section1").click();
},
...
});
Hello I am using jquery-ui tabs on a page that is being embedded into different platforms. The tabs work fine but the problem is if you click a link in the tabbed page it exits the tabs to goto the page. Is there an option in the tabs call to make them more self contained or should I look into setting the target of the anchors on those pages, etc?
$(function() {
$( "#crmtabs" ).tabs({
cookie: {
expires: 1
},
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible.");
}
}
});
});
I'm not sure I understand your issue. Your code will try to load tab content via AJAX so clicking a tab will load the page specified by the anchor in your cmrtabs markup. Remember that UItabs is basically rendering the output of the AJAX loaded page and inserting it into the appropriate container in the crmtabs markup. Any links in the loaded page are now relative to the tabs page (i.e. jQuery code in the AJAX loaded page will not work but jQuery code in the tabs page can operate on the AJAX content). Links in the loaded tab are not "contained" but are rather now a part of the tabs page. If you are thinking of some kind of iFrame behavior within the tab, you are moving beyond the intent of the tabs widget. See this article referenced on the jQuery UI site. http://www.useit.com/alertbox/tabs.html
I've implemented jquery tabs and want to call the page they are on in two ways. Firstly with the first tab open and the others hidden which works fine. But secondly I want tab 4 to be visible when landing on the page. So I have simply duplicated the page - Page A opens with the first tab in view. Page B has this code....
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs( 'select' , 3 )
});
</script>
and opens the forth tab. BUT it opens the first tab first then flashes to tab 4.
How can I get the page to open tab 4 initially without opening the first tab first.
Hope you can follow my ramble!!!
Nick
There does not appear to be an obvious solution. One suggestion I have seen is to use jQuery to keep the tabs hidden until they have loaded and then show them after the selection has taken place.
That would be how to open to the 4th tab using their API.
Perhaps you can try hiding the tab div, creating it, and then showing it in the show event when the 4th tab is shown (which will happen after everything is initialized).
I currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?
Thanks.
Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.
For example,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.
change your code like this
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
You can try :
scrollTo(0, jQuery("body"));