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();
});
});
Related
I'm really hoping someone can help. I just got over one big hurdle in my current project, only to hit another. I have a deadline fast approaching, so any advice would be very much appreciated.
I am developing a mobile application for iPad using MVC4 and Jquery Mobile. At a certain point in my app, the user will trigger a pop-up box, which contains "yes" and "no" buttons. If the user clicks "yes", I want to send some parameters to an action in my controller, do some database work, and then return a partial view (with updated model) that will be displayed in my main view. I have the following jquery that executes upon click of a href button that is inside a pop-up.
$(function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")',
{TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestServiceRequestNum.innerHTML },
function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); });
}
});
In the above code, #popupSubmit is the href button, LoadTestData is an Action that returns a partial view, WO is the Controller, and #detailsDiv is a placeholder div in the main view. TestKey and TestRequestNumber are parameters that must be passed to the Action. Below is the code for the Action, LoadTestData. _ShowTestPartial is the Partial View.
[HttpPost]
public ActionResult LoadTestData(string TestKey, string TestRequestNumber)
{
//do database work
return PartialView("_ShowTestPartial", model);
}
Now, all of this code works on my desktop in Safari. However, this DOES NOT work on the iPad. I've tested, and the code does make it into the tHandler event when the button is clicked on the iPad, but there's something about the URL.Action or about returning a partial view in this way that the iPad just doesn't like.
Does anyone know how to solve this issue for iPad?
Edit (additional info from comments): To be clear, the partial view isn't being rendered at all on iPad, but it is on desktop Safari (and in Chrome for that matter). I have tried replaced "create" with "pagecreate" but this actually took away the JQM styling in the desktop browers and didn't change anything about the iPad.
It also doesn't seem to matter where I place the bind function...I've tried it as a separate function. I've tried it in .ready() and in .on('pageinit'). In all of these cases, it works on desktop Safari and Chrome, but not on iPad.
Also, as I said before, the .bind("tap") works on iPad. I've tested by putting other code in the tHandler. However something in the .$post does not work on iPad.
Thank you Omar, and anyone else who has any ideas. All are welcome!
Edit # 2: On Omar's advice I moved my function to $(document).on('pageinit'). I also added error catching on the $.post. Updated code below:
$(document).on('pageinit', function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")', { TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestRequestNum.innerHTML })
.done(function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); })
.fail(function (xhr, textStatus, errorThrown) { alert(xhr.responseText); })
}
});
Fortunately, this enabled me to see the error occurring on the iPad. Unfortunately, the error coming out of $.post is "An unknown error occurred while processing your request". Everything is still running smoothly on the desktop browsers with this code.
It turns out the answer was that, on the iPad the parameters were not getting passed to $.post. lblTestRequestNum and lblTestKey are labels on my JQM popup dialog box. See below:
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
style="max-width:416px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Selection <label id="lblTestRequestNum" style="text-align:left; height:22px; font-size:14px;">#Model.TestRequestNumber</label></h1>
</div>
<div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
<h3 class="ui-title" style="text-align:center; height:22px;">Are you sure?</h3>
<label id="lblTestKeyLabel" style="text-align:left; height:22px; font-size:14px; margin-left:95px;">Test Key: </label>
<label id="lblTestKey" style="text-align:left; height:22px; font-size:14px;"></label>
<label id="lblTestType" style="text-align:left; height:22px; font-size:14px; margin-left:95px;"></label>
<a id="popupSubmit" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a>
<a href="#" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a>
</div>
</div>
On the desktop, Safari was able to retrieve the parameters I needed from the labels in the popup. But on iPad, it could not. So, I simply found places outside of the pop-up, in my main view to display/retrieve my parameters from. Lesson learned: Don't expect iPad to be able to read anything from labels/inputs inside your pop-up dialog.
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 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) { ... }
});
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 am tryng to use this: http://jqueryui.com/demos/dialog/#modal-form
I have:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$("#dialog").dialog('close');
$('.myPop').click(function() {
$("#dialog").dialog('open');
});
});
Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:
<button type="button" class="myPop"></button>
My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?
I want to keep with best practice in ASP.Net MVC please.
Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/
Thanks
There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.
<div id="dialog" title="Basic dialog">
<!-- loaded from ajax call -->
<form id="exampleForm">
<input blah>
<input type="button" onclick="Save()" />
</form>
</div>
<script>
$(function() {
$('.myPop').click(function() {
$.get("editController/loadContents", function(data){
$("#dialog").html(data);
});
$("#dialog").dialog('open');
});
});
function Save(){
$.post("/editController/Edit", $("#exampleForm").serialize(),
function(data){
$("#dialog").dialog('close');
//update grid with ajax call
});
}
</script>