I'm building a website and I've got the following problem. When I click on a button, it generates two GET petitions, one with the primary key of the object I want to get as a parameter, and ANOTHER one with no parameter at all. I can't see why this can happen. Here's the piece of code of the button that generates both petitions.
<div> <a class="btn btn-dark" role="button" href="cartel.html/?id={{cartel.pk}}" style="margin-bottom: 0px;margin-left: 0px;background-color: rgb(52,58,64);">Ver más</a></div>
I'm using Django as the backend of the system.
Related
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.
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 am working on a collapsible table.
I have a table with a ng-show. The header panel of the table uses an ng-click that toggles the ng-show piece to be true or false. However, I want to have a button at the top that toggles all the tables to one way or the other. It works unless I click on an individual table. If an individual table is clicked the toggle button ignores that table. Here's an example of what the code looks like.
<h3>{{page.name}}
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
</h3>
<div>
<div class="panel-heading" ng-click="isOpen=!isOpen">
<h3>{{table.name}}</h3>
</div>
<table ng-show="!isOpen">
~~table contents~~
</table>
</div>
The tables start out open, then close when either the toggle button is pressed or their headers are clicked. However the toggle button fails to change a table if it has been altered by clicking on the header.
One button would be the best, but having two buttons (one that opens them all, and one that closes them all) would work well too, and I feel might be the only way.
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
//lose a space.... and did you init the isOpen?
<button type="button" ng-click="isOpen=!isOpen">Toggle</button>