I am using the jQuery plug in contentcarousel. It is a good plugin and all but I need the ability to dynamically create a certain number divs according to the user.
To achieve this I am using an <asp:panel> and then running a Literal & foreach in C# to populate the panel. The problem comes in when the <asp:panel> is used.
It seems as if the jQuery plugin can only work if the divs occur in a certain order.
ie.
<div id="ca-container" class="ca-container">
<div class="cawrapper">
<div class="ca-item ca-item-2">
<div class="ca-item-main">
When the panel is used, then the order becomes
<div id="ca-container" class="ca-container">
<div class="cawrapper">
<div id="panelinfo">
<div class="ca-item ca-item-2">
<div class="ca-item-main">
And the plugin stops working. At least I am assuming so due to the fact that the arrows dont show up, none of the buttons work, etc.
Does anyone know if there is a way around this? Maybe a way to "hide" the div that the panel becomes?
It sounds like you want to have a control that acts like a Panel in server side code, but instead of being rendered as a div just plops all of whatever would have been inside of it without adding anything "extra". That's pretty much the definition of an asp:Placeholder. Just use that instead of a Panel.
Try moving your JQuery code into window.load. I'm assuming you have your jquery in document.ready which will fire the second the dom is ready.
$(window).load(function(){/*Your code*/}
Related
I'm creating elements dynamically based on SQL data server side.
I want to also edit some of those element's attributes after their creation.
They way I'm trying to go about this is by generating a string with the elements and inserting it into a div's innerHTML:
client side:
<div id=master runat="server"></div>
server side:
string textToDiv = "<div id='" +num +"'><ul><li></li><li></li></ul></div>";
master.innerHTML = textToDiv;
Looks something like this in chrome:
<div id="master" runat="server">
<div id='1'>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id='2'>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
Now, I want to change one of the child div's attributes. How do i go about doing that?
All I found on the internet is for more static uses using the method I applied when changing the 'master' div's innerHTML attribute. Is there a get() function or something similar to document.getElementByID() I can use?
a better way to solve this, to just simply place your script under the html code, but still in the body, this will make sure, the script is just loaded, when everything was rendered to the screen, with this, you can instantly access the elements and you dont have to use the window.onload eventlistener
I think you need to use the onload event and then use a function for create the Element.
window.onload() => {
element = document.createElement(" ");
element.setAttribute(" ");
element.innerHTML = ' ';
document.getElementById(' ').appendChild(element);
}
I hope it's can help you
Update and my solution:
I ended up just changing the attribute when generating the string. Used if() statements to change only the element I wanted.
Also, I moved the whole thing into a function and I'm calling the function on page load.
That way I can update the content without reloading the page.
Is there a way i can add below css as inline css using C# from codebehind
CSS
.slide .btn_six::after {
content: " ECHNOLOGY";
}
HTML
<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">T</a>
</div>
I have to list multiple articles and each article belongs to a category and each category i have to show in an animated manner where only first caharacter of word will be visible and when user hovers over it it then reveal whole category name as shown in template link.
I want to do this using C# from the codebehind file itself as it will be easy
I looked for example but could not find any relevant example
Can't be done.
A hover event is only possible to do from the client side with JavaScript or by using CSS :hover selector. While it could be possible to wire it up to send a request back to the server to write a segment of HTML and then replace the HTML element in JavaScript, this would not be very practical. It is much simpler just to write the class on the client side without making a round trip to the server or better yet, just set a CSS :hover and be done with it.
I am currently working on a form. In the form, if there is not an item needed you can click the add button and it takes you to a new form where you can add the item. Instead of my view going to another page, I want it to pop up above the form so that the user can just quickly add the item and not have to travel pages.
Here is a snipit from my Create.cshtml
<div class="form-group">
<label asp-for="INT_CertificationsID" class="col-md-2 control-label"></label>
<div class="col-md-3">
<select asp-for="INT_CertificationsID" class ="form-control" asp-items="ViewBag.INT_CertificationsID"></select>
</div>
<a class="btn btn-default" asp-area="" asp-controller="INT_Certifications" asp-action="Create">Add Certification</></a>
</div>
When the add certification attribute is clicked I would like a box to pop up to the Create.cshtml for the certification. So that they may quickly add it to the list and continue to fill out the form.
I have looked up several examples to do this but most of them are either too old, too long, or don't work in .netcore due to nuget package errors with JqueryUI.
You need to make a controller method that returns the page you want in the popup as a PartialView.
I think you mean modal and not "popup"... you need to use a modal mechanism to create a modal window and get (or post) your partial via AJAX and use the result to display in the modal window.
I like bootbox which is a wrapper for bootstraps modal functionality.
I would load partial view in a hidden div together with the pages that needs them and dynamically display them with JavaScript when needed. Don't use forms to send http request, instead use AJAX.
Using pop-ups can work against you because browsers comes by default with pop-up blockers. Might work on your devbox but it could have a completely different behaviour somewhere else.
Using forms to send request requires the page to be reloaded which does not provide a good user experience.
Fix your solution, don't use nugget for client side script. Use bower instead. Here's a link https://learn.microsoft.com/en-us/aspnet/core/client-side/
Ok,
i have a fully rendered dynamic form ( i do not know the content of the form, it is provided to my via a webservice )
i used asp.net RequiredFieldValidator for validation, because i read in this article that we could dynamically switch validators on and off depending if the field is visible or not
with the ValidatorEnable(val, enabled) function.
though now that i got the form rendered, i'm running into a bit of trouble with this javascript, as i don't want to put it in the aspx file itself, (don't have a control there anyway since the form is build up in codebehind from the webservice data...)
so i took a look at the clientId and it turns out the validator's client ID is the id of the span it renders to.
so i tried running this in firebug to test if i could enable / disable one of those validators, but that seems not to be possible, a jQuery span element does not have a property to enable it.
ValidatorEnable($("#ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_reqAnswer_373ac8b7_8da9_467b_b9b4_d586e45a7504"), false);
and the html that goes with this
<div class="question-container question-odd" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_question-373ac8b7-8da9-467b-b9b4-d586e45a7504">
<div class="question-meta">
<h3 class="validation-label">Which club have you visited?</h3>
<span style="display: block; margin-bottom: 10px; margin-top: 5px;" class="error validation" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_reqAnswer_373ac8b7_8da9_467b_b9b4_d586e45a7504">Please fill out this field.</span>
</div>
<input type="text" class="answer-container text" id="ContentPlaceHolderDefault_MasterWithNavContent_Poll_4_answer_373ac8b7_8da9_467b_b9b4_d586e45a7504" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$MasterWithNavContent$Poll_4$answer_373ac8b7_8da9_467b_b9b4_d586e45a7504">
</div>
Does someone know where i'm going wrong here?
maybe I'm to quick to jump from the serverside ClientId to the <span> which the RFV renders into? but they seem exactly the same.
hope someone can point me in the good direction!
Maybe a better approach would be to loop through the client-side array of validators (Page_Validators) and find the validator which you want to disable.
See also this MSDN page and this codeproject article for more information.
Perhaps a more appropriate way to do this would be
ValidatorEnable($("<%= reqAnswer.ClientID %>")[0], false);
Using <%= reqAnswer.ClientID %> avoids having to guess at or hard-code the client-side ID of the validator. Adding [0] after the jQuery $() gets the actual validator DOM element instead of the jQuery wrapper.
Source for [0]
What is the easiest way to hide the Contents of an Update Panel when the UpdateProgress is invoked?
Here is a nice example doing this using Ajax Control Toolki
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server" TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
* TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target of the animations)
* OnUpdating - Generic animation played as when any UpdatePanel begins updating
* OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)
Also you may watch this video
I'm not sure if this will work but you can put script tags inside the progresstemplate and hide a div inside the updatepanel. It most likely won't un-hide when it comes back though.
You could catch the postback when it returns with javascript like so:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){
alert('postback returned');
});
Another way you can do it is make your content invisible at first like this:
<div id="content" style="display: none;">
</div>
Then end every update by adding this to the end of the content template:
<script type="text/javascript">
document.getElementById("content").style.display = "block";
</script>
I haven't tried this myself but I believe it should work.
EDIT -- I just realized this probably won't work quite like you want it to. The content will be invisible as its loading, and it'll become visible after it's done. But the content won't disappear until it receives that first byte from the server. That may or may not be the effect you're looking for depending on what kind of load times you're seeing.
this should help
http://www.asp.net/Ajax/Documentation/Live/tutorials/ProgrammingUpdateProgress.aspx