I need to put an icon next to text field in jquery mobile.
<div data-role="fieldcontain">
<label for="card">Verification Number</label>
<input data-mini="true" type="text" name="card" id="card">
<a href="card.png">
<img src="questionicon.jpg">
</a>
</div>
First of all you have unclosed tags in your html code.
you have to close all the tags for the code working without errors.
the img and input tag are not close.
Here is a working Fiddle Demo for your needs
Have change a little bit your html code:
<div data-role="fieldcontain" id="myfield">
<label for="card">Verification Number</label>
<ul>
<li>
<input type="text" name="card" id="card"/>
</li>
<li>
<a href="#">
<img src="image.jpg" width="20px" height="20px" id="myimage"/>
</a>
</li>
</ul>
</div>
Related
I would like using JqueryUI tab with radio button.
Tab selection working well, but radio button selection don't work. Radio button still empty in my $_POST
Here is the source code :
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">
<label for="choice1">Nunc tincidunt</label>
<input type="radio" name="test" value="choice1" id="choice1" />
</a>
</li>
<li>
<a href="#tabs-2">
<label for="choice2">Protor lorem</label>
<input type="radio" name="test" value="choice2" id="choice2" />
</a>
</li>
</ul>
<div id="tabs-1">
My content 1
</div>
<div id="tabs-2">
My content 2
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Where is my mistake ?
I am working in Listview in jQuery Mobile dynamically. I can't make this design.
Code:
<li data-role="list-divider" role="heading">Category</li>
<li id="305"> <a href="#" class="achk">
<fieldset data-role="controlgroup" style="width:53px;">
<input type="checkbox" name="checkbox_attribute_0" id="checkbox_attribute_0" data-iconpos="notext" /> <label for="checkbox_attribute_0" action="selectAttribute" data="test"></label>
</fieldset>
<label onclick="viewMessage(305, 0);" class="lblImage" data-corners="false">
<fieldset data-role="controlgroup" style="height:0px !important">
<img alt="" src="img/letter.png" />
</fieldset>
</label>
<div onclick="viewMessage(305, 0);" >
<h4>Advanced-customization-Jquery-Mobile-Buttons </h4>
<p>Advanced-customization-Jquery-Mobile-Buttons</p><p>Date : November 15, 2013</p>
</div>
Delete
</a>
</li>
Here is the jsfiddle of the code I have done so far.
Add these lines in your function.
$("#inbox_list").trigger("create");
$("#inbox_list").listview("refresh");
Update Code
$('#dvCount').html(data.count);
//$('input[type=checkbox]').checkboxradio().trigger('create');
$('[data-role="listview"]').html( list ).trigger('create');
$('[data-role="listview"]').listview('refresh');
Hi can you please tell me how to hide and show a div in query mobile.
May be i have two solution use hide and show function.
Or use toggle class ?
here is my fiddle.
http://jsfiddle.net/ravi1989/3LEdJ/2/
I need to show or hide on click of "openclosebutton" .This div
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
<div class="ui-block-e">
close
</div>
</div>
The probem you have is the width of the text field. I suggest you to use a grid layout to achieve the desired effect:
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
</div>
See the documentation here.
I have the following listview with text boxes. I wanted to get the same feel as the ipad.
How do I align the text boxes so are right below one another. Currently it looks mismatched.
<ul data-role="listview" data-inset="true" style="width:30%;">
<li data-role="fieldcontain">
<label for="name">First Name:</label>
<input type="text" name="fname" id="fname" value="" />
</li>
<li data-role="fieldcontain">
<label for="name">MI:</label>
<input type="text" name="mi" id="mi" value="" style="width:5%;" />
</li>
</ul>
Don't know why you needed to set style for ul and input tags.
But I have put together a fiddle with different styling you can achieve.
http://jsfiddle.net/nachiket/nnRPv/
Does any one of it helps?
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.