I am currently working on an intranet solution for my company written in PHP using the Laravel framework, this requires me to do a lot of new things I have never done before, 1 of these is creating a popup that has dynamic html depending on a drop down list such as this:
I have a calendar (http://fullcalendar.io/)
When I click on a day in this calendar a popup should show that looks something like this:
After selecting a value from that dropdown list a different set of fields should be shown depending on the value selected for example:
OR
So I really need a lot of control over the popup, I have no previous experience with working with popups (unless a simple alert of a variable in javascript counts) and I need a whole deal of functionality, it also needs to be able to post to a database so I think it might even have to be a form element. I also need to be able to fire the popup from the onclick event from the fields in my calendar so that makes it extra hard for someone who has always written back end code up until now.
SO WHAT IS YOUR QUESTION?
Could anyone tell me what the easiest/fastest way to achieve this is without losing any functionality necessities, can I do this from php, does a feature like this exist in the Laravel framework?(if it does I coudldn't find it) or do I have to start using something like jquery?
I found a bunch of libraries such as Fancybox that claim to be able to do this but I can't make head nor tail out of their usage guide.
For everyone who thinks this doesn't belong here: my only question is not "Is it Possible?" I am also asking how do I do it, what do I write in my html, javascript, php to make it work?
EDIT: I just read something about jquery dialogs that seems interesting, seems like you can use jquery dialogs to create a popup from a form you have in your html (form is hidden) but I can't seem to get the code to fire off the popup (dialog) to work so far I have this:
$(document).ready(function() {
$('#calendar').fullCalendar({
//calendar options here
dayClick: function(date, jsEvent, view) {
//to get date use date.format());
//POPUPCODE START
$("#logform").dialog({ //Shows dialog
height: 250,
width: 450,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Save": function() {
$.ajax({
url: "/url/to/submit", //
timeout: 30000,
type: "POST",
data: $('#modalform').serialize(),
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("An error has occurred making the request: " + errorThrown)
},
success: function(data){
//Do stuff here on success such as modal info
$( this ).dialog( "close" );
}
}
}
}
}),
//POPUPCODE END
var myCalendar = $('#calendar');
myCalendar.fullCalendar();
var myEvent = {
title:"Work 7.6h",
allDay: true,
start: date,
end: date
};
myCalendar.fullCalendar( 'renderEvent', myEvent,true );
},
eventClick: function(calEvent, jsEvent, view) {
var myCalendar = $('#calendar');
myCalendar.fullCalendar('removeEvents',calEvent._id);
}
})
});
And for my html I have:
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Calendar</div>
<div class="panel-body">
<div id='calendar'></div>
<a class='iframe' href='home.blade.php'>Click me</a>
</div>
<form id="logform" style="display:none">
<input type="text" name="something">
<input type="text" name="somethingelse">
</form>
</div>
</div>
</div>
</div>
The trouble started only after adding the code between //popupcode start and //popupcode end now my calendar won't even show and I get
SyntaxError: missing ) after argument list
The place it is pointing at is the 3rd line above my //popupcode end here:
}
}
} //this one
}
}),
//POPUPCODE END
But no matter what I add or remove there I keep getting the same error
I figured it out myself, instead of making things harder by learning all kinds of new things I got it to work by removing all the code I added previously and adding 1 line of code to create the popup by using jquery.
I removed all the code that I was using to create the popup and replaced it by this: $("#somediv").load().dialog({modal:true});
I created a div called 'somediv' around my form and now it's doing what I need it to do, seeing as my entire form is in the popup now I'm pretty sure I can add a button to it that can submit the form so I can catch that with php and then I'll be able to do whatever I want with the data in php (post to database or return error messages etc...)
Ok, first of all, i recommend to use Javascript.
It's possible with only PHP, HTML and CSS but you will have to refresh the page all the time for the next popup to appear.
You can just make divs that are positioned fixed or absolute and they will overlay the underlaying content. The overlaying div(popup) will be a normal div where you can make forms and whatever you want.
Here is a quick jsfiddle I threw toghether:
http://jsfiddle.net/0zvqm5nr/17/
Here is the code:
HTML
<div class="calendar">
<h1>Your calendar would be here</h1>
<button id="popupButton">13.05.2015</button>
</div>
<div class="popup">
<h2>13.05.2015</h2>
Activity:
<form action="site.php" method="post">
<select id="activity">
<option class="placeholder" selected disabled>Select</option>
<option>work</option>
<option>youth leave</option>
</select>
</form>
</div>
<div class="popup">
<h3>Work 13.05.2015</h3>
this will be the work popup
</div>
<div class="popup">
<h3>Youth leave 13.05.2015</h3>
this will be the youth leave popup
</div>
CSS
.calendar {
width: 500px;
height: 500px;
background: green;
}
.popup {
width: 500px;
height: 500px;
background: grey;
display: none;
position: fixed;
top: 0;
left: 0;
}
Javascript
document.getElementById("popupButton").onclick = function() {
document.getElementsByClassName("popup")[0].style.display = "block"
}
document.getElementById("activity").onchange = function() {
document.getElementsByClassName("popup")[0].style.display = "none"
var selectedValue = this.options[this.selectedIndex].innerHTML;
if (selectedValue == "work") {
document.getElementsByClassName("popup")[1].style.display = "block";
}
if (selectedValue == "youth leave") {
document.getElementsByClassName("popup")[2].style.display = "block";
}
}
I hope this helped.
Related
i am trying hide and show my div element, but when i hide the top div, the below div show then ( but must be refresh ) it will not loaded after we refresh,
and when i log out, i show back my homepage, but need to refresh also, how to handle this ??
if (localStorage.getItem("token")) {
$("#isLoggin").hide();
$("#logout").show();
$("#homepag").hide();
$(".container-nav").css({ height: "50%" });
$("#article").show();
} else {
// $("#aframe").hide();
$("#article").hide();
$("#homepag").show();
$("#logout").hide();
$("#isLoggin").show();
}
my homepage like this
<div class="container-nav">
<div id="homepag">
</div>
<div id="article">
</div>
</div>
can i make loading loader when trigger to article and hide the hopepage?
i am on SPA
Wow, you question is like a logic puzzle, lol. I finally got what you're asking!
The answer is yes, do this:
if (localStorage.getItem("token")) {
$("#isLoggin").hide();
$("#logout").show();
$(".container-nav").css({ height: "50%" });
$("#article").show();
$("#article").siblings().hide();
} else {
// $("#aframe").hide();
$("#article").hide(); // hide this with CSS instead
$("#homepag").show();
$("#logout").hide(); // hide this with CSS instead
$("#isLoggin").show();
}
I am having an issue showing a hidden DIV after posting a form with Ajax. The setup is like so;
index.html - My content and form is loaded into a div from a resource page
<div id="inst_stud_resource_change_success" style="display: none;">
<div class="greenbox">
Deleted!
</div>
</div>
<div id="inst_stud_resources_getpackages">
<script type="text/javascript">
$("#inst_stud_resources_getpackages").fadeOut("slow").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').fadeIn('slow');
</script>
</div>
/inst/stud/resources/getpackages.html - this page has the form, and the content needed for the DIV on index.html
The Jquery is used like so on getpackages.html;
<script type="text/javascript">
$(document).ready(function() {
$('#delete_package').on('submit', function(event) {
$.ajax({
data : {
stud_id : $('#stud_id').val(),
pck_id : $('#pck_id').val()
},
type : 'POST',
url : '{{ url_for('mod_inst_stud.delete_package2') }}'
})
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show(); // IGNORE haven't gotten this far
$('#successAlert').hide(); // IGNORE haven't gotten this far
}
else {
$("#inst_stud_resources_getpackages").hide(); // doesn't seem to do anything
$('#inst_stud_resource_change_success').show(); // never shows the div on Index.html
$('#inst_stud_resource_change_success').delay(3200).hide(); // never hides, since it is never shown..
$("#inst_stud_resources_getpackages").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').show(); // this seems to work since the div from index.html is updated with the new content from getpackages.html
}
});
event.preventDefault();
});
});
Any ideas what is going on? I'm not really that verse in web development, my background is more in python/flask, not Jquery/Ajax/CSS.
I found the solution..
else {
$("#inst_stud_resources_getpackages").hide();
$('#inst_stud_resource_change_success').fadeIn(1000);
$('#inst_stud_resource_change_success').delay(2600).fadeOut(3500);
$("#inst_stud_resources_getpackages").delay(7200).fadeIn().load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}');
}
Apparently there is a queue in Jquery, however .load() will always go to the front. So It was negating the order of my calls. I had to move some lines around, and add an animation to .load() in order to delay it from loading right way. Seems to be working well now.
I'm creating a fairly simple FAQ system to overhaul my company's outdated one. The page layout is very basic:
<div class="faq_c"> // Container
<div class="faq_q">Question Goes Here</div> // Question -- clicking this should open the Answer div in a dialog
<div class="faq_a">Answer Goes Here</div> // Answer
</div>
The faq_a class has display:none set in CSS to hide it.
What I'm wanting to do is have each faq_a load into a modal dialog when the parent faq_q class DIV is clicked. The structure of the modal should be:
Question
--------- // Horizontal Rule formatted with CSS
Answer
jQuery (Revised)
$(document).ready(function(){
$('.faq_a').each(function(){
$('.faq_a').dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
overflow: scroll,
title: "Frequently Asked Question",
width: 500
});
$('.faq_q').click(function(){
$('.faq_a').dialog('open');
});
});
});
This isn't working exactly correctly. Instead of opening the single desired faq_a it's opening all of them. I also can't figure out how to get the desired layout inside the div.
Thanks in advance.
Looks like you just need to fix your selector:
jsFiddle
//var $dialog = $('<div>' + $('.faq_q') + '<hr>' + $('.faq_a') + '</div>'); // bad
var $dialog = $('div, .faq_q, hr, .faq_a');// good
$dialog.click(function() {
alert('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click me
</div>
I want to create a small popup/notification that will occur when values change in my database. the logic is being passed correctly. However, I'm not sure how to make the popups occur properly and at all as well.
I have two buttons:
CS
GH
I would like to have the notifications pop up a little bit above these buttons. This is what I have created but I just haven't positioned them yet:
<div id="GH_popup" data-role="popup">
<p> GH is OFF! </p>
</div>
<div id="CS_popup" data-role="popup">
<p> CS is OFF! </p>
</div>
I also have some Javascript that determines when these notifications will pop up:
<script type="text/javascript" >
$(document).ready(function () { GrabGhCsStatus(); });
function GrabGhCsStatus() {
var url = '#Html.Raw(Url.Action("index","GhCsStatus"))';
$.get(url, function (data) {
if (data.CheckIfCsIsRunning == 1 && data.CheckIfGhIsRunning == 0) {
$("#GH_popup").popup();
$("#GhCsStatus_GH").remove();
if (data.CsStatus == 0) {
$('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Red' });
} else {
$('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Green' });
}
}
}
...
...
...
</script>
I feel as though I am putting the jQuery popup attributes in the wrong areas and that I am not using them properly =/
To call a popup programmatically, use this code
$('#popup_id').popup('open');
To close it
$('#popup_id').popup('close');
Popup widget API
I am trying to display a fancy html popup/frame (not windows style) to the customer when a particular form is submitted. Not sure what would be the best way of doing that!
I tried something with the code below but there are 2 issues with this. Firstly the box that comes as a popup looks like a windows popup box (browser type) which I don't want. I just want a simple square box where I can add colors, image etc. Another problem is that my links within this code are not working. For eg. I want one of the links to take me to another page on the site after closing the message box, and the other link could simple be used to close the box... or may be just 2 links that could take me to 2 different pages!
<form action="do.something" method="post" onsubmit="return action_submitted();">
<script type="text/javascript">
function action_submitted() {
HTML = '';
HTML += '<html><head><title>New Action</title></head>';
HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">';
HTML += 'Congrats, your action was successful! <br/>';
HTML += 'Close Message<br/>';
HTML += 'There<br/>';
HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
HTML += '</body></html>';
var w = 500;
var h = 200;
var l = (screen.availWidth - w) / 2;
var t = (screen.availHeight - h) / 2;
actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');
if (actionwin && !actionwin.closed) actionwin.focus();
return true;
}
</script>
Please help :)
Many thanks!
try using jquery modal dialog:
var modal = "<div id='modal_pop'>" +
"<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" +
"<p>This is a fancy modal pop up.</p>" +
"</div>";
and call the modal dialog
$(modal).dialog({
modal: true,
width: 400,
height: opts.windowHeight,
closeOnEscape: false,
draggable: false,
resizable: false,
zIndex: 99999,
bgiframe: true,
title: Sample!',
buttons: {
"OK": function () {
// your action on OK clikc
$(this).dialog('close');
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
more info on this site.
I suggest you need to create popup div in HTML at bottom of body. Hide popup by default By CSS and when you want to open it, then make it visible by javascript and pass content you do want to display if you have dynamic content.
HTML
<div id="popupWrapper">
<div id="popup">
content goes here
</div>
</div>
CSS
#popupWrapper { display: none;}
jQuery
$('#button').live('click', function() {
$('#popup').text('content goes here');
$('#popupWrapper').fadeIn();
});
Because in your case you are creating poup every time you click on button. which is not good way to do it.
Also don't use any other plugin because it's not good to use third party plugin for simple stuffs like that. It's make your project more complicated and slow. Because they design for multiple situations with multiple options, and if you not need that mean it's worth to use that plugin.