I'm trying to create a pop up window which is triggered upon selecting an option from a dropdownlist using JQM .
The popup datarole:
<!--popup window inside index page -->
<div data-role="popup" id="puProd"> TODO POP UP STUFF </div>
And this is the JS code:
$(document).ready("#index", function (event) {
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
Am I doing something wrong? Because the pop up won't open.
Will appreciate answers
Thank you
Use the jQuery Mobile pagecreate event instead of document ready:
$(document).on("pagecreate","#index", function(){
$("#ddlSelectProduct").on("change", function () {
$("#puProd").popup("open");
});
});
DEMO
Related
Every time when I click on select, pagecreate event is triggered. Is there a way to prevent pagecreate calling.
<select name="guests" id="guests" data-native-menu="false">
</select>
$(document).on('pagecreate', function (event) {
});
This happens not every time, but just the first time you open your long select list:
The custom select uses a popup with a listview to display the menu.
For long lists a dialog will be used. (This means: a page with role="dialog")
Filter it out:
$(document).on("pagecreate", function(e) {
if($("#"+e.target.id).hasClass("ui-selectmenu")) return;
// do whatever stuff for "true" pages
});
I need a way to reload my parent page when I close my jqUI modal window. Somehow or the other, what I am currently doing is not working (imagine that)...
$('div#addPat').live('dialogclose', function (event) {
debugger;
location.reload(true);
});
I never get to the debugger statement so I assume just assume that my event is wrong...
How do I get the close dialog event and how can I use it to reload the page... I think I have the second part figured out.
Try this:
$( "div#addPat" ).dialog({
close: function(event, ui) {
debugger;
....
}
});
REF: http://jqueryui.com/demos/dialog/#event-close
I'm opening a dialog programmatically with this piece of code:
$.mobile.changePage('#about', {
transition: 'pop',
changeHash: false
});
#about block is on the same page:
<div id="about" data-role="dialog">
<!-- -->
</div>
But every time I do that, pageInit event is called, which is a very unwanted behavior.
Is there any way around this?
I'm not sure what you mean by "which is a very unwanted behavior" but if you want to only run code once for a dialog then add a check to see if it has been initialized yet:
$(document).delegate('#about', 'pageinit', function () {
if ($(this).hasClass('ui-dialog') === false) {
//code in here will only run once per page load/refresh
}
});
jQuery Mobile adds classes to each of the widgets it initializes, you can check the widgets for these classes to test if they have been initialized yet or not.
I inject html for dialog via script like:
$("#misc-cntr").append('<div id="chk" data-rel="dialog" > </div>');
then in ajax success callback I have:
success: function(msg) {
$('#chk').html(msg)
// open dialog here
// $('#chk').dialog('open') does not work
}
Given above how can I open the dialog programatically?
You'll need to change the page to it, something along the lines of:
$.mobile.changePage($('#chk'), 'pop', false, true);
If you want to close the dialog via javascript, you'll need:
$('#chk').dialog('close');
Hope this helps.
Here's what I used. It's very dirty, but it uses an actual dialog instead of a popping page.
The div:
<div data-role="page" id="score" data-theme="d" data-transition="pop" />
The jQuery code:
var a = $('<a />').attr({
href: '#score',
"data-rel": 'dialog'
}).click();
The changePage function takes an object as second argument. In it you can specify things as role and transition. For your case you need to set role to 'dialog'.
$.mobile.changePage( $('#chk'), { role: 'dialog', transition: 'slide'} );
$.mobile.changePage($('#mydialog'),{'transition':'pop'});
OR
$.mobile.changePage($('#mydialog'),'pop');
When dynamically creating a div using an .ajax() function. I'm unable to attach the .tabs() widget to the newly created .
This link creates the new div and pulls the #tabs div from "somefile.php"
Creates New Div
Here is the dynamically created div:
<div id="newdiv">
<div id="tabs">
<ul>
<li>Example One</li>
<li>Example Two</li>
</ul>
</div>
</div>
Here is the script I'm using. Output - Error: (d || "").split is not a function
Copy code
$( "#tabs" ).live(function(){
$(this).tabs()
});
I'm able to show the tabs when adding an event parameter, However I want the tabs to display without an event.
Copy code
$( "#tabs" ).live("click", function(){
$(this).tabs()
});
Someone please help me understand what I'm missing. I've been stuck on this for 3 days.
Chris
Are you trying to assign the live handler before the AJAX callback has completed?
My suspicion is you need to move your code into the success handler of your AJAX object and not use live because I don't think it does what you think.
If you post more of your code we'll be able to help you out a bit more.
My guess as to what you're trying to do:
$.ajax({
type: "GET",
url: "/tabs/",
async: true,
success: function() {
$('#tabs').tabs()
}
});
RSG is correct in that you're using the live function incorrectly. The live function is specifically for attaching event handlers to elements and calling functions. As RSG pointed out, in your case the best thing to do is call the tabs widget in the success function of the ajax request.