When I try to call .trigger('create') method to iframe contents, it does not work and css classes are not applied to input:text elements. but when I call .trigger('create') method for html content outside the iframe, it works
please go to this link 'here' on jsfiddle and click on "load mobile view"
javascript code
$('#mobile_view').contents().find('body').append("<div id='fbm_mob_menu'></div>");
$("#load_mobileview").click(function(){
var content = ' <form class="fbm_contactform">\
<div>Contact Us</div>\
<div data-role="fieldcontain"><label for="name" >Name</label>\
<input name="name" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label for="email">Email</label>\
<input name="email" type="text" class="m-field" /></div>\
<div data-role="fieldcontain"><label >Message</label>\
<input name="message" type="text" class="m-field" /></div>\
<input name="submitButton" type="submit" class="m-field" value="Send Message" /></div>\
</form> ';
$("#mobile_view").contents().find("#fbm_mob_menu").before(content);
$("#mobile_view").contents().find(".fbm_contactform").trigger("create");
});
html code
<a href="javascript:void(0)" id="load_mobileview" >load mobile view </a>
<iframe id="mobile_view"></iframe>
<div id="test"></div>
iFrame contents should not be "easily" accessible, so to me this is correct behavior.
If you check the jQuery Mobile API examples, you can see that all pages are done using iFrames and every iFrame has it's own version of jQuery Mobile.
So if you have an iframe, include JQM inside the iFrame and everything should be allright.
I could solve this problem by writing a javascript function inside iframe. and calling that function outside from the iframe.
in iFrame
<script>
window.trigerCreate =function(){$(".fbm_contactform").trigger("create");}
</script>
parent
window.frames[0].trigerCreate();
Related
Folks,
I just noticed something interesting developing my first ASP.Net Mvc application and Its when you mouse over on a submit button in Mozilla the full Url is shown in the status bar! Is it a normal behavior?! how can i prevent that?
Try the following code:
<html>
<body>
<form id="myForm">
<input type="text">
<!-- <input type="submit" value="Send" > -->
<input type="button" value="Send" onclick="onClick(this)">
</form>
<script type="text/javascript">
function onClick (e)
{
document.forms["myForm"].submit();
}
</script>
</body>
</html>
I'm using Jquery mobile, and I have a input form with clear text button.
ex) <input type="text" name="" id="" value="" data-clear-btn="true" />
Then What about the Textarea tag ?
<textarea name="" cols="" rows="" data-clear-btn="true"></textarea>
This does not working.
Is there any way to solve this problem ?
data-clear-btn is only for textinput, not for textareas.
If you want a similar function, you must create a button near the text area, and clear that programically on button click, setting val('') to the textarea.
<textarea id="myTextarea" name="" cols="" rows=""></textarea>
<a id="clrTextarea" data-role="button" href="#" onclick="clearTextarea()">Clear</a>
<script>
function clearTextarea(){
$("#myTextarea").val('');
}
</script>
If you want the same efect than data-clear-btn in textinputs, you must hide the button when the textarea is empty, and show it when the textarea has data, with an onChange event over the textarea. Also you can put the button over a textarea's corner using css, and make it translucent when the mouse is not over it, with a hover tag in the css.
HTML:
<div data-role="page">
<div data-role="content">
<input type="text" />
<a data-role="button" href="#">Click to Change Input's Value</a>
</div>
</div>
jQuery Script:
$('a').bind('click', function () {
$('input').val('');
});
I am using bPopup to load a form in an overlay. The form is basically in a that is loaded hidden in the page, and by clicking a button on the page, the overlay shows up on top with the form in it.
I was using this code in another page before and it worked fine but wanted to go the overlay route as I felt the user experience was better.
So what happens is:
The overlay loads perfectly, all fields are visible, but the submit button doesn't do anything.
Using firebug, I looked at the code of the overlay and realized that my opening and closing tags are gone from the div.
I check and they are present in the when hidden.. so I'm guessing something happens with bPopup as I load the overlay.
I couldn't find anything in the regard and turn to the community.
Thanks
here is a sample of the code:
The div in the page I load:
<div id="fileuploadbox">
<div id="fileupload_div" class="contentcontainer">
<div class="headings alt">
<h2>Upload a file</h2>
</div>
<div class="contentbox">
<form action="**mycontroller**" method="post" enctype="multipart/form-data">
<p><span class='label'>File:</span><input type="file" name="file" value="" id="uploader" size="34" /></p>
<p><span class='label'>Description:</span><input type="text" name="description" value="" id="smallbox2" class="inputbox" maxlength="250" /></p>
<p><span class='label'> </span><input type="submit" name="" value="Upload file" class="btn" />
</form>
</div> <!-- content box -->
</div> <!-- contentcontainer -->
</div> <!-- fileuploadbox -->
The Button it self:
<a href="#" class="fileuploadpop">
<div id="fileuploadpop">
Upload a file
</div>
</a>
The Javascript:
<script language="javascript">
$(document).ready(function(){
$("a.fileuploadpop").bind('click', function(){
$("#fileuploadbox").bPopup();
return false
});
});
</script>
The code you provided works fine in my mac Firefox and Chrome with bPopup. The submit button works!
May be something to do with your btn class which I have not defined or you might try putting this in a bare-bone page to test with bPopup first to track and resolve any other conflict.
.I have a div tag that is also divided into two divs. here is the code:
<div>
<div id="search">
<form id="try" method="post">
Batch: <input id="batch" name="batch" type="text"/>Dept: <input id="dept" name="dept" type="text"><input type="submit"/>
</div>
<div id="receiver">
</div>
</div>
I have placed a search option in the div named "search" using post method. what i want to do is that when i click the submit button the page to receive the values will appear on the div named "receiver".
is this possible? if it is, please help..
The ways you have for this are:
1 - The simplest - instead of a div - use an IFrame like this
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
</div>
<iframe name="receiver" id="receiver"></iframe>
</div>
The disadvantage in this case is that the search-result that come in this case from url-to-server-page - is a complete and independent HTML page that is nested in your search page.
It is not effected by styles of the parent page, and the communication between them for JavaScript operations is rather combersome.
2 - with some JavaScript skills you can use AJAX.
There are many libraries on the net that can help you do it in very few lines of code.
jQuery is the simplest, although it's the one I like least...
http://jquery.com/
3 - use a full round-trip
<div id="search">
<form id="try" method="post" target="receiver" action="url-to-server-Page">
Batch: <input id="batch" name="batch" type="text"/>
Dept: <input id="dept" name="dept" type="text" />
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>
</div>
You want what's called "AJAX." There are a number of libraries available, such as Google Web Toolkit or jQuery to accomplish what you want.
Can you clarify? Is this a php page and you are posting to self or are you looking to use ajax to populate the div?
If it is php and you post to self then you can simply check if the post has been made inside that div :
<div id="receiver">
<?php if (isset($_POST['batch']) && isset($_POST['dept'])){
//display search results here.
}
?>
</div>
Greetings,
I have the following jquery mobile page:
<div data-role="content">
<center>
<img src="./images/logo320.png" />
</center>
<br><br>
<form method="POST" action="./ajax/login.php">
<label for="login_unameLabel">Username:</label><br>
<input type="text" name="login_uname" id="login_uname" /><br>
<label for="login_pwordLabel">Password:</label><br>
<input type="password" name="login_pword" id="login_pword" /><br>
<button id="login_submit" type="submit" data-theme="a">Submit</button>
</form>
</div>
./ajax/login.php returns either "OK" or "NOK". How can I capture this result in my page?
I keep getting the following error in Firebug:
k.data( [Break On This Error]
false)a.mobile.activePage=k;h(k);y&&D&...dd(k).removeClass("
out in reverse "+
It's as if jquery mobile is performing some operation on the result? I don't want this to happen. Do I have to return a valid jquery mobile HTML page from my PHP?
Any insight greatly appreciated.
Many thanks in advance,
Solution: use <input type="button" id="login_submit" data-theme="a" value="Submit" />
Now I can capture click events via:
<script>
$(document).ready(function() {
$("#login_submit").click(function() {
alert('clicked');
});
});
</script>
using data-ajax="false" in form.
then you can disable jquery mobile auto ajax call