So, I really need some help, hope I can make myself understand.
I have a software were you can import data from csv and that data is shown in an html layout, that layout has a "submit" button that triggers the ajax with the method post.
Also, in that layout you can had some info, so a pop-up appears with the info to fill and this pop-up also have a "submit" button that triggers the ajax with the method post. (this pop-up is getting a layout that already exist in the software in a "normal / not pop-up" way).
My problem here, is that every time I click in the submit of the pop-up, instead of going to the POST of the pop-up it goes to the POST of the first form that is behind.
Any ideas how can I make him understand that I want the POST that is on the page of the submit button I'm clicking?
Layout of the import is in a html and the frame of the pop-up is also on the same page
Submit with the POST of the import and the POST of the pop-up are in different pages
The submit layout is equal to both case, but they are in different pages and the Ajax have different names.
#Using (Ajax.BeginForm("Controller",
"Name",
Nothing,
New AjaxOptions With {.HttpMethod = "POST",
.UpdateTargetId = "mydiv" + Model.MYMODAL.ToString,
.InsertionMode = InsertionMode.Replace},
New With {.id = "AJAX_ID" + Model.MYMODAL.ToString}))
#<div id="div_create__#Model.MYMODAL">
#Html.Partial("VIEW WHERE IS THE FORM", Model)
<hr />
<div class="btn-group-sm" style="margin-top:10px">
<button class="btn btn-info"
type="submit"
title="CREATE">
<i class="glyphicon glyphicon-plus-sign"></i>
<span>CREATE</span>
</button>
<button class="btn btn-default"
type="button"
title="CANCEL">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>#Translate.CancelAction_dsg</span>
</button>
</div>
</div>
End Using
</div>```
So, I changed the place where I had my pop-up and it suddenly works.
I think the place where I put my pop-up the html thought it was a form inside another form, and when I move it, the html was able to identify that there was different forms apart.
Thank you for the help.
Related
Am using vb.net in my asp.net project also bootstrap 4. I have two dropdown list inside a modal, when the user select an item from the first dropdown list, the second list will be sorted.
The problem is, when the user select from the first list the page will postback which casing the modal to disappear. I tried to use <asp:UpdatePanel></asp:UpdatePanel> tag, but it didn't work.
I would appreciate any help or suggestions! Here's my code:
<div class="modal fade" id="AddNew" data-backdrop="static" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New</h4>
</div>
<div class="modal-body">
<div class="row pb-3">
<div class="col-lg-6">
<asp:DropDownList ID="DropDownList1" class="browser-default custom-select form-control-sm" runat="server" AutoPostBack="true"></asp:DropDownList>
</div>
<div class="col-lg-6">
<asp:DropDownList ID="DropDownList2" class="browser-default custom-select form-control-sm" runat="server"></asp:DropDownList>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<asp:TextBox ID="TextBoxName" class="form-control" runat="server" placeholder="User Name..."></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<asp:DropDownList ID="DropDownListGroup" class="browser-default custom-select form-control-sm" runat="server"></asp:DropDownList>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="ButtonAdd" class="btn btn-primary btn-sm" runat="server" Text="Add" />
</div>
</div>
</div>
</div>
There is not much you can do here. A post back will blow out a jQuery.UI dialog, a ajaxtoolkit popup, and of course a bootstrap dialog.
This means and suggests that while you can pop a dialog and let a user choose or click on something? That action can be though as ALSO the means to close that dialog if the user choice is to cause a post-back (saves you having to write code to close the dialog!!!).
If you need something like a cascade combo box?
Then I would NOT use a popup, but simply use a update panel, and display the several objects.
If you really want the cascade combo box or whatever in the popup? Then you have to use JavaScript and ajax calls to the web page - no post backs allowed. You CAN do this, but it quite a bit of extra work. So, I would suggest that you avoid the popup for such kinds of work, since you not only lose the GREAT nice easy to use button code stubs and code behind (the reason why asp.net and web forms are oh so easy to use!!!).
So, you have to get say a little bit creative. You can put all the options say inside of a "div" section, and hide or show that section with code behind.
And then show/hide the area on the form with say this:
myDiv.Style("Display") = "normal"
So hide/show a area on the form. Thus in that panel, we can have two combo boxes (choose state/province and then cascade to the city choice). When the user selects a city, (and auto postback) then we shove that selecting into the text box, and hide the div. All works with just a few lines of code, and no jQuery or bootstrap dialogs.
So the general rule?
Pop a dialog - user can enter data, check box a few things, enter comments and then they hit ok button or whatever. But that button will do a post-back and will close the dialog. So that is the design pattern.
If you break from above? Then you can build dialog forms, but you have to wire up any actions of that dialog as ajax calls. A post back causes the WHOLE browser page to travel up to server. Code behind runs, changes anything on that page and then the whole page travels back down to client and THEN is re-displayed. I should ALSO add that the web server page is now gone, does NOT exist server side and all variables in code etc. are also gone.
The code behind NEVER interacts with the user. it ONLY interacts with the web page in that round trip and ONLY during the short time that the page is up on the server, and code behind runs. So a post back will blow out any JavaScript running on that page, since the whole page travels up to server, code behind runs, and WHOLE page THEN travels back down to client, the browser loads the page AND THEN STARTS RUNNING the JavaScript. Since a post back sends the page to the server and THEN will send the WHOLE page back, then you can't have a post-back run and keep your JavaScript popus etc. running, and worse the browser re-loads the whole page, and the JavaScript code STARTS over running again!!!
So if you really want to do this? Then you have to make ajax calls.
So the rule and design pattern? A post-back is to close the dialog and you only can have or allow one post-back as the "final" action of that dialog. Break this rule, and you then having to hand code up a LOT of JavaScript and ajax calls.
So the answer is you can't do a post back. You can do this with jQuery.ui dialogs and insert a iframe into the dialog. So you put the asp.net web page and buttons inside of a iframe - but then again, that popup in MOST cases will want to interact with the current page and a iframe does not let you do this for all practical use cases anyway.
I have thus found by changing my design patterns and assumptions, then you simply have to cook up slightly different approaches to your UI designs, and thus once done, then you can do this.
So, for example, you might pop one list to select from, and then when the user selects a value (post back) you then say perhaps popup another list for the user to select. So you can pop a list for display, and the user selection of course can be a post-back (and often it will be). Then code behind can trigger another dialog and you get that input.
I'm using Django 2.0 and have a model A with a list view and a detail view. You can go from the list view to the detail view in the following manner:
Button on ListView Html page to go to detail view
<td><a href="{{ a.get_absolute_url }}" class="btn btn-primary" class>View</a></td>
Models.py
def get_absolute_url(self):
return reverse("a:detail", kwargs={'a_id': self.a_id})
Then in the DetailView Html Page I have a button to go back to the detail view.
<a href="{% url 'a:list' %}" class="btn btn-primary" class>Back</a>
where a:list takes you to ListView Html
That is pretty straight forward. However, what if I made this same process for another html page. Then I'd need a second 'back' buttons to go to this new html page. It gets cumbersome really quick.
Is there a way that you can create a button that will go back to whatever page the user came from? This can either be to any page that has a button to go to this page (and you pass in some information that allows you to backtrack this) or maybe you typed in the url and want the back button to go back to whatever page you came from. I'm open to either way.
If you need Back button you can simply use HTTP_REFERER header
Like this:
<a href="{{ request.META.HTTP_REFERER }}" class="btn btn-primary" class>Back</a>
Note: you need to have django.core.context_processors.request in your TEMPLATE_CONTEXT_PROCESSORS.
I am trying to link to a page on a different site that contains three buttons in a form. When I link to the page xyz.com/form , by default the 'Highlighted' button is checked since it contains the btn-primary class. How can I create a link from my site linking to xyz.com/form with the btn-primary class selected for 'Link One' or 'Link Two' rather than 'Highlighted'?
<form>
<div class="col-xs-12">
<a class="btn btn-block btn-default btn-primary">Highlighted</a>
<a class="btn btn-block btn-default">Link One</a>
<a class="btn btn-block btn-default">Link Two</a>
</div>
</form>
You can't.
It isn't possible to make arbitrary changes to the HTML of an arbitrary site through the URL.
(If it was, you could watch as I linked to your bank's online banking service with a link that changed their login form to point to my own, malicious, site).
You would have to make the changes on the site hosting the HTML you want to change.
Ideally, you would create different pages representing each version of the page. You could do this dynamically using server-side code which (for instance) paid attention to the query string.
You could also use JavaScript (in the page) to examine the URL and modify the DOM based on it.
I have a View/View-Model pair that implements a popover custom attribute. My specific goals include dismissing the popover upon both button click within the popover itself, and from clicking anywhere else on the page.
I can get my doSomething() VM function to work on the element level in the view, but not within an attribute containing an element. I've explained the issue further in the code comments. I'd appreciate some guidance. Thanks!
blog.html
<template>
<require from="../popover/popover"></require>
...
<!-- doSomething() works here! -->
<button type='button' click.trigger='doSomething()'>ClickMe</button>
<!-- doSomething() does not work here! -->
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
"Uncaught ReferenceError: doSomething is not defined" -->
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'"
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span>
...
</template>
blog.ts
...
doSomething() {
console.log('doing something');
}
popover.ts
...
bind() {
$(this.element).popover({
title: this.title,
placement: this.placement,
content: this.content,
trigger: 'click',
html: true
});
}
I recently went through the same problem. I'm currently working on a Bootstrap port for Aurelia, it is not done yet, and I haven't written any documentation, but the popover is already implemented.
You are more than welcome to take a look:
https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover
The way you are trying to implement the popover is going to be very complicated (if even possible), things are going to get messy with the scopes. If you only had text then it would be fine, but you basically want to be able to put anything in the popover and have it bound to the right View-Model.
The way I solved this was having a couple of Custom Elements that represent the popover, I have AubsCustomPopover, AubsPopoverTitle and AubsPopoverContent.
With this 3 custom elements you will create the bootstrap markup for the popover, and because you are adding them directly in the view they will have the right View-Model, and you can do whatever you want inside them.
And then, there is a custom attribute, this is AubsPopover, this is the one that will be in charge of showing and hiding the custom attribute depending on the trigger action you specify (hover, click, focus, outsideClick).
The code using it looks something like this:
<aubs-custom-popover model.bind="customPopover">
<aubs-popover-title>
This is my awesome title <i class="fa fa-star"></i>
</aubs-popover-title>
<aubs-popover-content>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" text.bind="password"
placeholder="Password">
</div>
<button class="btn btn-default" click.delegate="isOpen = false">
Close
</button>
</aubs-popover-content>
</aubs-custom-popover>
<button class="btn btn-primary"
aubs-popover="custom-model.bind: customPopover;
trigger: outsideClick;
position: bottom;
open.bind:isOpen">
Custom Popover
</button>
As I said the Popover is fully implemented but I haven't written any documentation, I want to have a couple of more components before I do that.
If you want to use it, I can give you some help setting it up.
I have ian:accounts-ui-bootstrap-3 installed. I want a sign-in / sign-up button in the center of my home page.
Right now, {{> loginButtons}} gives the "Sign in / Sign up" dropdown, but it's a hyperlink. How do I make the link a button?
Embedding it in html tags doesn't work:
<button type="button" class="btn btn-info"> {{> loginButtons}} </button>
What I did was to remove the ian:accounts-ui-bootstrap-3 and use instead the default accounts-ui.
Then I add the following in my js files (on the client)
Template.loginButtons.rendered = function(){
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
This should show all buttons and inputs without weird dropdowns. I would then style it by replicating bootstrap styles if needed.
Hope this helps.