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".
Related
I'm using jQuery and Ajax to load a bunch of divs into a scrollable div ("letterHolder"):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$(".letterHolder").html(result['letter_array']);
}
});
</script>
</head>
<body>
<div class="letterHolder">
</div>
</body>
</html>
The PHP script retrieves a list of filenames from the database and loads them into letterHolder, so it ends up looking like this:
<div class="letterHolder">
<div class="drag_letter">file1</div>
<div class="drag_letter">file2</div>
<div class="drag_letter">file3</div>
etc.
</div>
Now, I want to make those filename divs draggable, but this is not working:
$(".drag_letter").draggable({
cursor: 'move',
revert: true,
helper: 'clone'
});
It doesn't work if I put the draggable code into the page header, nor does it work if I put the code at the end of the page.
This was working fine before I tried creating the divs using Ajax.
I assume the reason this was working before you were using AJAX, but is not working with AJAX, is because you are calling draggable() with a selector for elements which are not yet in the DOM. If you call draggable() on the elements after receiving the AJAX result and appending the elements to the DOM it should work.
Using jQuery or java script append() function for adding DOM into an element instead of html()
add draggable after appending elements
you should send file names Like file1... file2... as a Json array From server
and rewrite this:
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$.each(result,function(k,v){
$(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
cursor: 'move',
revert: true,
helper: 'clone'
}));
});
}
});
</script>
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'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
I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below
I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images
when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt'}
});
});
});
Further pass it to the php file now here i m facing a problem what i need at the moment is
that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs
Here's the jquery code that should work:
<script>
$(function () {
$(document).on('click', 'div.prodcls img', function (e) {
e.preventDefault();
window.open($(this).attr('src').replace('/thumbnails', ''), '');
});
});
</script>
And some css for good measure:
<style>
div.prodcls img:hover {
cursor: pointer;
}
</style>
Here's a working fiddle: http://jsfiddle.net/DenGp/
Css:
#imagePopup{ float:left; z-index:10; position: absolute;}
Add some positioning
HTML:
<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>
JS:
$('.prodcls').click(function(){
var src = $(this).attr('src').replace('/thumbnail', '');
$("#imagePopup").html("<img src='"+src+"'/>")
$("#imagePopup").toggle();
});
Updated answer:
HTML: (give every image a link):
<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>
showImage.php:
$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;
You can open actual image in new browser tab without jQuery:
For Example:
<div id="prodoneid" class="prodcls">
<a href='images/zara1.png' target='_blank'>
<img src="images/thumbnail/zara/1.png" alt="ZARA"/>
</a>
</div>
Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/
You have an error in your AJAX code (your forgo to include the actual var:
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt':txt} //added :txt here
});
});
});
Now in PHP:
$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.