last day (14 days later) » 

11:34 AM
1
A: Load content dynamically in bootstrap 2.3 modal

redaxmediaYou have to write several methods / functions for each task. var yourApp = window.yourApp || {}; yourApp.initModal = function (options) { $('#myModal').modal(options); }; yourApp.loadModalContent = function () { var content = $("#modalContent").html(); if (content.length) { $(...

 
And how should html within modal look like? Right now it is loading static image like in example above.
 
yourApp.loadModalContent can return html from an AJAX call (would be the best) or from a DOM node (not a good practice)
 
Unfortunately it does not work. I have just added your code to my above mentioned example but still anything is happening. At the modal window I have removed static image loading and leaved src="" in order to fill that space with ajax.
 
It does not work, because I just gave you a skeleton... you have to finish the methods for yourself. This platform is about question/anwser and not let other do your work... :-)
 
Ohh. :) Sry I am noob at js. Anyway will try it one more time.
 
11:34 AM
All right, I extended the example - good luck my friend :-)
 
thank you very much :))) I am still confused with modal and static image. Should I change my html dom structure or it can stay like this? One more thing, it fires modal window immediately when I refresh the page and the content is not changed when I do the swipe thing.
 
depends on the markup needed by the carousel... i don't know your plugins, try it for yourself
do you have the skeleton working so far?
 
For now it fires on start modal window with the static image. I am not usign any additional plugins, only TB carousel with this js for swipe.
i have build this example statically with:
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
myModal3 and so on.. but is it possible to do it dynamically. that all the images are loaded withing one modal window and when the modal is opened then the user should be able to use swipe feature
?
:) btw thanks so far!
 
no, no, no ... not that way
only one modal to rule them all
you have to get your new images from an AJAX or maby from an array
yourApp.images = ['imageSource/foo.jpg', 'imageSource/bar.jpg', ];
on the swipe you just replace the img source with the next image !?
man, there are hundret ways to do it^^
 
yes on swipe to replace the img source with the next image
 
11:41 AM
or you do it all with the TB carousel
 
everything with TB carousel
 
then you have to put all images into the modal content container
 
Ive made to work on page but I need to extend the functionallity with modal window and swipe
 
i know that, so did you use my skeleton
 
11:42 AM
what happend?
 
yes I have :)
it triggers the modal on start
and when I close the modal
i am not able to triger it again
trigger
 
you want to open the modal on click?
 
thats easy
 
onClick. Something :) ?
 
11:44 AM
you have to change the initModal thing
wait, i just edit the code
inside the answer
 
Thanks! :)
 
done
it works now with a tags having the js-modal class
js- for css class means they just have JS functionality
do not style them
 
ok.. i get it..
just one question
what should I do with dome?
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modalContent">
<!-- <button type="button" class="close-img" data-dismiss="modal" aria-hidden="true">&nbsp;</button> -->
<!-- it makes empty spaces clickable -->
<div type="button" class="close" data-dismiss="modal" aria-hidden="true">&nbsp;</div>
<!-- <div id="ajax-modal" class="modal hide fade" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-hidden="true"></div> -->
should I change this static
image
<img data-dismiss="modal" aria-hidden="true" src="img/1_big.jpg" class="image" alt="" data-target="#myModal">
with some js?
 
the modalContant should not be inside the modal itself
it is a hidden container somewhere that provides you the content once the modal was opened !?
hmm... but it can be inside the modal too, was not my idea but okay
 
i can remove it
it is not a problem
:)
 
11:52 AM
<div id="modalContent"> <- put the image inside that container
btw: next time you should provide a jsfiddle
 
I will sorry for inconvenience
I just came to this platform
 
no problem
 
and basically I am UI designer
 
dann hätte man aber auch deutsch reden können, wa
haha
 
ja wir können aber ich bin nicht sicher wie güt kann Ich schreiben
ich habe gerade im Wien gekommen :)
 
11:56 AM
i see
i'm founder and core dev of a little underdog CMS: redaxscript.com
 
aber ob du willst du kannst auf deutch schreiben
:)
btw. right now it loads modal content images but all images at the same time
yeah i saw that you have something
:)
if you will need UI help
let me know
:)
 
thanks, not atm
have you init the carousel correct?
 
maby the id is wrong
the very best way to develop Javascript is by using the firebug console
coding, saving and refresh the page is very slow
you can call JS directly in your browser
 
right now I am trying to do it that way
 
12:02 PM
once the modal opened you can try doing $(THE RIGHT SELECTOR).carousel();
and you are going to get a direct response
JS error, JS that is working, markup that chance... things like that
damn - am i your teacher? lol
 
i believe yes in this case.. i really appreciate what are you doing
:)
from this point i will try to figure it on my own
 
all right... i just followed you on twitter - cya
 
thanks.. hear you soon hopefully! :)
 

last day (14 days later) »