I have a Jquery pop-up that contains a form, and the submit button disabled. The button is supposed to get enabled once all fields have been filled. I ran a javascript script for this. However, it didn't work, and the page got refreshed. I added another button just to test the enabling.
<'button id="submitButton" disabled='true' data-theme="b" data-icon="check">Done<'/button'>
<'button id="x" onclick="enableButton()"'>Enable<'/button'>
The script:
function enableButton()
{
document.getElementById("submitButton").disabled=false;
}
This didn't work. I tried scripting it according to the jquery plugin guidelines like so:
$("#x").onclick(function()
{
$("#submitButton").button('enable');
});
This didn't work either. Any idea why? Again, this form is in a jquery pop-up.
Try:
$("#submitButton").removeAttr('disabled');
In your click event
You can try this;
$("#submitButton").removeClass('ui-disabled');
Related
I'm replacing the standard "Reset your password" text link with a help' icon, but I discovered that when a jQuery Tooltip is on a link within an iframe, it remains open once the link is clicked until the parent page is refreshed.
I'm using inline frames, but I also experienced the same problem when linking to another page. I tried moving the title inside a <span> tag, as well as closing the iframe and opening a new one with the functions below, but the tooltip just remains open on the page.
UPDATE - I created a fiddle to demonstrate the problem http://jsfiddle.net/chayacooper/7k77j/2/ (Click on 'Reset Link'). I experience the problem in both Firefox & IE (it's fine in Chrome & Safari).
HTML
<img src="help.jpg">
Functions to close iframe and open new iframe
function close_iframe() {
parent.jQuery.fancybox.close();
}
function open_iframe() {
$.fancybox.open([{href:'reset_password.html'}], { type:'iframe'
});
}
I am using jquery-1.8.2, jquery-ui-1.9.1 and fancyapps2
Could be an incompatibility or bug between the fancybox and the jQueryUI tooltip.
Essentially, the fancybox is showing the second form but the browser is not seeing the mouseout event. You can check this by adding a callback function to the .close() event of the jQueryUI tooltip.
$('a[href="#inline_form1"]').tooltip({
close: function( event, ui ) {
console.log('closing')
}
})
You should be able to see closing in the console in IE, Firefox and Chrome when the mouse moves out of the "Reset Link" anchor. However, when clicking "Reset Link" in Chrome you see the closing log line again but in IE9 it does not appear again. So the browser is missing the event.
We can work around this by manually calling .tooltip('close') when "Reset Link" is clicked, like this:
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
There is a small problem with the way in which the tooltips are created which means that with just the above click handler it will error with
Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'
This seems to be caused by using the $(document).tooltip() method which uses event delegation for all elements with a title attribute. This is the simplest way of creating tooltips for all elements so I understand why this is used but it can add unnecessary events and handling to the whole page rather than targeting specific elements. So looking at the error it is telling us that we need to explicitly create a tooltip on the element we want to call 'close' on. So need to add the following initialisation
$('a[href="#inline_form1"]').tooltip();
Sp here is the completed JavaScript
$(function () {
$(".fancybox").fancybox({
title: ''
})
$(".fancybox").eq(0).trigger('click')
$(document).tooltip();
$('a[href="#inline_form1"]').tooltip()
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
})
Note: You only need one jQuery document.ready wrapping function - the $(function (){ ... }) part :-)
I am pulling my hair out dealing with this problem.
These are the code that I used and caused the mentioned problem.
$(document).ready(function () {
$("#at-site-btn").bind("tap", function () {
$.mobile.changePage("view/dialog/at-site.php", { transition:"slidedown", role:"dialog" });
});
$('#at-site-page').live('pagecreate', function(){
var $checked_emp = $("input[type=checkbox]:checked");
var $this = $(this);
var $msg = $this.find("#at-site-msg");
$checked_emp.appendTo($msg);
$checked_emp.trigger('create');
$msg.trigger('create');
$(document).trigger('create');
$this.trigger('create');
$("html").trigger('create');
});
});
Explanation:
The above code is in a file named hod.php. The file contain a number of checkboxes. These checkboxes and be checked simultaneously and when I pressed the #at-site-btn button the at-site.php appear (as a dialog) and display every checked checkboxes.
This is where the problem occurred. When I pressed the back button in the dialog to go back to the previous page and tried to uncheck those checkboxes, the error pops out as mentioned in the title. There are no calls to 'refresh method' in my code so I don't see the way to fix this.
Can anyone please suggest a way to solve this problem?
Am I using it right? (I am very new to jQuery Mobile. If there are some concepts behind using JQM please explain it to me [I've tried read JQM Docs it seems so unclear to me]).
Best regards and thank you very much for your answers.
What version of jQueryMobile are you using? You might need to use pageinit instead of pagecreate. This portion of the jQueryMobile documentation talks about the choices.
For re-painting or creation, the solution that #Taifun pointed out, which looks like:
$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");
worked okay for me, but it didn't paint the controls 100% correctly. Radio buttons didn't get the edges painted with rounded corners.
Before I saw your code, I read here that you can call .trigger('create') on the container object and it worked for me. You are doing that but inside pagecreate instead of in pageinit.
I was actually using a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
so had to do this:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
See my full answer here.
I'm using the new jqm popup with the 1.2.0 alpha release and my problem is that my page from which I call the popup is refreshed uselessly when closing the popup using esc key or clicking on the screen... This refresh happen only the first time I close it. If I reopen and close again the popup the page is not refreshed...
It seems that for some reason jqm history mecanism get messed up....
It don't seem to be a built-in feature because this does not happen for any popup in the jqm demo page.
Any idea how to solve this issue?
Thanks
Etienne
I had a similar problem and, as I did not need to use history in my case, I solved it disabling globally popup history like this:
$.mobile.popup.prototype.options.history = false;
Found this post while having a similar problem on IE11 with jQuery Mobile 1.4.5
I found that I could prevent the "reload" when closing the popup by declaring the popup with the data-history="false" attribute in my HTML.
Ex:
...
Per my comment, here's a temporary workaround to the issue. Just appropriately bind to the navigate event and call preventDefault. This will prevent the reloading of the page. I ended up binding to the popupafterclose, only when it's been opened:
$('.my-popup-selector').on('popupafteropen', function () {
$(this).one('popupafterclose', function () {
$(window).one('navigate.popup', function (e) {
e.preventDefault();
});
});
});
I had a similar problem and I fixed it with using history: false:
$("#selector").popup({ transition: 'slidedown', history: false, overlay: true });
$("#selector").popup("open");
Add data-history="false" to popup div. thus when popup closes it doesn't redirect to another page .
I'm using $.mobile.ChangePage() to navigate from one HTML page to another. But the contents of the page is not changing. while doing so the page URL changes but the new page is not loaded. it requires to be refreshed to load.
you should use JavaScript function to change the page..using
window.location = 'your page ';
hope it will resolve your problem !
In the code that you provided in the comments above, you are likely getting an error stating that next_page is not defined. Given that you are dealing with jQuery Mobile, try assigning the click handler slightly differently:
Change the definition of the link to something like this:
<a id="btnNextPage" href="#" >Details</a>
You don't have to give it an id - you could just use selectors to identify the link in the following javascript:
// the event handler
function next_page() {
$.mobile.changePage("http://www.google.com", {transition:"slide"});
}
// assign the click event when the DOM is ready
$(function() {
$("#btnNextPage").click ( next_page );
});
So I have some jQuery UI tabs. The source code is as follows:
HTML:
<div class="tabs">
<ul>
<li>Ranges</li>
<li>Collections</li>
<li>Designs</li>
</ul>
<div id="ranges"></div>
<div id="collections"></div>
<div id="designs"></div>
</div>
jQuery:
$(document).ready(function() {
$(".tabs").tabs();
});
My problem is that I am trying to make each tab load a page into the content panel on click of the relevant link. To start with I am just trying to set the html of all the panels on clicking a link. From the code below, if I use method 1, it works for all links. However if I use method 2 it doesn't - but only for the links in the tabs (i.e. the labels you click to select a tab).
Method 1 (works for all links all the time, but would not be applied to links which are added after this is called):
$("a").click(function () {
$("#ranges, #collections, #designs").html("clicked");
});
Method 2 (works for all links which are not "tabified"):
$("a").live("click", function () {
$("#ranges, #collections, #designs").html("clicked");
});
Does anyone know why it is behaving like this? I would really like to get method 2 working properly as there may well be links which I need to add click events to which are added after the page is originally loaded.
Thanks in advance,
Richard
PS yes the function calls for .live and .click are both in the $(document).ready() function, before anyone says that that may be the problem - otherwise it wouldn't work at all..
Edit:
The solution I came up with involves an extra attribute in the anchors (data-url) and the following code (which outputs a 404 not found error if the page cannot be loaded). I aim to expand this over the next few weeks / months to be a lot more powerful.
$(".tabs").tabs({
select: function (event, ui) {
$(ui.panel).load($(ui.tab).attr("data-url"), function (responseText, textStatus, XMLHttpRequest) {
switch (XMLHttpRequest.status) {
case 200: break;
case 404:
$(ui.panel).html("<p>The requested page (" + $(ui.tab).attr("data-url") + ") could not be found.</p>");
break;
default:
$(ui.panel).html("<p title='Status: " + XMLHttpRequest.status + "; " + XMLHttpRequest.statusText + "'>An unknown error has occurred.</p>");
break;
};
});
}
});
I don't know if I understand what you are going for but basically you want to do something once a tab is clicked?
Here's the docs for setting up a callback function for selecting a tab.
EDIT: Don't know if that link is working correctly, you want to look at select under Events. But basically it is:
$("#tabs").tabs({
select: function(event, ui) { ... }
});
Where ui has information on the tab that was clicked.
jQuery UI tabs has an outstanding issue where return false; is used instead of event.preventDefault();. This effectively prevents event bubbling which live depends on. This is scheduled to be fixed with jQuery UI 1.9 but in the meantime the best approach is use the built in select event as suggested by #rolfwaffle.
Maybe the tabs() plugin that you are using is calling event.preventDefault(); (Reference) once it has created it's tabs.
Then it captures the click event and the bubbling stops, so it doesn't invoke your click-function. In jQuery this is done with
$(element).click(function(){
// Do stuff, then
return false; // Cancels the event
});
You'd have to alter the tabs() plugin code and remove this return false; statement, OR if you are lucky, the plugin might have an option to disable that behavior.
EDIT: Now I see you're using jQuery UI. Then you should check the documentation there, since it is an awesome plugin, it will do anything you want if you do the html right and pass it the right options.