How to open a bootstrap modal using rails link_tag and remote: true
I am usinge rails 5.0.2
My view page code is:
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
But its did not open the modal, after making this call as remote: true
Is their any other way round thanks in advance
ruby-on-rails-3 ruby-on-rails-4 ruby-on-rails-5 ruby-on-rails-5.1 ruby-on-rails-5.2
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
add a comment |
I am usinge rails 5.0.2
My view page code is:
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
But its did not open the modal, after making this call as remote: true
Is their any other way round thanks in advance
ruby-on-rails-3 ruby-on-rails-4 ruby-on-rails-5 ruby-on-rails-5.1 ruby-on-rails-5.2
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
add a comment |
I am usinge rails 5.0.2
My view page code is:
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
But its did not open the modal, after making this call as remote: true
Is their any other way round thanks in advance
ruby-on-rails-3 ruby-on-rails-4 ruby-on-rails-5 ruby-on-rails-5.1 ruby-on-rails-5.2
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
I am usinge rails 5.0.2
My view page code is:
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
But its did not open the modal, after making this call as remote: true
Is their any other way round thanks in advance
ruby-on-rails-3 ruby-on-rails-4 ruby-on-rails-5 ruby-on-rails-5.1 ruby-on-rails-5.2
ruby-on-rails-3 ruby-on-rails-4 ruby-on-rails-5 ruby-on-rails-5.1 ruby-on-rails-5.2
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
asked Nov 20 '18 at 8:37
vidur punj
1,11711726
1,11711726
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
As per the description mentioned in the post and code posted, it seems like you have made jquery selector in the html tag
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
Modify it to
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => 'files' %>
In the above code the files is the id of the modal so no need to append "#" in front of it.
answered Nov 20 '18 at 9:41
Rohan
1,1271311
add a comment |
1- Add a generic modal to your layout with i.e #defaultModal id.
2- In your controller js.erb response file, find that modal and replace its content with your html content and show modal.
js.erb file
$('#defaultModal .modal-footer').remove();
$('#defaultModal .modal-body').remove();
$('#defaultModal form').remove();
$('#dynamic-content').html('<%= escape_javascript(render :template => "#{target}", :formats => [:html], :handlers => [:erb]) %>'); //this contains both footer and body
$('#defaultModal .modal-header h4').text('<%= @title %>');
$('.other-modals').modal('hide');
$('#defaultModal').modal('show');
default modal html file
<div class="modal fade" id="defaultModal" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="default-modal-header">.</h4>
</div>
<div id="dynamic-content">
<div id="default-modal-body" class="modal-body">
<p class='loading'>Loading...</p>
</div>
<div id="default-modal-footer" class="modal-footer">
<%= link_to 'Close', "#", "data-dismiss" => "modal", :class => "btn", "aria-hidden" => true %>
</div>
</div>
</div>
</div>
</div>
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389062%2fhow-to-open-a-bootstrap-modal-using-rails-link-tag-and-remote-true%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
As per the description mentioned in the post and code posted, it seems like you have made jquery selector in the html tag
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
Modify it to
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => 'files' %>
In the above code the files is the id of the modal so no need to append "#" in front of it.
answered Nov 20 '18 at 9:41
Rohan
1,1271311
add a comment |
As per the description mentioned in the post and code posted, it seems like you have made jquery selector in the html tag
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
Modify it to
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => 'files' %>
In the above code the files is the id of the modal so no need to append "#" in front of it.
answered Nov 20 '18 at 9:41
Rohan
1,1271311
add a comment |
As per the description mentioned in the post and code posted, it seems like you have made jquery selector in the html tag
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
Modify it to
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => 'files' %>
In the above code the files is the id of the modal so no need to append "#" in front of it.
answered Nov 20 '18 at 9:41
Rohan
1,1271311
As per the description mentioned in the post and code posted, it seems like you have made jquery selector in the html tag
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => '#files' %>
Modify it to
<%= link_to 'Download files',cader_history_path(:job_id => @check_cader[0].job_id), :remote => true, class: "btn btn-link", 'data-toggle' => 'modal', 'data-target' => 'files' %>
In the above code the files is the id of the modal so no need to append "#" in front of it.
answered Nov 20 '18 at 9:41
Rohan
1,1271311
answered Nov 20 '18 at 9:41
Rohan
1,1271311
answered Nov 20 '18 at 9:41
Rohan
1,1271311
answered Nov 20 '18 at 9:41
Rohan
1,1271311
1,1271311
add a comment |
add a comment |
1- Add a generic modal to your layout with i.e #defaultModal id.
2- In your controller js.erb response file, find that modal and replace its content with your html content and show modal.
js.erb file
$('#defaultModal .modal-footer').remove();
$('#defaultModal .modal-body').remove();
$('#defaultModal form').remove();
$('#dynamic-content').html('<%= escape_javascript(render :template => "#{target}", :formats => [:html], :handlers => [:erb]) %>'); //this contains both footer and body
$('#defaultModal .modal-header h4').text('<%= @title %>');
$('.other-modals').modal('hide');
$('#defaultModal').modal('show');
default modal html file
<div class="modal fade" id="defaultModal" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="default-modal-header">.</h4>
</div>
<div id="dynamic-content">
<div id="default-modal-body" class="modal-body">
<p class='loading'>Loading...</p>
</div>
<div id="default-modal-footer" class="modal-footer">
<%= link_to 'Close', "#", "data-dismiss" => "modal", :class => "btn", "aria-hidden" => true %>
</div>
</div>
</div>
</div>
</div>
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
add a comment |
1- Add a generic modal to your layout with i.e #defaultModal id.
2- In your controller js.erb response file, find that modal and replace its content with your html content and show modal.
js.erb file
$('#defaultModal .modal-footer').remove();
$('#defaultModal .modal-body').remove();
$('#defaultModal form').remove();
$('#dynamic-content').html('<%= escape_javascript(render :template => "#{target}", :formats => [:html], :handlers => [:erb]) %>'); //this contains both footer and body
$('#defaultModal .modal-header h4').text('<%= @title %>');
$('.other-modals').modal('hide');
$('#defaultModal').modal('show');
default modal html file
<div class="modal fade" id="defaultModal" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="default-modal-header">.</h4>
</div>
<div id="dynamic-content">
<div id="default-modal-body" class="modal-body">
<p class='loading'>Loading...</p>
</div>
<div id="default-modal-footer" class="modal-footer">
<%= link_to 'Close', "#", "data-dismiss" => "modal", :class => "btn", "aria-hidden" => true %>
</div>
</div>
</div>
</div>
</div>
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
add a comment |
1- Add a generic modal to your layout with i.e #defaultModal id.
2- In your controller js.erb response file, find that modal and replace its content with your html content and show modal.
js.erb file
$('#defaultModal .modal-footer').remove();
$('#defaultModal .modal-body').remove();
$('#defaultModal form').remove();
$('#dynamic-content').html('<%= escape_javascript(render :template => "#{target}", :formats => [:html], :handlers => [:erb]) %>'); //this contains both footer and body
$('#defaultModal .modal-header h4').text('<%= @title %>');
$('.other-modals').modal('hide');
$('#defaultModal').modal('show');
default modal html file
<div class="modal fade" id="defaultModal" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="default-modal-header">.</h4>
</div>
<div id="dynamic-content">
<div id="default-modal-body" class="modal-body">
<p class='loading'>Loading...</p>
</div>
<div id="default-modal-footer" class="modal-footer">
<%= link_to 'Close', "#", "data-dismiss" => "modal", :class => "btn", "aria-hidden" => true %>
</div>
</div>
</div>
</div>
</div>
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
1- Add a generic modal to your layout with i.e #defaultModal id.
2- In your controller js.erb response file, find that modal and replace its content with your html content and show modal.
js.erb file
$('#defaultModal .modal-footer').remove();
$('#defaultModal .modal-body').remove();
$('#defaultModal form').remove();
$('#dynamic-content').html('<%= escape_javascript(render :template => "#{target}", :formats => [:html], :handlers => [:erb]) %>'); //this contains both footer and body
$('#defaultModal .modal-header h4').text('<%= @title %>');
$('.other-modals').modal('hide');
$('#defaultModal').modal('show');
default modal html file
<div class="modal fade" id="defaultModal" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="default-modal-header">.</h4>
</div>
<div id="dynamic-content">
<div id="default-modal-body" class="modal-body">
<p class='loading'>Loading...</p>
</div>
<div id="default-modal-footer" class="modal-footer">
<%= link_to 'Close', "#", "data-dismiss" => "modal", :class => "btn", "aria-hidden" => true %>
</div>
</div>
</div>
</div>
</div>
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
answered Nov 21 '18 at 8:34
yigitbacakoglu
18617
18617
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389062%2fhow-to-open-a-bootstrap-modal-using-rails-link-tag-and-remote-true%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
