I am using JQuery UI tabs:
<div id="tabs">
<ul>
<li>Необработанные</li>
<li>Клиенты</li>
</ul>
</div>
$('#test').click(function() {
alert("clicked!");
});
If I open klienti.php tab click function does not work.
klienti.php:
<?
echo "<div id='test'>Test div.</div>";
?>
Tell me please, what am I doing wrong?
When using jQuery tabs with ajax, the HTML from the ajax call is not immediately available.
I believe your code to add a event for the click of the test id needs to be done within the add event of your tabs object. So you have to add something like this to the document.ready handler in your JavaScript code:
$("#tabs").tabs({
add: function(event, ui) { ... }
});
Related
I am facing a strange issue. I am trying to receive the contents of another file on main page using jquery UI tab ajax method.
jQuery( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Error message." );
});
}
});
and
<div id="tabs" class="jquery_tabs">
<ul>
<li>First Option</li>
<li>Second Option</li>
<li>Third Option</li>
</ul>
<div id="div1">
contents of tab2
</div>
<div id="div2">
contents of tab3
</div>
</div>
as you can see I am calling abc.php on first tab. It contains a form and some validation javascripts.
This works fine on Google Chrome and javascripts of abc.php works without any issue on main page.
The problem comes when I use firefox, javascript of remote file (abc.php) does not work but if I use alert() on the main page from where I am calling abc.php, javascript of abc.php works
I think I found the answer myself. I was using jQuery(document).ready(function(){ to execute Javascripts on both main page and abc.php.
Just removing the jQuery(document).ready(function(){ event from abc.php did the wonder and now It seems working on both Firefox and Chrome.
I am using jquery mobile and a dialog to display some multiple select boxes. Some of the content is dynamically created with Ajax based on the selections. I would like to make the Ajax call when the dialog is closed (through the regular x button). The main parts of the html look as follows:
<a href="#queryPage" data-rel="dialog" data-transition="slidedown" >Filter Results</a>
<div data-role="page" id="queryPage" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Select Filters</h1>
</div>
<div data-role="content">
<form action="" method="get" id="filterForm">
<fieldset id ="filterFields"></fieldset>
</form>
</div>
</div>
I am currently making the call by running the code on page hide as follows:
$('#queryPage').live('pagehide', function(event) {
//code for ajax call
});
However, I would like to make the call when the dialog closes because some of the select lists are large and they create a new page that hides the queryPage even though the dialog has not been closed. I have tried:
$('#queryPage').bind('dialogclose', function(event) {
alert('closed');
});
and also tried
$('#queryPage').dialog({close:function(event, ui){
alert("closed");
}});
These I have put in a function called on page load but the alert is not shown when the dialog is closed. Any help will be appreciated.
There are no specific events for dialogs as they are simply pages that are displayed as a dialog. Try the pagehide event.
$("#MyDialog").bind("pagehide",function(){
alert("Dialog closed");
});
Also, the first line of your sample code has a link that is outside of a <div data-role="page"> which should not be done.
Pagehide can be delegated as such:
$(document).delegate("#MyDialog", "pagehide", function() {
alert("Dialog closed");
});
and you will also have access to the screen elements of the calling page.
Andleer shared the appropriate event for closing the dialog using jquery. however, we can also code in this way.
$(document).on("pagehide","#Dialog",function(){
console.log('Dialog has closed.');
});
I am trying to programmatically click a link in jQuery Mobile but its not working. Here is the page code.
<section id="welcome" data-role="page">
<div class="content" data-role="content">
<a id="myLink" href="http://www.google.de" target="_blank">The link</a>
<input type="button" id="launcher" value="Launch the link"/>
</div>
</section>
and here is the correpsonding javascript code:
$(document).ready(function()
{
$("#launcher").bind("click",function()
{
console.log("Inside the button click handler");
$("#myLink").click();
});
});
Seems straightforward enough but I can,t seem to make it work.Any help is appreciated.
A possible reason for it not working is that there is another <a id="myLink"></a> in the DOM, but not in the active page. If that is the case, your code might be triggering the click handler on that element rather than the one you see on screen. Maybe using $.mobile.activePage.find("#myLink").click(); will work.
Also, you should avoid using $(document).ready() in jQuery Mobile.
Not really an answer to the question,but this can be a solution if you want to achieve only the link to be launched(and you dont want to execute the click handler you have defined for the link,if any)
$(document).ready(function()
{
$("#launcher").bind("click",function()
{
console.log("Inside the button click handler");
window.open($("#myLink").attr("href"),$("#myLink").attr("target"));
});
});
You should use a trigger, like so:
$('#mylink').trigger('click');
also, check your binding is actually being bound to an element. In JQM you should not rely on $(document).ready. Instead use $(document).bind('pageinit') . See here
I had the same problem.
What worked for me was calling click() on the DOM object itself. Just add ”[0]” after the jQuery object.
Like this:
$(document).ready(function()
{
$("#launcher").bind("click",function()
{
console.log("Inside the button click handler");
$("#myLink")[0].click();
});
});
I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:
<div id="upload_file_picker_dlg" title="Upload file">
<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>
frame_src_url contains:
<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">
<p>Select a file to be uploaded:</p>
<p>
<input type="file" name="datafile" size="60">
</p>
The jQueryUI dialog box javascript code:
$('#upload_file_picker_dlg').dialog({
...
buttons: {
'Close': function() {
$(this).dialog('close');
},
'Upload': function() {
$('#upload-form').submit(); //question is related to this line
$(this).dialog('close');
}
},
....
});
From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?
Accessing an element inside an iframe is tricky.
You should use the following syntax:
$('#iframeID').contents().find('#upload-form').submit();
where 'iframeID' is obviously an ID you've given to the iframe.
Hope it is correct!
The answer is:
$('#upload_file_iframe').contents().find('#upload-form').submit();
which I learned from http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
Off the top of my head I'd say you might have to add the logic to the file where the iframe source is from.
I've got a problem when i using UI Tabs and load an external page into the tabcontent-DIV. When the page has loaded, all jQueries for this page seems not to work anymore. I read something about callbacks, but it's not clear at all.
Example: I load an external page by ui-tabs, and the loaded content includes a DIV, that should hide automatically as jQueried in index.html
The jQuery click-event is only added to show that a live-event is working.
But i can't get the auto-hide working, after loading the content.
index.html
<script type="text/javascript">
jQuery(document).ready(function() {
// define tabs
$('#tabs').tabs();
// after loading external page, the div "autohideafterload" will automatically hide.
$('#autohideafterload').hide('slow');
$('#autohideafterload').live('click', function() {
$('#autohideafterload').hide('slow');
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>Load data</span></li>
</ul>
</div>
<div id="tabcontent"></div>
</body>
</html>
loadcontent.html
<div id="autohideafterload">This div will hide automatically after loaded this external page.</div>
What am i missing?
Bind your events after the tab's load event is triggered...
$('#tabs')
.bind('tabsload', function(event, ui) {
$('#autohideafterload').hide('slow');
})
.tabs();
You're trying to bind to an element that doesn't (yet) exist. You need to bind after the item loads, and listening to the event is the best way to do this.