I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr
Related
I have an ASP.NET project (non-MVC) and I'm also using Bootstrap 3.0. This is my first time using this combination and need some guidance.
I have a gridview with a buttonfield column. Right now everything is showing up just fine with my gird and Bootstrap table formatting and its binding to my datatable - no problems there.
Next, I want to make the click of the button in the Buttonfield column to initiate a modal window and display a modal based on a unique ID from the row button that opened it.
I don't really know how to tie this all together with ASP.NET and Bootstrap. HTML literals? Dynamic ASP.NET panels? It doesn't matter to me whether there is a postback or not, I'd really just like some guidance or even pseudo-code on how these can be tied together.
Since the OP specifically requested bootstrap help...
You should go through the bootstrap documentation for modals http://getbootstrap.com/javascript/#modals
It makes no difference if you are using MVC or not and you should not need to do any kind of post back to display the modal.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
Will trigger element with id myModal to be shown.
Using bootstrap's own demo code in this jsfiddle demonstrates opening and dismissing the modal.
For the second part of the question, this updated jsfiddle shows how you can also use the button click event to set a value in the modal. You could do other actions in that event handler like get or send data to the backend or change other elements in the modal.
For your case, you would want to handle all button clicks in a single event handler but you can store the id in a custom attribute on the button element. I like to use custom attributes instead of parsing from name, id, or class attributes. This is the bootstrap convention.
$(function() {
$('button.btn').on('click', function() {
var value = $(this).attr('data-value')
$('div.modal').find('#target').text(value);
});
});
Here I have broken out how to get the custom attribute value from the button instance which was clicked.
Post what you have so far and what you still can't get working.
This also shouldn't be tagged with C# or asp.net as that is irrelevant.
You might need a simple js function to take care of that(as mike mentioned this has nothing to do with using or not using bootstrap since it is just some css stuff):
var RunDialog;
$(document).ready(function () {
RunDialog = $("#Id").dialog();
});
You can use ASP.Net Ajax ModalPopup for ASP.Net Web Form. You can google a lot of examples regarding GridView with ModelPopup.
ModalPopupExtender inside a GridView ItemTemplate
I want to make the click of the button in the Buttonfield column to
initiate a modal window and display a modal based on a unique ID from
the row button that opened it.
ModalPopup should work with Bootstrap.
My Question
I managed to answer myself, however the same set of functionality has another problem. For some reason the first postback of the save event of the posted file hits the Ol' Object not set to an instance of an object error, but on the second attempt of uploading a file and firing my save event (converts to byte[] an stored as SQL Server BLOB) it does everything is supposed to do.
Same problem here
There is a good suggestion of using the AJAX AsyncUpload control however I am a firm believer of removing the cause and not treating the problem. I will continue down this route to best my understanding of asp.net etc.
Would there be a wizrd amongst you that could help me identify why I get "object ref not set to inst of obj" error on first postback but on second it works fine. Content page has a master page which wraps content page in an update panel. Not my decision to do this. There is also an update panel with postback triggers targeting my save event.
What are your thoughts people?
The problem (as seen here http://forums.asp.net/t/1060363.aspx) seems to be when you use the visibility property on the surrounding panel (as it seems you are from the linked question).
The suggested workaround is to use CSS visibility instead so use this to make it invisible -
<asp:Panel ID="pnlUpload" runat="server" class="workerDetailsPanelLeft" style="display:none">
The explanation for this from the thread is
If your container is set to invisible, the upload control is not actually rendered as HTML, causing the form's enctype not to be set to enctype="multipart/form-data", causing the file upload control not to post the selected file back to the server. The workaround is either to make sure the FileUpload control is rendered to HTML (by setting its style to display:none in stead of Visible=false), or by manually setting the enctype
So another workaround would be to alter your form tag to this
<form id="form1" enctype="multipart/form-data" runat="server">
I think either one of those should solve your problem.
You could do the same thing via code on Page_Load event.. Enter this code and it will solve the issue.
Page.Form.Attributes.Add("enctype", "multipart/form-data");
I am working with a website that has javascript that does some changes on the page load. However, when I load the page and handle the DocumentCompleted event, this change isn't there. If I then continue paste the DocumentCompleted event, I can see the change happen. However I need this change to happen during DocumentCompleted so I can check some things.
Is there an other event I can subscribe to, or a way to cause the webBrowser to do all the javscript on page?
Edit: This is what I am talking about.
I loaded a sample page just to show you, and clicked the submit button with all fields empty to generate an the error.
Here is the result:
http://s8.postimage.org/zfv6stcar/sfsdfsdfds.jpg
Now if I take the HTML at that precise moment from that WebBrowser control, and render it somewhere else, those errors go away. The same thing happens when the server sends back those errors. If I handle the DocumentCompleted event and take the html, it isnt there. But after the event, it shows up in the control.
Hope you understand, it's hard to explain.
The problem seems to be that the DocumentCompleted event is being fired before the javascript. You should do some reading on how client side/server side things function.
One option is to make a separate method for the DocumentCompleted event and call it form the javascript after it has been completed. This would get the sequencing of these events working properly, but is not very ideal.
Alternatively, you could call the javascript code at the beginning of your DocumentCompleted event. The link below gives a pretty good explanation of how to go about that.
http://forums.asp.net/t/1117189.aspx/1
Personally, I would avoid using javascript and do the validation on the client side .NET, but I don't know enough about the website to really say.
EDIT:
This should be the script you are looking for. Alternatively here is a thread related to your issue. Sorry I don't have the exact code as I don't have a project to test this on.
http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript.aspx
Calling JavaScript Function From CodeBehind
RE-EDIT:
What is happening on the link you provided in the comments, is that each textbox is calling some javascript as well as the submit button. The best way to examine this is using the "Inspect Element" in the right-click menu on Google Chrome. For example, doing this on the textbox would show that it is registered with a few events:
onfocus="$('f_tip_Username').style.display = 'inline'"
onblur="$('f_tip_Username').style.display = 'none'"
onchange="$('f_err_Username').style.display = 'none'"
The first the element with the ID 'f_tip_Username', sets the display style of that element to inline (visible).
The submit button calls the following:
onclick="return o_edit_profile_form.validate()"
Doing a find on "o_edit_profile_form" in the source code, you can find the exact javascript location that is being called. Enjoy!
FINAL EDIT (hopefully?):
Follow these steps: go to your site, right click and go view source. Do a find for "f_tip_Username". This is the ID of one of the div tags being used. The third entry of it, should be a "div tag" that is used under the first textbox to warn of "min 3 characters".
You'll notice above that in the code is a input type "text" with the Name "Username". Notice the three events it has registered in it:
onfocus="$('f_tip_Username').style.display = 'inline'"
onblur="$('f_tip_Username').style.display = 'none'"
onchange="$('f_err_Username').style.display = 'none'"
These either hide or make visible, the div tag we found (f_tip_username) and also a separate div tag (f_err_Username) which is the error message div tag. Let me know if you are not able to find these in the source. Follow the steps I provided and you will find it in the "view source" OR in the DocumentText.
I am currently building a test harness for the company I work at. I have experience both with C# and WatiN and have never encountered the issue I am now having.
Below, is a snippet of the markup for the page giving me the issue:
<div id="toggle1" class="NavLayout toggle">
<span onClick="toggleMenu(1, false);">
<span id="toggletext1">Quote Processing</span>
</span>
</div>
As you can see, I have a div, 2 spans and an image. I am using WatiN to try and click the image, that will then expand the menu, exposing yet another layer that I will need to click something else on. The problem I am having is in getting the 'Click' to happen. From what I can see in the snippet, it seems to me I need to be able to click the event, but cannot 'find' it with the code.
Any help out there to be had?
I have also had issues with clicking on certain elements.
I've run into issues where I could only click on an element if it was highlighted by mousing over the element.
Since I cannot see your code snippet, I can't tell if there is any javascript that deals with mouseover associated with the image, but if there is, you can try the following:
img.FireEvent("onmouseover");
img.FireEvent("onmousedown");
img.FireEvent("onMouseup");
You might also might want to try img.FireEvent("onclick") as well.
These are all guesses, since I can't see your code. It's also possible that rather than clicking on the image element itself, that you may want to try clicking on the parent object.
EDIT:
Ok, now that I can see your code, it appears that you should fire an onClick event against the span with the 'onclick' code in it.
I don't see an image listed in your code snippet, but this code should call the parent of the lowest level span.
Watin.Core.Span span = browserinstance
.Span(Find.By("innertext", "Quote Processing"));
span.Parent.FireEvent("onclick");
The DOM content that you intended to post is not visible. You might want to edit your post and check if it is visible.
In order to click on images
Watin.Core.Image img = browserinstance.Image(Find By Constraint);
if (img!=null and img.Exists)
img.ClickNoWait();
OR
img.FireEvent("onclick");
I am using jQuery to simulate a popup, where the user will select a series of filters, which I hope to use to rebind a ListView in the original window.
The "popup" is opened via an ajax request and the content is actually a diferent aspx file (the rendered output is injected into a div that acts as the popup).
I have another ListView in this popup, and it has pagination.
My problem is that since the popup is in reality html content inside a div in the same page, when I try to paginate, the whole page postbacks and is replaced with the aspx that has the filters.
How can I fix this?
I tried using an update panel to contain the ListView but it didn't work.
$("div.yourthingie").hide();
Will hide the part you want to show :) Instead of generating the popup on the fly, leave a small part already made, and hide it in the begining, when you need to show, unhide and add the information you need to.
Hope it helps
Either get rid of the HTML "crust" and just produce the <div> with its contents, or use an IFRAME.
First, let's think through what is happening. When you submit the original page, you are taking a "normal" Request/Response trip to get the code. On the page is a JQuery AJAX bit that fires off what is essentially a modal dialog. The desired effect is the user plays with the new page until they have figured out their filters and submits back. The problem is this "modal page" loses information when someone paginates.
The solution to this is fairly simple, in theory. You have to store the "filters" in the popped up page so they can be resent, along with pagination information. OR you have to cache the result set while the user paginates.
What I would do to solve this is create a static page that has the "filters" in place and work out the AJAX kinks separate from having the page post back to a parent page. Once you have all of the AJAX bits working properly, I would then link it into the popup routine and make sure the pagination is still non-problematic. THe final problem is creating a JavaScript routine that sends back to the parent page and allows the parent page to send its JQuery bits back to the server.
I am not sure about the HTML DIV part of the equation and I think you can solve the problem without this solution. In fact, I believe you can make the "modal popup" page without invoking AJAX, if it is possible to either a) submit the filters to apply via the querystring or b) fake a form submit to the second page. The query string is an easier option, but it exposes some info. Faking a form submit is not that difficult, overall, but could be problematic with a popup.
I am just firing off some ideas, but I hope it spurs something for you.