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"));
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 set of divs that can be scrolled through on my jquery mobile page. Each div has an active class in CSS so they change color when they are tapped. For some reason when I try to scroll through my list the items turn active because I am 'clicking' them.
That isn't too serious and it looks fine, but there's also another glitch. If the page is intertial scrolling, so I just flicked it and it hasn't stopped moving, a tap on the screen will activate the div I pressed when I first scrolled it.
Any idea what is causing this/how to stop it?
You could try the stopPropagation
HTML:
<div id='someID'>
<someElement />
</div>
JS:
$('#someID').click(function(e){
e.stopPropagation(); //stops default behaviour
//check to make active/inactive
if( $('#someID').hasClass('active') ){
$('#someID').removeClass('active');
//do what needs to be done when it becomes activated
} else {
$('#someID').addClass('active');
//do what needs to be done when disabled
}
//do whatever you always want to here
});
Note: whatever requires the click event to work will have to be re-enabled afterwards, though if you use a link/button/etc. within the div that has a click event, it'll still function.
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
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...
I have an image that opens the jQuery UI Slider div on click and allows users to set a value by dragging the handle. What I'm trying to do now is hide that handle when the user clicks anywhere else on the page, but the regular .blur event doesn't seem to work.
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").show();
$("#slider-vertical").focus();
});
$("#slider-vertical").blur(function () {
$("#slider-vertical").hide();
});
Probably you will have a better luck on defining global onclick handler and there you need to check if source of event is not your slider. If not - do your magic.
Basically - if you spinner doesn't include element such as text field or link it will not support focus/blur
Ok, this is what I have put together to make this work.
Thanx DroidIn.net for your help.
$(document).bind("click", function(e){
if(e.target.id != "openPriceToSliderGif")
$("#slider-vertical").hide();
return false;
});
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").toggle();
});