So i'm trying out MVC after only playing with it some time ago.
Need to find the best way to selectively show and hide sections (divs, etc) on clicking or changing a value of a control, but not having to post back, i.e. javascript?
Any suggestions.
Use jQuery. You can use a jQuery Event to detect a click and then hide or show divs.
So, You have a button called "HideDiv" and "DivToHide" is the div you wish to hide.
$("#HideDiv").click(function() {
$("#divToHide").hide();
};
It's that easy. Can't really go in-depth here but check out their tutorials: http://docs.jquery.com/Tutorials or browse this site: http://www.learningjquery.com/category/levels/beginner
jQuery actually comes with ASP.Net MVC, check the scripts folder of a new MVC project and you'll see it in there. This site using jQuery and MVC :) So your browsing a sample of what is possible with it
You can use jQuery. It is included with the standard MVC project template.
$("#myButtonId").click(function () {
$("#myDivId").toggle();
});
See more at the jQuery docs for toggle.
You can do the same way as you are doing it with normal ASP.NET application using JavaScript. I think JavaScript is best as its fast and works on client-side.
If you are having a specific requirement then please put the specific requirement here.
You can use jQuery or MooTools if you want some animation.
Related
I am trying to create a javascript bookmark that will remove a side navbar from a website that I use, but cannot seem to be able to remove it.
The navbar element id I would like to hide is is:
ul.nav.navbar-nav.side-nav.col-md-2
I have tried a few ways from researching online, but with no luck. How can I accomplish this?
Here is my attempt:
javascript:(function(){('ul.nav.navbar-nav.side-nav.col-md-2').hide()})();
This is an internal portal website that I use.
I am trying to modify/remove the menu once the site is loaded via the browser in the form of a javascript bookmarklet, and am not editing the site's code myself.
Without an example of the problem or website it won't be very clear/easy for anyone to help.
But one obvious issue I see is that you are not actually referring to an element directly, you just placed a CSS selector in brackets:
('ul.nav.navbar-nav.side-nav.col-md-2')
You probably want to use jQuery to get the element:
$('ul.nav.navbar-nav.side-nav.col-md-2')
Or if jQuery is not available:
document.querySelector('ul.nav.navbar-nav.side-nav.col-md-2').style.display = 'none';
I have downloaded a jquery scheduler and wanted to see it working. Unfortunately they dont have any info on how to implement it or get it working.
The Github page is here.
Its a widget however I am unsure how to make it work. I created an Asp.net mvc project and a page for it and thought it was to do with the id for a div but I had no luck.
How do I get this to work in an Asp.net mvc page?
Your questions is probably gonna get closed, but this is how you would use it, based on the source code:
$("#yourElement").scheduler({scheduleStart:'07:00',
scheduleEnd:'20:00',
overlap:true,
newEventAdded:function($event, data){},
eventChanged:function($event, data){},
eventClicked:function($event, data){},
initNewEvent:function(){
return {};
});
I am building a webpage using Bootstrap 3. I am trying to find the best way to change the main content of the side. I have a Header, left content and right content but I want to change the middle content by pushing a button without changing the surrounding elements. What would be the best thing to use to accomplish this. Is there some demos online that someone can point out? I have been trying to find some but without luck.
Bootstrap doesn't have that feature. First try to learn what bootstrap can do or can't, what bootstrap made for.
What you are trying to do is called templating. You can use php, ajax or other methods to dynamically add content to your content section of your template.
You have many ways to do that, maybe with jQuery .load() and maybe combined with HTML5 history API or some other framework...
But Bootstrap has nothing to do with that..
You can start reading about AJAX and DOM manipulation first, but here is some link you can use:
Dynamically Loading Content in Twitter Bootstrap Tabs
You cannot do that with boot strap that is just not what it's made for you can use either PHP or Ajax personally if you know PHP already and have everything set up for go with that because in my opinion Ajax sucks to learn and work with
I'm creating an app using phonegap that pulls the majority of its content from a database. It has a few hundred pages so I thought the best option would be to use a single page solution and just keep loading content into the main div when needed.
I have tried using Handlebars to do this but I'm not sure if that was the best solution as I cant get jquery mobile working with it (the app needs lots of accordions). Have also tried creating my own very simple accordions but failed dismally to even get an onlcick event working within the handlebars script tags.
Can anyone recommend a build that would be good for this job please? Or guide me to some example solutions that are along these lines?
I have googled extensively for 2 days now and have tried quite a few suggestions out but no success so decided to post here.
Many thanks
Generate all the content into your div, but using css hide almost all of them. As the user does what needs to be done to activate your paging call the show() function for the first 10 elements, if you consider 10 to be a page.
Use List View pattern of jquery
// adding data on list view
$('#list_view').append('<li >' your data '</li>');
//refreshing list
$("#list_view").listview("refresh");
//removing elements from list
$("#list_view").empty();
You can use multiple div's as well in the list view
use below link for more:
http://api.jquerymobile.com/listview/
(I've tried posting this on YUI message group but without any luck)
Can anyone tell me how to retrieve the checked state of a yui Button? I've tried by creating the Button in code, which is then outputted as a HTML button but this only changes the title attribute.
When I use checkboxes instead, none of the checkboxes are checked (when iterating through them with jQuery).
Is there an easier way of doing it? Say with the 3.0 Node API, or Element?
EDIT:
To clarify how this problem came about, I'm using the YUI ASP.NET controls. They add controls to the page like this
Sys.Application.add_init(function() { $create(YUIAspNet.Button, {"ButtonID":"yuiMyButton_btn","ButtonName":"yuiMyButton$btn","TabIndex":0,"ButtonType":"checkbox","Text":"Technology"}, null, null, $get("yuiMyButton"));});
So as you can see, finding all buttons is not as simple as I'd like it to have been.
Sorry are you talking about checkbox buttons? Use:
myButton.get("checked")
where myButton is an instance of YAHOO.widget.Button.
Chris, I am the starter of YUI ASP.NET project. I watch the YUI mailing list regularly, I must of missed your question.
I have a more general answer for you and anyone else having the problem and ending up reading this, not just for checkbox button, but for all controls.
On the client, you can have access to the YUI object by calling the .get_YUIControl() method on the custom wrapper client object, then you have the control over the original YUI object. The YUI documentation is very good, and you can find a good description for what you'd like to accomplish.