I am using MVC4, with C# and Razor to make a simple Web Application.
In my Controller I have a method that returns a partial view that is shown to the user, in this case, a modal popup:
public ActionResult GetPackageDetails(int id)
{
return PartialView("_EditPackageModal", new ModalEditPackage());
}
The partial view, which is a modal popup shows as predicted, but does not run any javascript:
#model SuperApp.Model.ModalEditPackage
<div class="modal fade bs-example-modal-lg" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Edit Package #Model.packageName</h4>
</div>
<div class="modal-body">
<div>
<label class="control-label">Package Name: </label>
<input type="text" class="form-control" id="package-name" placeholder="#Model.packageName">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This is the javascript code that I wish to run on the partial view:
<script>
$("input").click(function () {
alert("hello world!");
});
</script>
After reading this question:
Don't run javascript function in PartialView
I realized that I must include the script in the partial view. To sum up:
The partial view is unable to run the JS code that is in my project.
The partial view only runs JS code that is directly specified in the partial view using the <script> tag
Now, in this example such is fine, but in the real world I have several scripts that work on the partial view, and they are considerably big. Furthermore, the client already downloaded them because they are being used in other views and I don't know how to tell the partial view where the scripts are located since I am using Bundles.
Is there a way to fix this without smashing the script directly into the partial view?
give unique name to all your modals or html blocks.
Make your js code like this:
$(document).on('click', '#yourSpecifiedDomElement input','click',function(){
alert("hello world!");
});
place all your javascript code to specified js files which included in bundles.
Related
I am trying to build a web page that contains populates a bootstrap modal from an Html file stored on the same pc. However, it is currently displaying weirdly as can be seen in this image
This is my first time posting here and I am self-taught so if this is a stupid mistake - sorry.
I am trying to build a page with a list of stories. I want the stories to open my in a modal. To stop the page itself getting ridiculously long the stories themselves are stored in their own Html files (including formatting) and inserted using javascript - inner HTML.
The webpage includes bootstrap 4 and jquery
the relevant code is
<button onclick="fetchStory('Solitude')"> Read </button>
<div class="modal" id="displayStory" tabindex="-1" role="dialog" aria-labelledby="fetchStoryLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fetchStoryLabel">New message</h5>
</div>
<div class="modal-body" id="sample">
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
<script type="text/javascript">
function fetchStory(story) {
var modal = $(displayStory)
modal.find('.modal-title').text(story)
var story_path = "samples\\" + story + ".html"
document.getElementById("sample").innerHTML='<object type="text/html" data=' + story_path + '></object>'
$('#displayStory').modal()
}
</script>
If I passed the Html directly into the modal it displays as expected but when inserted using javascript it displays as above. inspecting it on a web page I cannot see any reason for the difference
hello everyone i need help. i wanna show dinamic data to bootstrap modal body.
here is my code so far :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
url : 'det_registration.php',
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
the modal windows is open. but, the ajax code is not execute for call det_registration.php and fetched data
what i missed ? thanks for your help :)
update:
i am sorry all. this is the code how i call the modal
<a title='detail' href="#myModal" data-toggle='modal'><span class="pull-left">View Details</span></a>
Not sure exactly what else you have in your code but take a look here.
I've added a button calling to your modal. With the code you provided, it all seems to be working just fine to me.
This was all I added
<button data-toggle="modal" data-target="#myModal" class="btn brn-primary">Click Me</button>
I know this is just a peace of code but please provide more information. In this case I don't know how you are opening the modal, this could be the problem.
Your script looks fine, if the ajax function was not executed is because your modal lister could't "listen" the event "show.bs.modal" try to put an alert just after the opening of the anonymous function to test it.
If you could't see the alert is because the event was not listened.
Finally, if you are opening the modal via JS, just remember that the function that opens it must exist before it was executed.
i have solved my problem. the problem is there is two jquery.js in my php file. the first one is bootsrap jquery.js and the another one is datatable jquery.js. then after i deleted datatable jquery.js, my problem was solved
I have a main page, and I am loading modal dialogs that are stored as HTML in other partial html pages. I am loading modals dynamically into 1 modal in the page on different buttons clicks.
The partial page for my modals look like this for 1 page:
<script type="text/javascript" src="../App/modals.js"></script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Specify entity name you wish to create</h4>
</div>
<div class="modal-body">
<div class="row">
<form>
<div class="col-md-6">
<input type="text" id="txtEntityNameCreate" />
</div>
<p class="modal-log"></p>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="AddEntity()">Create Entity</button>
</div>
I am referencing a script at the top which will be responsible for resetting the text field inside dialogs. I might use it for later purposes as well. But the script is not loaded into the page when I am calling the dialog like this from my main page:
<a id="" data-toggle="modal" data-target="#mainModal"
href="modals/createmodal.html"
data-remote="modals/createmodal.html"
onclick="Utilities.SetFocusModal('txtEntityNameCreate')">
<img src="../Images/create.png" />
<h4>Create Entity</h4>
</a>
How can I load the modals.js when the dialog is loaded?
Thanks.
When bootstraps modals are loaded remotely they do not reload the dom so the page is not being reloaded into the modal the html is just being inserted, so your script is more than likely not executing, not really sure what your script looks like but that is more than likely the issue. Bootstrap has a jquery function for when the modal is shown. So if your script functions correctly when you load your html normally, like when you open just your snippets, then you can probably do something like the following on your main page:
$('#mainModal').on('shown.bs.modal', function () {
//then put your script here
});
or maybe
$('#mainModal').on('shown.bs.modal', function () {
$.getScript('path/to/script.js');
});
And then your script will execute when the #mainModal is shown.
I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>
Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
I need to be able to open a Twitter bootstrap modal window using the onClick="" or similar function. Just need the code to go into the onClick="". I am trying to make a click-able div to open the modal.
Code Excerpts:
Div Code:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
If you're using Bootstrap 2, you'd follow the markup here:
http://getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. T145's answer helped a lot, so I wanted to share how I used it.
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here:
http://getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. It should be something like this, where "myModal" = ID of element:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works.
It is also not very wise to have an onClick bound to a div element; something like a button would be more suitable.
Hope this helps!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc.
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/