jQuery: Difference between these two approcaches of writing code? - javascript

I am using jQuery bootstrap in my application. I have the following dialog box code:
<div class="modal fade" id="myModal" 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">Share With Friends</h4>
</div>
<form class='shareForm' id='dialogForm' role='form'>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Update page title</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<span class="help-block">Example block-level help text here.</span>
</div>
<div class="alert alert-danger">asahjk akshak shaks jhk</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I will use this dialog multiple times. Now I have two choice to use this:
I should keep all this code as string e.g var myDialog = above code in some js file and called that myDialog variable whenever I need.
I should generate above code dynamically every time it is called using something like $("<div/>").
Now I want to know what is the difference between these two in terms of performance, memory usage because what i am guessing that in first case it will consume memory more as it will be big string. In 2nd case creating everything dynamically will be a tedious job.

You could also investigate a HTML templating engine of which their are many. This has the added benefits of keeping your HTML markup out of your JavaScript logic, i.e no horrible long html in JavaScript variables that are hard to maintain, while still being able to reference the code from a JavaScript file that you can reference whenever you want. Not to mention being able to dynamically populate data without needing to recreate your HTML markup.
John Resig came up with a solution and great explanation several years ago which has since been expanded upon by many developers implementing their own templating solution. The Template Engine Chooser may help you in selecting a templating engine.

You could also just put it in a seperate file and include that whenever it is needed. That way you are not dependand on Javascript for this code.

Well, it's not just a small div, I would keep that in a hidden div on the page where you need it, and just change its visibility.
That's the simplest, most discoverable and readable way in my opinion, and you don't need to generate it every time...

Related

How to call a modal from a different HTML File

I realise there are similar questions on stackoverflow, however they either seem outdated(bootstrap3) or are not working for me. If possible I want to just stick to html css and javascript. I would prefer not using jquery or php.
I'll keep my code very general. I have my mainscreen which has a button I need that button to call a modal from ModalPage. ModalPage only has that modal with no other code. I'm using flask-python as my backend.
Mainscreen
<button type="button" class="btn btn-primary btn-lg">This should call modal/button>
ModalPage
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have tried using url_for and rendering it using <a> but that doesn't seem to be working
You might have to store the entire modal HTML in a variable within your Python Flask code. One way (out of quite a few number of ways) would be to read the text and store the html in a variable using:
modaltext=[]
with open('ModalPage.html', 'r') as f:
content = f.read()
modaltext.append(content)
Put this above code in your views.py preferably. That filename depends on where you have stored the ModalPage.html. Here I assumed, it is in the same folder as views.py (which might not be the case. It could be in templates, but I dunno your folder structure).
And modify your return render statement to also return the modaltext list.
Then, call it to your Mainpage HTML using jinja2 syntax wherever necessary. Typically it could be like:
<div>{{ modal }}</div>
I'm honestly not sure about the python/flask portion, but I do what you are attempting using only html/js. You could add an ID to the button, i.e 'modal-form-button'. Then make an event listener in JS for the element with that ID being clicked.
document.getElementById("test-btn").addEventListener("click", showModal);
The showModal() function can contain the necessary code to toggle the display of the modal between 'display:bloack' and 'display:none'

how to trigger modal on page load

I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
Large
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
I want to trigger the modal on page load instead of button click. How can I do this?
if you're working with Bootstrap (then I also assume you're using jQuery), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard.

Creating Custom dialog/pop up box HTML

I am learning how to create custom dialog box in HTML by following tutorials but haven't been able to quite understand how I can create them the way i want. I want to achieve something like below:
The first one I want to create contains a listview.
The second one is dialog box that has textbox to enter in keyword and add to database by clicking create.
I have followed tutorials but being a beginner, I haven't be able to full understand how to go about create, therefore any help would be nice.
Through searching online, I have been able to create using modals to come up with: http://jsfiddle.net/jLs8myoa/9/
<div class="modal fade" id="myModal" 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">Input Form</h4>
</div>
<div class="modal-body">
enter keyword <input type="textbox" id="textbox1"> </input><br>
<button type="button">Search</button>
<div> Listview </div>
</div>
</div>
</div>
</div
Few tutorials i have followed
https://www.w3schools.com/howto/howto_css_signup_form.asp
https://www.youtube.com/watch?v=-RLE2Q7OzME
In your code modal opens properly, I can't see any problem over there.
You just need to advance a bit in HTML, and CSS.
Start with W3 schools, they have awesome and easy tutorials for HTML5 and CSS. I think you will be able to make what you want once your basic will be clear. There are many ways to design the modal you are making.
Follow this...
CSS Tutorials...
Custom modal without Bootstrap...
CSS modal...

Show new page as Modal with Javascript

I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong

Bootstrap's Modal box - background doesn't fade out on show

I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.

Categories