I have a tag of html for a href. This is my code:
<a href='#' class='popup' onclick='getPopup();'>$item->NAMA_NASABAH</a>
the code is sended from ci controller using ajax, and looped from database. So i have many a href. When i try to click the a href, the popup will show up.
here code in javascript:
function getPopup(){
alert('popup');
dialog.dialog("open");
}
dialog = $( "#loginform" ).dialog({
autoOpen: false,
height: 600,
width: 400,
modal: true
});
<div id="loginform" title="Create new user">TEST</div>
when i try to run my application, the alert is running, but my popup not showup. How can i fix it?, thanks.
function getPopup(){
dialog = $( "#loginform" ).dialog({
autoOpen: false,
height: 600,
width: 400,
modal: true
dialog.dialog("open");
}
The dialog must in above of open syntax.
Related
I successfully integrated SalvaPdfJsBundle into my Symfony2 project:
https://github.com/nibsirahsieu/SalvaPdfJsBundle
However, the documentation is very poor, and I have not yet found a way to use it for displaying pdfs in my modal.
Currently, I preview my pdfs like this with an iframe:
Results.html.twig
Preview PDF
<div id="preview-modal">
<div>
<iframe src=""></iframe>
</div>
</div>
<script type="text/javascript">
var $previewModal = $('#preview-modal');
var previewModal = $previewModal.dialog({
autoOpen: false,
width: 1000,
height: 'auto',
modal: true,
resizable: false
});
$('.show-modal').on('click', function () {
var fileUrl = $(this).attr('data-url');
$previewModal.find('iframe').attr('src', fileUrl);
previewModal.dialog('open');
});
</script>
What I want to achieve:
previewing the pdf inside the modal with SalvaPdfJS
having a simple preview WITHOUT download option
Any ideas how to achieve this?
I am trying to open a chat portal in a dialog using jquery.
Here is my code
<img class="chatBtn" id="chat_btn" style="margin-top: 10px; margin-left: 10px" src="images/colored_livecha.png" alt="" width="80" height="33" />
jQuery('.chatBtn').click(function() {
var dlg = jQuery('#chat_btn').dialog({
autoOpen: 'false',
modal: 'true',
minHeight:'300px',
minWidth: '300px'
});
dlg.load('chat.php', function(){
dlg.dialog('open');
});
});
However on click nothing happens. What amendments are required?
You'll need to wrap that in a script tag.
<script>
jQuery('.chatBtn').click(function()
{
var dlg = jQuery('#chat_btn').dialog(
{
autoOpen: 'false',
modal: 'true',
minHeight:'300px',
minWidth: '300px'
});
dlg.load('chat.php', function(){
dlg.dialog('open');
});
});
</script>
Another question, is jQuery included in the head or somewhere in the page?
The simplest way would be to get the information in the database using PHP, and populate the UI tables like that. The major downside would be loading time. If you find that the page is taking too long to load, then you may want to look into jQuery's .ajax()
I think you need to reference jquery library :
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css.
src="//code.jquery.com/jquery-1.10.2.js".
src="//code.jquery.com/ui/1.10.4/jquery-ui.js".
rel="stylesheet" href="/resources/demos/style.css".
I'm trying to load the content of a PHP file in a jQuery UI dialog, but the dialog won't open.
If I debug the code with FireBug, there seems to be an break without any error report on the following line $('#formDialog_open').load($(this).attr('href'), function()
HTML
<div id="formDialog_open" class="widget grid6" title="Dialog with form elements">
//my php codes
</div>
hyperlink what fires the dialogbox
<a href="edit.php?id=' .$aRow['id']. '" id="form" class="tablectrl_small bDefault tipS" title="Edit">
The Javascript
$('#form').live('click',function(e) {
e.preventDefault();
$('#formDialog_open').load($(this).attr('href'), function(){
$('#formDialog_open').dialog({
title: 'User Administration',
resizable: true,
modal: true,
hide: 'fade',
width:350,
height:275,
});//end dialog
});
});
Suggest you following `
$("#button1").click(function () {
$('#formDialog_open').dialog({
title: 'User Administration',
resizable: true,
modal: true,
hide: 'fade',
width:350,
height:275,
});//end dialog
});`
Check it out and find out that it seems click event is not execute. So I have given a code for the #button1 click event.
Also you can use followJquery Dialog and Click Event Jquery documents
why is that ajaxForm is not running in jQuery Dialog modal confirmation whenever it is included in a "Delete Item" button.
Here is my jquery dialog:
<div id="deleteDialogForPartylist" title="Delete this item?">
<form id="deleteDialogForPartylistForm" action="mEdit/editPartylist/storeDataToDb/deleteData.php">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><span id="acronymOfTheParty" style="font-weight:bolder"></span> will be permanently deleted and cannot be recovered. Are you sure?</p>
<input type="hidden" id="deleteDialogForPartylistHiddenId" name="deleteDialogForPartylistHiddenId">
</form>
</div>
Here is my script
$(function(){
$( "#deleteDialogForPartylist" ).dialog({
autoOpen: false,
resizable: false,
height:225,
hide: 'fade',
modal: true,
buttons: {
Cancel: function() {
$("#deleteDialogForPartylist").dialog('close');
},
"Delete item": function() {
$('#deleteDialogForPartylistForm').ajaxForm({
target: '#partyListInAddCandidate',
type: "post",
success: function(){
alert("Success");
$("#deleteDialogForPartylist").dialog('close');
}
});
}
}
});
});
.ajaxForm() does not submit the form as stated in the documentation of the plugin (http://malsup.com/jquery/form/#api)
In your case you should use .ajaxSubmit() instead, which will instantly submit your form on button-click as already suggested by charlietfl's comment
Here's my problem...
I have the following jQuery UI script :
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "slideUp",
hide: "slideDown",
height: "300",
width: "400",
title: "Test pop-up",
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
}
);
$( "p.diag").click(function(e) {
var monUrl = 'test2.php';
$('#dialog').load(monUrl, function(response, status) {
$('#test_dialog').html(response);
});
e.preventDefault();
});
$( "p.diag").click(function() {
$( "#dialog" ).dialog("open");
});
It's a pretty simple code, it opens correctly my dialog box when I click on a p.diag class, but it won't re open after I close it.
The test2.php page just print a "lol" with a echo "lol";
And here's my HTML :
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
</div>
Thanks !
Pleas remove e.preventDefault();
see this demo: http://jsfiddle.net/ngwJ3/
Reason: http://api.jquery.com/event.preventDefault/ : If this method is called, the default action of the event will not be triggered.
Hope this help :)