I have defined an select on top of my page which shows pageSize(item list pr page)
<select name="ddlPageSize" style="text-align:left;width:80px;">
#for (var i = 5; i <= 100; i=i+5){
<option>#i</option>
}
</select>
now when i wants to set page size in pagging link like.
<div style="width:inherit; padding:15px 0; clear:both;">
<ul style="text-align:center">
#for (int i = 0; i < (int)Math.Ceiling((decimal)totalCount / (decimal)pageSize); i++)
{
int page = i + 1;
string background = "transparent";//transparent
if (pageNo == page)
{
background = "grey";
}
<li style="display:inline; font-size:14px; color:#000; font-weight:bold; font-family:'VAGRound';padding:0 0px; background-color:#background; ">
#page
</li>
}
</ul>
</div>
in html anchor i wants to pass selected page size too with page Number
#page
You will need to change the url on ddlPageSize selected index change in jQuery.
Here is a link for the same
How to change the href for a hyperlink using jQuery
First of all add some class over your anchor so that you can easily get your Item in jQuery as.
<a class='apager' href="~/Admin/Userspagging?page=#page">#page</a>
and use jquery as below
$("#ddlPageSize" ).on("change", function() {
var selectedValue=$(this).val();
$(".apager").each(function(item,index){
item.attr("href",item.attr("href")+"&pageSize="+selectedValue);
});
});
Note that this is just an idea not implemented so far.
If you want to update the anchor link based on user selection, it will have to be done client side.
Also use the data attributes for the URL. You know you will update the URL with just the current page.
<a id="LINKID" data-url="~/Admin/Userspagging?page=#page" href="">#page</a>
Attach a function to the change event of the dropdown.
$("#ddlPageSize" ).on( "change", function() {
$("#LINKID").attr("href", $("#LINKID").data("id") + "&size=" + $("#ddlPageSize").val())
});
something like that...
Related
I have an ASP.NET web forms page that uses jQuery UI tabs. Within each tab there are sets of inputs, including a button that submits the inputs within the tab (using an AJAX call, but that's not relevant to this discussion).
I want to attach the jquery validation engine (https://github.com/posabsolute/jQuery-Validation-Engine) to only the subset of inputs that comprise the tab contents, however, because of the way ASP.NET web forms works, there is only a single form element and the validation engine must attach to a form.
Is there a simple way to tell this validation engine to include the currently visible tab/elements in the validation call?
Edit to the response:
What you are looking for is even easier!!! If you simply want to validate fields on the tab the user is currently on without restricting them to go to other tabs, then ignore the tabs beforeActivate part of the code I provided, and initialize your jQuery Validation Engine to ignore validating non-visible fields which is what they will be for all non-active tabs. Your code would look like this:
jQuery("#myForm").validationEngine('attach', {
promptPosition: "bottomLeft",
validationEventTrigger: "submit",
validateNonVisibleFields: false // this does the trick!
});
Here is the new JSFiddle to illustrate the example: http://jsfiddle.net/T7daH/
Cheers! :-)
------------------------------------------------------- Original Answer -----------------------------------------------------
There is actually a pretty straightforward way to implement the jQuery Validation Engine with a form that spans multiple tabs without having to programmatically trigger validation on each field or tab click.
If you have the following form that spans multiple tabs...
<form id="myForm" action="">
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1">
<input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
</div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
Then you set up the form and tabs like this:
jQuery("#myForm").validationEngine('attach', {
promptPosition: "bottomLeft",
validationEventTrigger: "submit",
validateNonVisibleFields: true,
updatePromptsPosition: true
});
$(function () {
$("#tabs").tabs({
beforeActivate: function (event, ui) {
if (!$("#myForm").validationEngine('validate')) {
event.preventDefault();
$('#myForm').validationEngine('hide');
setTimeout(function () {
$("#myForm").validationEngine('validate');
}, 450);
}
}
});
});
The result is that the user cannot select another tab if the tab the user is currently on is not fully valid. Here is the JSFiddle demo: http://jsfiddle.net/g9yLL/36/
Cheers! :-)
I had a website with a form with multi-tab and solved it using this:
$(document).ready(function(){}
$('#tab1').click(function(){
// #tab1 name of the tab / a href link inside that tab
var field1 = $("#field1").validationEngine('validate');
var field2 = $("#field2").validationEngine('validate');
if(field1 || sources )
{ // to show the error messages ;
return false;
}
});
$('#tab2').click(function(){
// #tab2 name of the tab / a href link inside that tab
var field1 = $("#field1").validationEngine('validate');
var field2 = $("#field2").validationEngine('validate');
if(field1 || field2 )
{ // to show the error messages ;
return false;
}
});
);
For more information check https://github.com/posabsolute/jQuery-Validation-Engine and search for field validation under validate heading.
I am replacing this 'hand-rolled' tabstrip with the Telerik Extensions Tabstrip below it, but I can't fathom how to get the Tabstrip to include the target attribute in the URL for each item. How can I achieve this?
Before:
<ol>
#foreach (var sheet in Model.Sheets)
{
<li>
#sheet.Name</li>
}
</ol>
After:
#Html.Telerik().TabStrip().Name("Card").BindTo(Model.Sheets, (item, tabInfo) =>
{
item.Text = tabInfo.Name;
item.Url = Url.Content(Server.MapUrl(tabInfo.FilePath));
})
You could use the LinkHtmlAttributes property to set additional html attributes:
item.LinkHtmlAttributes = new Dictionary<string, object>
{
{ "target", "selected-worksheet" }
};
Actually I've never used Telerik, so I am not quite sure if you have to instantiate a new dictionary or simply add a key (in case the property is automatically instantiated):
item.LinkHtmlAttributes["target"] = "selected-worksheet";
I think I had a similar problem with the Telerik TreeView and solved it via a detour with jQuery.
My problem was, that it didn't work to pass any (Link)HtmlAttributes, to the TreeViewItems in the View. I tried to add several HtmlAttributes to the TreeViewItem in the Controller: (e.g. one attribute I wanted to add to the < a > element):
newNodes[i].HtmlAttributes.Add("data-ajax-update","#main");
, but after return as JsonResult of the Ajax-Request, all except .Text, .Value, .Enabled, .LoadOnDemand, .Url were then empty in the View.
I found a sensible answer that these elements are not getting serialized in the Telerik forum:
http://www.telerik.com/community/forums/aspnet-mvc/treeview/target-blank-on-treeviewitem-url.aspx#1548458
I solved it then, with adding a special
<span class="treeViewItemAddAjaxLocation"></span>
element to the .Text of the TreeViewItem. Locating these elements then via jQuery in the View and adding the desired html-attributes to the < a > element.
Telerik TreeView Binding method of the 2nd and 3rd stage elements via Ajax:
.DataBinding(databinding => databinding.Ajax().Select("_AjaxLoading", "Menu"))
Controller snippet in Action "_AjaxLoading":
IList<TreeViewItem> newNodes = new List<TreeViewItem>();
foreach (RevisionEntity revision in revisions)
{
newNodes.Add(new TreeViewItem()
{
Text = "Node Name" + "<span class='treeViewItemAddAjaxLocation'></span>", // name + locator element
Value = revision.ID.ToString() + ";RevisionEntity",
Encoded = false,
Enabled = true,
LoadOnDemand = false,
Url("/Menu/NavigateToRevisionDetails"), // creates an < a > element
});
}
return new JsonResult { Data = newNodes };
View:
<div class="t-bot">
<a class="t-link t-in" href="/Menu/NavigateToRevisionDetails" data-ajax-update="#main" data-ajax-mode="replace" data-ajax-method="GET" data-ajax="true">Node Name
<span class="treeViewItemAddAjaxLocation"></span>
</a>
<input class="t-input" type="hidden" value="774336a5-c6eb-42cc-905a-4d215c957fa2;RevisionEntity" name="itemValue">
</div>
function TreeView_onLoad(e) {
var treeView = $(this).data("tTreeView");
$(".treeViewItemAddAjaxLocation", treeView.element)
.each(function () {
var $this = $(this); // put it in jQuery constr
item = $this.closest(".t-link"); // take the a
item.attr('data-ajax-update', '#main');
item.attr('data-ajax-mode', 'replace');
item.attr('data-ajax-method', 'GET');
item.attr('data-ajax', 'true');
$this.remove(); // removes the span element
});
}
Result TreeView element:
<div class="t-bot">
<a class="t-link t-in" href="/Menu/NavigateToRevisionDetails" data-ajax-update="#main" data-ajax-mode="replace" data-ajax-method="GET" data-ajax="true">Node Name</a>
<input class="t-input" type="hidden" value="774336a5-c6eb-42cc-905a-4d215c957fa2;RevisionEntity" name="itemValue">
</div>
Loads the PartialView invoked through "NavigateToRevisionDetails" Action via Ajax in the #main html-element and the rest of the page doesn't get refreshed!
I want this type of toggle button please click the link below to see my requirement :
http://www.redbus.in/Booking/SeatSelection.aspx?rt=4017230&doj=30-Nov-2010&dep=04:55%20PM&showSpInst=false
You can use PrettyCheckBox
or you can build it yourself with a bit of JS (better if you use jQuery)
Steps:
with asp.net render all the checkbox you need and specify an ID (different for each) and a name for each, set also class. Render also a LABEL with "for" attribute correctly set. in the label put what should be your checkbox (images/links etc)
for the check class, set css display:none
with jquery bind the click event of each label, in the event raise the CLICK of the related checkbox (so it works also in IE), get the status of the checkbox and update the attributes (class is the best) of the content of the label.
in code is:
CSS:
.seatcheckbox{
display:block;
height:16px;
width:16px;
}
.checked {
background-image: url(chair-red.png)
}
.unchecked {
background-image: url(chair-gray.png)
}
input.hidden{ display:none;}
HTML rendered by asp.net
<input type="checkbox" id="chk1" name="Seats" value="1" class="hidden" />
<label for="chk1"><div class="seatcheckbox"></div></label>
JQERY script in the same html rendered by asp.net
<script type="text/javascript">
$(document).ready(function(){
$('label').each(function (index, object) {
if ($(this).attr("for") != "") {
var ctl = $("#" + $(this).attr("for"));
if (!ctl.is("input[type=radio]") && !ctl.is("input[type=checkbox]")) {
return;
}
ctl.css("display", "none")
$(this).click(function (e) {
try {
if ($.browser.msie) {
ctl.click();
}
var lbl = $(this);
setTimeout(function () { adg_ChecksRefresh(lbl); }, 1)
} catch (ex) { }
});
});
function adg_ChecksRefresh(lbl) {
var ctl = $("#" + $(lbl).attr("for"));
var name = ctl.attr("name");
var id= ctl.attr("id");
var checked = ctl.is(":checked");
if (checked) {
$(lbl).removeClass("unchecked");
$(lbl).addClass("checked");
} else {
$(lbl).removeClass("checked");
$(lbl).addClass("unchecked");
}
}
</script>
Don't forget to include this in your HEAD tag:
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
If you intend to use it also for RADIO BUTTON replace the entire function adg_ChecksRefresh(lbl) with this code:
function adg_ChecksRefresh(lbl) {
var ctl = $("#" + $(lbl).attr("for"));
var name = ctl.attr("name");
var id= ctl.attr("id");
var checked = ctl.is(":checked");
if (ctl.is("input[type=radio]")) {
$("input[name=" + name + "]").each(function () {
$("label[for=" + $(this).attr("id") + "]").removeClass("checked").addClass("unchecked");
});
}
if (checked) {
$(lbl).removeClass("unchecked");
$(lbl).addClass("checked");
} else {
$(lbl).removeClass("checked");
$(lbl).addClass("unchecked");
}
}
the main JS is tested to work with all primary browser. but i wrote in live the html that have to be generated. hope it works all!
Byes
What particular aspect of the seat picker control do you need? Is it simply that you wish to alternate between 2 images based on the user clicking them? If so then you can simply use the toggle function of jquery to alternate between 2 classes or else set the src of an image each click.
// Include jQuery in your page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
// Create a script block for the toggling
<script type="text/javascript" language="javascript">
$('#seat').click(function() {
$(this).find('img').toggle();
});
</script>
// Create your markup for the images.
<div id='seat'>
<img id="empty" src="empty_seat.png" alt="" width="100" height="123" style='display:block;' />
<img id="occupied" src="occupied_seat.png" alt="" width="100" height="123" style='display:none;' />
</div>
i am using asp.net ajax tab container[ which has 2 tab panel]
under each tab panel i have an div tag. now by default.i have my Activetabindex="0"
now i need to enable css property for the div tag using javscript so that there is no post back happening. i doing like this css property for the tab panel 1 is not getting applied
this is my script what i doing. if i do the same thing in code behind for the ta selected index change it works. but thatcause an post back.
now i need t o do it my javscript only
OnClientActiveTabChanged="PanelClick"
<script type="text/javascript" language="javascript">
function PanelClick(Sender, e) {
debugger;
var CurrentTab = $find('<%=Tab1.ClientID%>');
if( Sender._activeTabIndex==0) {
debugger
document.getElementById('<%=mycustomscroll2.ClientID%>').className = '';
document.getElementById('<%=mycustomscroll2.ClientID%>').Enabled = false;
document.getElementById('<%=mycustomscroll.ClientID%>').className = 'flexcroll';
}
if (Sender._activeTabIndex == 1) {
debugger
document.getElementById('<%=mycustomscroll.ClientID%>').className = '';
document.getElementById('<%=mycustomscroll.ClientID%>').Enabled= false ;
document.getElementById('<%=mycustomscroll2.ClientID%>').className = 'flexcroll';
}
}
</script>
so how to i enable my css property for the div using javascript for the tab panel
anyhelp would be great
thank you
Here is a javascript function which will sort of do what you want:
function PanelClick(Sender, e) {
var scroll1 = $get('<%=mycustomscroll.ClientID%>');
var scroll2 = $get('<%=mycustomscroll2.ClientID%>');
if(Sender._activeTabIndex == 0) {
scroll1.setAttribute('class', 'flexcroll');
scroll2.setAttribute('class', '');
} else if(Sender._activeTabIndex == 1) {
scroll1.setAttribute('class', '');
scroll2.setAttribute('class', 'flexcroll');
}
}
There really is no such thing as "enabled" in HTML and JavaScript. HTML has a "disabled" attribute, but it only applies to these elements: button, input, optgroup, option, select and textarea. It is used like so:
<input type="text" name="txtSomething" id="txtSomething" disabled="disabled">
and in JavaScript, similar to setting the class attribute, above:
$get('txtSomething').setAttribute('disabled','disabled'); // disable the input
$get('txtSomething').setAttribute('disabled',''); // enable the input
But this will not work for other elements like <div> and <span> tags.
I will show the problem with a example.
There is some text in the textbox such here:
Hi! this is a example [lnk]text[/lnk]
When i push the submit button and publish this text, the word in the [lnk] and [/lnk] tags must be a link like this www.mysite.com?link=text.
How do I make it easily with javascript or jquery?
Note: I'm not so good about javascript.
This will do the javascript for you - not sure if you need to do anything special for asp.net
<form onsubmit="return doLinks(this.elements['links']);">
<textarea name="links" rows="20" cols="80"></textarea>
<input type="submit">
</form>
<script type="text/javascript">
function doLinks(elm)
{
var matches = elm.value.match(/\[link\](.*?)\[\/link\]/gi);
for (var i = 0; i < matches.length; i++)
{
var url = 'http://www.mysite.com/?link=' + encodeURIComponent(matches[i].substring(6, matches[i].length - 7));
elm.value = elm.value.replace(matches[i], url);
}
return true;
}
</script>