I need to implement search functionality in my app(same as note pad control F).I have group of data i need to search whether it present on not .Data is not in list view .it in like we write some thing in note pad then we search on any work.Is this possible.?
can you please tell me how to do.?
please provide some example.
Maybe you could use the window.find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog)
aString: The text string for which to search.
aCaseSensitive: Boolean value. If true, specifies a case-sensitive search.
aBackwards: Boolean. If true, specifies a backward search.
aWrapAround: Boolean. If true, specifies a wrap around search.
aWholeWord: Boolean. If true, specifies a whole word search.
aSearchInFrames: Boolean. If true, specifies a search in frames.
aShowDialog :Boolean. If true, specifies a show Dialog.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Nested List</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
function findText (str)
{
if (str === "") {
alert ("Please enter some text to search!");
return;
}
if (window.find) {
window.find (str, false, false, true, false, true, false);
}
}
$(document).on('click', '#search', function () {
findText("blah");
});
</script>
</head>
<body>
<div id="list-page" data-role="page">
<div data-role="header">
<h1>Find Page</h1>
</div>
<div data-role="content">
<label for="search-field">Text Input:</label>
<p> blah this is a test blah this is a test blah</p>
<input type="button" name="search" id="search" value="Search"/>
</div>
</div>
</body>
</html>
Related
Does Select2 now have a prerequisite requirement for require.js or something as from the 4.0.0-rc.2 version from cdnjs.cloudfare.com I keep getting an error in select2.js on line 4582-
Uncaught ReferenceError: require is not defined.
My code is fairly straightforward:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Test Select2</title>
<link href="/css/normalize.css" rel="stylesheet">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css">
</head>
<body>
<!-- Main content -->
<section class="content">
<form method="POST" action="http://test.local/test" accept-charset="UTF-8" role="form">
<div class="form-group minimal">
<span class="col-xs-3 control-label minimal"><label for="Test">Test:</label></span>
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<input type="hidden"
id="test_select2"
class="input-xlarge form-control minimal select2"
data-placeholder="Search ACME"
data-minimumInputLength=3
data-width="copy"
data-containterCssClass="form-control minimal"
data-dropdownCssClass="alert-danger"
data-allowClear="true"
data-delay=250>
</div>
</div>
</section>
<!-- scripts -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery/2.1.3.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#test_select2").select2({
ajax: {
url: "/admin/test",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
}
});
});
</script>
<//body>
</html>
This is a known issue in Select2 4.0.0-rc.2 that only affects people using Select2 with an <input /> element.
https://github.com/select2/select2/pull/3192
The problem is that the internal require calls were moved to a namespace in 4.0.0-rc.2 and we missed one call.
You can either stick with 4.0.0-rc.1 until Select2 4.0.0 is released (soon) or start converting your pages to use a <select> instead.
I'm currently building a mobile site for iPad using jquery mobile and ASP.NET MVC 4. I have a dynamically created listview that is displaying search results. I want the user to be able to click on an item in the listview and have the text from that particular list item appear in a textbox that is also in the view.
I can get this to work in Safari on my desktop machine, but it will not work on an iPad.
For the sake of simplicity and to attempt to narrow down the problem, I hard-coded a simple little listview in my View. The results were the same. Works on desktop in Safari, but not on iPad.
Here is the very simplified VIEW code that works in Safari on desktop (Please note that _Header is a separate, partial View):
#section Header
{
<script type="text/javascript">
$('#testJs li').on('click', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
#{ Html.RenderPartial("_Header"); }
}
#section Content
{
<input type="text" id="testText">
<ul id="testJs" data-role="listview" data-inset="true" data-theme="c">
<li id="task400" class="tasks">Test task 400</li>
<li id="task295" class="tasks">Test task 295</li>
</ul>
}
Please note that I have tried changing 'click' to 'tap' (see below) with no success. It still doesn't work on iPad.
<script type="text/javascript">
$('#testJs li').on('tap', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
I've also tried using the following with the same results. Still doesn't work on the iPad.
<script type="text/javascript">
$('#testJs').delegate('li', 'tap', function () {
var results = $.trim($(this).text());
$('#testText').val(results);
});
</script>
I do wonder if this has something to do with our use of layout pages. We have slightly different layout pages, depending on if the site is being rendered on a mobile device or not.
Mobile Layout View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobileCss", "~/Content/css")
<script type="text/javascript">
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header", false) }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
Desktop Layout View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header") }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
I've been stuck on this for a few days, so any help would be appreciated. Everything I try works on my desktop, but not on an iPad - which is where I actually need it to function.
Thanks!
Did you try using bind on your testJs li? I'd bind a tapHandler like below:
<script>
$(function(){
$( "#testJs li" ).bind( "tap", tHandler );
function tHandler( event ){
var results = $.trim($(this).text());
$("#testText").val(results);
}
});
</script>
or with on like this should work:
$('#testJs').on('tap', 'li', function (event) {
var results = $.trim($(this).text());
$("#testText").val(results);
console.log('this should work')
}
Also used double quotes on top example but that shouldn't make a difference I don't think. If it doesn't then make sure you .js references are correct, and use firebug in firefox to debug for any straggling errors.
I would like to create some resizeable and draggable div tags contain textarea tags with jQueryUI.And I also want to use nicEdit to format text inside these textarea tags.But i can't combine them,maybe.I can't edit text if i use $(element).resizeable().draggable().Here is my code:
<html>
<head>
<title>Trouble using jquery ui resizeable, draggable and nicEdit</title>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<script src="nicEdit/nicEdit.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var btnlist=['fontSize','fontFamily',
'bold','italic','underline','strikeThrough',
'left','center','right','justify',
'ol','ul','hr',
'indent','outdent',
'forecolor','bgcolor',
'subscript','superscript','removeformat'];
var myNicEditor = new nicEditor({iconsPath : 'nicEdit/nicEditorIcons.gif',buttonList :btnlist });
myNicEditor.setPanel('myNicEdit');
function ID()
{
var id="id";
var random_number=Math.round(Math.random()*1000000);
id+=random_number;
return id;
}
$('#a').click(function(){
var id=ID();
$('#content').append('<div class="d" style="width: 100px;height:100px;"><textarea style="width:100%;height: 100%" id='+id+'></textarea></div>');
myNicEditor.addInstance(id);
jQuery('.d').draggable().resizable();//If i remove this line,it work ok.
});
});
</script>
</head>
<body>
<div>
<button id="a">Add</button>
<div id="myNicEdit" style="width: 200px;" ></div>
<br />
<div id="content">
</div>
Can anyone give some solutions for me!Thank a lot!
</div>
You need to add 'handle' option when you apply draggable, so that it doesn't highjack the onmousedown event on all the child elements.
I used jquery ui from this link http://jqueryui.com/demos/dialog/#animated for dialog which is not working in MVC4 application
This is my View
#{
ViewBag.Title = "Dialog";
}
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>
This is an animated dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Dialogs may be animated by specifying an effect for the show and/or hide properties.
You must include the individual effects file for any effects you would like to use.</p>
</div>
<!-- End demo-description -->
<div class="demo-description">
<p>
A modal dialog prevents the user from interacting with the rest of the page until
it is closed.</p>
</div>
<!-- End demo-description -->
You're not wiring up your javascript. Try this:
$('#dialog').dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$(document).ready(function(){
$('#opener').click(function () {
$('#dialog').dialog("open");
return false;
});
});
(remove the opening "$(function () {" and the closing "});" pair to this - your code wants to look like above.
Add $(documnet).ready and then define your function in it . . ..
$(document).ready(function () {
code goes here . .
});`
I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method 'ON'. The code is at http://jsfiddle.net/H4Q5f/
As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>
</head>
<body>
<div data-role="page" id="MyTestPage">
<div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
<h1> Page Title </h1>
</div>
<div data-role="content">
<div class="content-primary divcontent">
<h1 class='h1title'>Using This App</h1>
<p> Here are the instructions </a>
</p>
</div>
<div class="inputdata">
<br /> <br />
<input type="text" name="accessCode" id="AccessCode" value="" placeholder="Access Code:" /> <br />
<input type="text" id="ssn1" class="ssn" value="" placeholder="SSN1:" /> <br />
<input type="text" id="ssn2" class="ssn" value="" placeholder="SSN2:" /> <br />
</div>
<input type="button" id="myalert" value="Next" />
</div>
<!-- /content -->
</body>
</html>
And here is the java script
if (typeof TEST == "undefined" || !TEST) {
var TEST = {};
}
( function() {
TEST.mkwr = {
init : function() { // this is a public function
$("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
$("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
},
// On Blur, we need to add the '-'s if they doesn't exist so the user
// view edit the entered value formatted
ssnOnBlurHandler : function(input) { // Auto format SSN on blur
if ($(input).val().length == 9) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(3, 5);
var _ssnSegmentC = _ssn.substring(5, 9);
$(input).val(
_ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
}
}, // _ssnOnBlurHandler
// On focus, we need to remove the '-'s if they exist so the user
// can edit the entered value
ssnOnFocusHandler : function(input) {
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if ($(input).val().length == 11) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(4, 6);
var _ssnSegmentC = _ssn.substring(7, 11);
$(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
}
}, // _ssnOnFocusHandler
// Hide all errors
hideError : function() {
$(".error").hide(); // Hide all errors
},
setHandlers : function() {
alert("Set Handlers");
// $(".ssn").each( function() {
// var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
// });
// $(".ssn").each( function() {
// var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
// });
}
};
})(); // end the anonymous function
$("[data-role='page']").bind("pageinit", TEST.mkwr.init());
I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.
http://jsfiddle.net/H4Q5f/10/
The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))
which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler)
So now you are passing the handler to the set method so that it will fire when the event takes place.
Hope this makes sense.
The .on() function was introduced in jQuery 1.7. The code you've posted above includes jQuery 1.6.4 (<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>), which doesn't have that function. You can either upgrade to the latest version of jQuery (recommended) or use the equivalent function - .bind() - for the older versions.