I'm trying to create a bootstrap modal within an RoR project. I'm using the verb login, but not using Devise. I'm just trying to figure out the modal without the complexity of adding
Devise!
I seem to reach the server after clicking on the login link but I only get gray overlay!
application.htm.erb
<div class="container">
<div class="well">
<%= link_to 'login', login_url,
{:remote => true,
'data-toggle' => "modal",
'data-target' => '#login',
:class => "btn btn-primary "} %>
</div>
</div>
<div id="login" class="modal hide fade"></div>
_login.html.erb
<div class="modal hide fade in" id="login">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign in</h2>
</div>
<div class="modal-body">
<h2>Login form will go here</h2>
</div>
<div class="modal-footer">modal footer text</div>
</div>
login.js.erb
$("#login-modal").html("<%= escape_javascript(render 'login') %>")
$("#login-modal").modal("show")
site#login
def login
respond_to do |format|
format.js
end
end
console output
Started GET "/login" for 127.0.0.1 at 2014-07-28 16:38:59 -0700
Processing by SiteController#login as JS
Rendered site/_login.html.erb (0.0ms)
Rendered site/login.js.erb (1.0ms)
Your modal's markup seems incorrect. Looks like you took it from an old Bootstrap 2 example? Compare it against the examples in http://getbootstrap.com/javascript/#modals .
Problems in your code include:
You shouldn't use the hide or in classes
Missing modal-dialog and modal-content <div>s
What resource/example did you base your code off of?
Related
public function storeProject()
{
$this->validate();
$fileName = $this->files->store('uploads');
Project::create([
'title' => $this->title,
'description' => $this->description,
'files' => $fileName,
'skills' => $this->skills,
]);
session()->flash('message', 'Your Project has been posted Successfully!');
}
My View
#section('title', 'Post a job')
<div>
<div class="py-12 font-sans">
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
<div class="m-4 p-4 bg-gradient-to-r from-blue-800 via-blue-700 to-blue-600 text-white rounded-md">
<h2 class="text-4xl">Tell us what you need done!</h2>
<p class="break-words mt-5">Within minutes, get in touch with knowledgeable independent contractors. View
their profiles, give them feedback, look at their portfolios, and talk with them. Only pay the
freelancer once you are completely satisfied with their job.
</p>
</div>
<div>
{{-- Form is located here --}}
<form enctype="multipart/form-data">
<div class="mb-6">
<label for="title">Choose a Title for your Project</label>
<input type="title" id="title" name="title" wire:model.lazy="title"
placeholder="e.g. Build me a website">
</div>
<div class="mb-6">
<label for="message">Tells more about your project</label>
<textarea id="description" name="description" rows="4" wire:model.lazy="description"
placeholder="Describe your project here..." maxlength="4000"></textarea>
</div>
<div class="mb-6">
<label for="user_avatar">Upload file</label>
<input wire:model="files" aria-describedby="user_avatar_help" id="user_avatar" name="files"
type="file">
</div>
<div class="mb-6">
<label for="skills">
What skills are required</label>
<p class="break-words mt-2">Enter up to 5 skills that best describe your project. Freelancers
will use these skills to find projects they are most interested and experienced in.</p>
<input type="text" id="skills" name="skills" data-role="tags-input"
wire:model.lazy="skills" placeholder="Enter skills here separated by commas...">
</div>
<button type="submit" wire:click="storeProject">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. This is my blade code.
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
You need to change the form tag and the submit button:
<form wire:submit.prevent="storeProject">
<button type="submit">
Submit
</button>
This will take care of the page refresh and the GET call. You do not need enctype="multipart/form-data" when using Livewire.
I think that you have created a controller function storeProject() and a blade view with your <form enctype="multipart/form-data"> which is completely wrong. Check here how livewire should work https://laracasts.com/
I am trying to build some search functionality within a modal. When a user clicks a button it will open a modal with a search box. I then want the results of the search to be shown within the same modal?
<div class="modal" id="select2modal">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-header">
<h6 class="modal-title">Search for product to add</h6><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<h6>product Search</h6>
<div class="card-body pb-2">
<form method=POST action="{% url 'searchproduct' %}">
{% csrf_token %}
<div class="input-group mb-2">
<input type="text" class="form-control border-right-0 pl-3" name="search" placeholder="Enter product Name" value="">
<span class="input-group-append">
<button class="btn ripple btn-primary" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn ripple btn-primary" type="button">Add product</button>
<button class="btn ripple btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
view
def search_product(request):
searched = request.POST['searched']
return render(request, 'index.html',{'searched':searched})
I don't think i should be doing return render(request, 'index.html',{'searched':searched}) think I should just be returning searched
The problem is this relies on the page being refreshed that closes the modal.
So what is the correct way - Do I need to use JavaScript or something.
UPDATE:
I have added jquery now
<script type="text/javascript">
$(document).on('submit','#post-form', function(e){
e.preventDefault();
$.ajax({
type:'POST',
url: '/searchproduct',
data:{
searched:$('#search').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success: function (){
}
});
});
</script>
Which seems is doing a POST and returning 200 but the data returned data isn't being shown in the modal.
def search_product(request):
searched = request.POST['searched']
returned_products = Product.objects.filter(product_name__contains=searched)
return {'searched':searched,'returned_products':returned_products}
and then within my modal i am using:
{% for t in returned_products %}
{{t.product_name}}
{% endfor %}
UPDATE 17/02
I think i have made some progress, but i still not getting the results back within the modal, but my search is returning a 200 rather than a error now.
In my AJAX:
<script type="text/javascript">
$(document).on('submit','#post-form', function(e){
e.preventDefault();
$.ajax({
type:'POST',
url: '/searchproducts',
data:{
searched:$('#search').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success: function (data){
$('jresponse').html(returned_products);
}
});
});
I'm returning returned_products and within my modal I have
<div id="jresponse">
{{ returned_products }}
</div>
```
My view
```
def products(request):
searched = request.POST['searched']
returned_products = Product.objects.filter(product_name__contains=searched).values()
return JsonResponse({"returned_products":list(returned_products)})
```
I think the best way to approach this is to use JavaScript and Ajax calls in your frontend/template and HTTP responses with JSON data in your view/backend. You would not do a form submit but instead POST HTTP calls via Ajax to your view (which most likely would be triggered by the button you already have in place). Your view would then respond with a HTTP response which has to be interpreted and incorporated again by JavaScript in your frontend. A good way to structure your response is using JSON format, which can be easily interpreted using JavaScript. Django Rest Framework can make this easier for bigger projects, but it might be good enough to build the JSON responses more or less manually at small projects.
hi i need to remove payment_address payment_method from checkout/checkout page Opencart 3.x.
i donot want extension, please some body help on this.
Theoretically, you can activate a COD payment method and then simply hide this step with basic CSS and a bit of JS to open the final step in the default checkout.
But Opencart heavily relies on Payment_address. Payment Address has several fields that are required like country, zone and often postcode.
Removing the payment_address will break the whole system. What you can do is via simple HTML and CSS, populate the fields with default values and then hide with CSS.
for example in catalog/view/theme/default/template/checkout/payment_address.twig
...html
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-payment-firstname">{{ entry_firstname }}</label>
<div class="col-sm-10">
<input type="text" name="firstname" value="<MY_DEFAULT_FIRST_NAME>" placeholder="{{ entry_firstname }}" id="input-payment-firstname" class="form-control" />
</div>
</div>
...
do this for all the fields.
then in catalog/view/theme/default/template/checkout/checkout.twig do style="display:none'
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_account }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
{% else %}
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_payment_address }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
this will just hide the payment_address block but it will still be there.
and now you need to skip the payment address step by calling the Continue button via JavaScript
so in the same file catalog/view/theme/default/template/checkout/checkout.twig
after line 165
$('a[href=\'#collapse-payment-address\']').trigger('click');
//add this code to trigger continue button:
$('#button-payment-address').trigger('click');
You might need to wrap the trigger click action with setTimeout becuase you might trigger the click before the form is actually loaded.
I would also advise to do this in a CUSTOM theme folder, and not in the default opencart theme. this way you can do the modifications without touching the core file.
I am using Materialize in app ruby on rails and want video stop closing modal Materialize.
Help me please.
<% #chapter.episode.each do |episode| %>
<a class="btn modal-trigger" href="#<%= episode.name %>"><%= episode.name %></a>
<div id="<%= episode.name %>" class="modal">
<i id="close" title="Cerrar" class=" modal-action modal-close waves-green right material-icons">close</i>
<div class="modal-content">
<video id="<%= episode.name %>" width="320" height="240" controls>
<source id="<%= episode.name %>" src="<%= episode.url %>" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
Your browser does not support the video tag.
</video>
</div>
</div>
<% end %>
First of all, you are setting the same id for multiple tags (div, video, source). ID must be unique in entire document.
Considering that you want to stop video when modal close, you can use the callback for complete event (modal close), in your Javascript/jQuery code:
$(document).ready(function(){
var videos = $("video");
$('.modal-trigger').leanModal({
complete: function() {
videos.each(function(){
this.pause();
});
}
});
});
This will pause all videos when modal close.
I know this is an old question, but it came up for me in search. I solved it by adding video into modal when it opens, then removing it when it closes. Here's my work.
$(document).on('click','.video-butt',function(){
$('#video-modal .video-container').html('<iframe id="myIframe" width="300" height="200" src="' + $(this).attr('href') + '?rel=0" allowfullscreen="true" ></iframe>'); // embed video
$('#video-modal').modal('open');
return false;
})
function videoTrash(){ //remove video embed on close
$('#video-modal .video-container').empty();
}
$('#video-modal').modal({onCloseEnd:videoTrash}); // initialize materialize modal
html
<div id="video-modal" class="modal black">
<div class="modal-content white-text">
<div class="video-container"></div>
</div>
</div>
the trigger link
<a class="btn btn-flat video-butt" href="https://www.youtube.com/embed/hO4tW8Py2xc">watch the video</a>
I have multiple rails views sharing a same Bootstrap modal, and I would like to render it using partials <%= render 'shared/modal' => in my layout/application.html.erb.
When i visit one of the views first time, the modal works perfectly fine. However, subsequent visits to other views which share the same modal partial will generate multiple modal backdrops, which darkens the background. As follows:
first visit, which is fine:
<div class="modal-backdrop fade in"></div>
subsequent visit on the views which share the same partial:
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
....
<div class="modal-backdrop fade in"></div>
The modal-backdrop div doesn't go away when I route to different views and trigger the modal. I am new to rails and not sure what happens, I tried to search for solution online, and none helps, any help would be much appreciated.
This is my model partial:
<div aria-hidden='true' class='modal fade' id='modal' role='dialog' tabindex='-1'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
...
</div>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
....
</div>
</div>
</div>
</div>
and my layout/application.html.erb:
<body>
<%= yield %>
<%= render 'share/modal' %>
</body>
Check if there are more modals in your views which generate multiple backdrops. Try to use different class name in one view.