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
Related
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.
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 have list of user and I want to open each user detail in jQuery UI Popup. I write whole code but I'm confused how to pass each user ID to the dialog. Below is my code,
HTML
<div id="dialog" title="User Detail">
<p><?php $userID = $_GET[userID]; ?></p>
</div>
<a id="opener" href="#?userID=1">User 1</a>
<a id="opener" href="#?userID=2">User 2</a>
jQuery
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#dialog").dialog({
modal: true,
autoOpen: false,
resizable: false
});
jQuery( "#opener" ).click(function() {
jQuery( "#dialog" ).dialog( "open" );
});
});
To start, you cannot reuse an ID for a DOM element, so the selector you're using will only work for the first instance of the link with id="opener".
When you open the dialog, jQuery is simply showing an element on the current page which already exists and is not making a request to that or a new page. $_GET is a server-side super global and is only displayed when the page loads.
What you need to do is:
use "opener" as a class instead of an id
override the dialog's open
function to accept an additional parameter append that parameter to
your dialog markup
You can accomplish this with the following code which grabs the user id from the href attribute:
HTML:
<div id="dialog" title="User Detail">
<p></p>
</div>
<a class="opener" href="#?userID=1">User 1</a>
<a class="opener" href="#?userID=2">User 2</a>
Javascript:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#dialog").dialog({
modal: true,
autoOpen: false,
resizable: false,
open: function (event, ui) {
var id = $(this).data('id');
$('#dialog p').text(id);
}
});
jQuery( ".opener" ).click(function(event) {
event.preventDefault();
var id = $(this).attr('href').split('=')[1]; // grab id
jQuery( "#dialog" ).data('id', id).dialog( "open" );
});
});
The PHP to generate each link would look something like this:
$users = array(
array(
'id' => 1,
'name' => 'User 1',
),
array(
'id' => 2,
'name' => 'User 2',
)
);
foreach ($users as $user) {
print "<a class=\"opener\" href=\"#?userID=$user[id]\">$user[name]</a>";
}
*note I was lazy on that last one and escaped the quotes within the printed string
For a start IDs must be unique so I changed your opener ID into a class.
Then you may want to look at this:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#dialog").dialog({
modal: true,
autoOpen: false,
resizable: false
});
jQuery( ".opener" ).click(function() {
jQuery("#dialog p").text(jQuery(this).attr("href").substring(jQuery(this).attr("href").indexOf('=') +1));
jQuery( "#dialog" ).dialog( "open" );
});
});
In short, you build your dialog and then you display it.
And the working Fiddle
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