I have a master page that uses ajax to load contents in a div named 'Wrapper'.
Now I have a problem loading jquery UI tabs this way. I can load and show them if I ignore using AJAX. But when Using ajax just the tabs are being shown and not the panes! I have read all the topics regarding this issue but they didn't solve my problem.
JQuery code is :
$(function(){
$('#link').live('click',function(){
$.ajax({
url: "tabs.php",
success: function(response)
{
$("#Wrapper").html(response);
console.log(response);
}
});
});
});
The tabs.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fa-ir" lang="fa-ir">
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/menu.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<style>
div.panes div h2
{
margin:5px 0 15px 0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs-panes.css"/>
<style type="text/css">
div.panes div
{
-background:#fff;
height:auto;
}
div.panes label
{
margin-bottom:15px;
display:block;
}
label.error
{
color:red;
}
body
{
background-color:#d4d6da;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/syntax.css"/>
<link rel="stylesheet" type="text/css" href="css/demos.css"/>
</head>
<body>
<table style="width:100%;height:auto;border:1px dashed blue;" >
<tr>
<td align="center">
<div id="wizard_tabs">
<!-- tabs -->
<ul class="tabs">
<li>1- File upload</li>
<li>2- Proj explanation</li>
</ul>
<!-- form and panes -->
<form action="projects-regEN.php" method="post" enctype="multipart/form-data">
<div class="panes" style="font-family:tahoma">
<div style="border:1px solid #1c94c4;" id="tabs-1">
<table id="projINFO" style="width:100%">
<tr>
<td>
<span class="innerStyle">Title</span>
</td>
<td>
<input type="text" style="width:150px" maxlength="50" id="projectTitle" name="projectTitle"/>
</td>
</tr>
<tr>
<td style="width:31%" >
<span class="innerStyle">Proj Upload</span>
</td>
<td style="width:30%">
<input type="file" id="projectUpload" name="projectUpload"/>
</td>
</tr>
</table>
<br/>
<input type="button" class="next" id="next" name="continue"/>
</div>
<div style="border:1px solid #1c94c4;" id="tabs-2">
<table style="width:100%;border:1px solid black;font-family:tahoma;font-size:11px">
<tr>
<th>
title
</th>
</tr>
<tr>
<td id="firstCol"></td>
</tr>
</table>
<br/>
<span class="innerStyle">explanation</span>
<textarea rows="4" maxlength="150" class="formItems" id="ProjInfo" name="ProjInfo" placeholder="پیام خود را اینجا وارد کنید"></textarea>
<input type="submit" id="submitproj" name="done"/>
</div>
</div>
</form>
</div>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(function(){
var wizard = $("#wizard_tabs");
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index)
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if (index > 0 && (projUp==''|| projTi=='' ))
{
$("#projectUpload").parent().addClass("error");
return false;
}
$("#projectUpload").parent().removeClass("error");
});
// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");
$(".next", wizard).click(function()
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if(projUp!='' && projTi!='')
api.next();
});
});
</script>
</td>
</tr>
</table>
</body>
</html>
Using the papers I have read I tried initializing :
$("ul.tabs").tabs("div.panes <> div");
I put it in the success function of ajax but it didn't help. I also put it in the tabs.php but neither it helped. I don't know what else to do?!
Based on where I put the initial statement, it gives me different errors like:
"Uncaught Error:cannot call methods on tabs prior to initialization; attempted to call method 'div.panes > div'"
or
"Uncaught TypeError: Object [object Object] has no method 'tabs' "
Thanks
It looks like there is a small error (though maybe a typo for the question) in your code: <> should simply be >. Also, are you including every js file you need for tabs to work? The second error indicates that a required JS file/class may be missing.
For example, you may have included the jquery base, but did you include tools?
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
Related
How do I edit the design hidden somewhere in this code? Currently this has a functioning search and I want to put an Add button next to a textbox. But I cannot even find the search in this code I'm showing below. I found this datatable template bootstrap on youtube.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Survey Settings</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Category ID</td>
<td>Category Name</td>
<td >Action</td>
</tr>
</thead>
<tbody>
<?php
foreach($allCategories_arr as $ar) {
echo "<tr>";
echo "<td>" . $ar['category_id'] . "</td>";
echo "<td>" . $ar['categoryname'] . "</td>";
echo "<td><a class='btn btn-default' href='viewsubcategory.php?catid=" . $ar['category_id'] . "' >More Info</a>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
I discovered that this code was triggering the whole design. Therefore, is there anyway I can show the 'hidden' code in this script? I just want to pud an add button and a textbox next to the search.
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Ok not sure I totally understand your requirements but going from your original post it says an add button by the search box that allows you to insert rows into the datatable. the solution below adds an inline form in the toolbar. then the onclick event adds the row to the datatable.
function category(id, name, action) {
var self = this;
this.id = id;
this.name = name;
this.action = action;
}
function model() {
var self = this;
this.categories = [];
}
var mymodel = new model();
$(document).ready(function() {
mymodel.categories.push(new category('1', 'Cat1', 'Post'));
mymodel.categories.push(new category('2', 'Cat2', 'Get'));
mymodel.categories.push(new category('3', 'Cat3', 'Put'));
var table = $('#mytable').DataTable({
data: mymodel.categories,
columns: [{
data: 'id'
}, {
data: 'name'
}, {
data: 'action'
}
],
dom: '<"toolbar">frtip'
});
$("div.toolbar").html(
'<form class="form-inline">\
<div class="form-group">\
<input type="text" class="form-control" id="rowid" placeholder="id">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="name" placeholder="name">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="action" placeholder="action">\
</div>\
<input type="button" class="btn btn-danger" id="add" value="add"></input>\
</form>'
);
$('#add').click(function(event) {
table.row.add({
'id': $('#rowid').val(),
'name': $('#name').val(),
'action': $('#action').val()
}).draw(false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mytable">
<thead>
<tr>
<th>Category Id</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I'm using Agile Toolkit version 4.2.4 trying to implement the Exchanging rows between grids example found here: https://agiletoolkit.org/doc/grid/interaction
I have created the TSGrid class with the following code:
class TSGrid extends Grid {
function setReloadThis($view){
if($id=$_GET[$this->name.'_chsex']){
// do note, usually we supply 2 arguments for set() function. Second
// argument is being properly quoted (or parametrized), however in this
// case no quoting is required. Hence all the statement goes into first
// argument.
$this->dq->set('gender=if(gender="M","F","M")')
->where('id',$id)
->do_update();
// univ()->page() method updates page content through AJAX. In this case each
// grid is unaware of other objects on the page. So to keep it safe, we will refresh
// page completely.
$view->js()->reload()->execute();
}
return $this;
}
function init(){
parent::init();
$g=$this;
// When you are making your own classes, you must always keep in mind
// that those objects must be just as re-usable as original grids. In our case
// we do set the table and fields, however we leave it up to parent to set the
// additional conditions on our query. This is a major reason for the philosophy
// of Agile Toolkit saying to keep properties public.
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->addColumn('text','gender');
$g->addColumn('button','chsex','Change Sex');
$g->setSource('test');
}
function defaultTemplate(){
return array('grid_striped');
}
}
and inserted it in the lib folder of the agile toolkit installation.
I have created a test page with the following code:
class page_test extends Page {
function init(){
parent::init();
$p=$this;
$c=$p->add('View_Columns');
$col=$c->addColumn();
$col->add('H3')->set('Male list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','M');
$col=$c->addColumn();
$col->add('H3')->set('Female list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','F');
}
}
In my database, I have made the "test" table with id, name, surname and gender fields.
When I click the "Change sex" button, I get this:
"Error in AJAXec response: SyntaxError: Unexpected token <"
The AJAX response from the server is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Agile Toolkit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="./atk4/templates/shared/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/atk-main.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/default/css/atk-custom.css" />
<script type="text/javascript" src="./atk4/templates/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/start-atk4.js"></script>
<script type="text/javascript" src="./atk4/templates/js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_loader.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_notify.js"></script>
<script type="text/javascript" src="./atk4/templates/js/atk4_univ.js"></script>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/ie8.css"/>
<script type="text/javascript" src="./atk4/templates/shared/css/ie8.js"></script>
<![endif]-->
<script type="text/javascript">
$(function(){
$.atk4.includeJS("./atk4/templates/js/atk4_univ.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_notify.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4(function(){ $('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').atk4_grid([]);
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').atk4_grid([]);
; });
});
</script>
</head>
<body>
<div id="atk-layout" class="atk-wrapper">
<div id="header">
<div id="atk-logo" class="ui-widget-header float-left"><img src="./atk4/templates/shared/images/logo.png" /></div>
<div id="header-right">
<script>
$(document).ready(function(){
$('.atk-menu-horizontal>ul>li:first-child').addClass("ui-corner-left");
$('.atk-menu-horizontal>ul>li:last-child').addClass("ui-corner-right");
$('.atk-menu-vertical>ul>li:first-child').addClass("ui-corner-top");
$('.atk-menu-vertical>ul>li:last-child').addClass("ui-corner-bottom");
$('.atk-menu .ui-state-default').hover(function() {
$(this).addClass("ui-state-hover");
}, function() {
$(this).removeClass("ui-state-hover");
});
});
</script>
<div id="agiletoolkit_menu" class="atk-menu atk-menu-horizontal ui-widget">
<ul>
<li class="ui-state-default">Welcome</li>
<li class="ui-state-default">Test1</li>
<li class="ui-state-default">Test2</li>
<li class="ui-state-active">Test3</li>
<li class="ui-state-default">Logout</li>
</ul>
</div>
<div id="atk-version"><b>Agile Toolkit™</b><br/><i><div id="agiletoolkit_licensor_upgradechecker" class="" style="">4.2.4 unlicensed</div>
</i></div>
</div>
</div>
<div id="agiletoolkit_test" class="page_test">
<div id="agiletoolkit_test_view_columns" class="atk-flexy">
<div id="agiletoolkit_test_view_columns_view_columns_column" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_h3" class="" style="">Male list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">stef</td>
<td style="white-space: nowrap">stefanel</td>
<td style="white-space: nowrap">M</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="agiletoolkit_test_view_columns_view_columns_column_2" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_2_h3" class="" style="">Female list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_2_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">eu</td>
<td style="white-space: nowrap">eueu</td>
<td style="white-space: nowrap">F</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_2_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="atk-footer-guard"></div>
</div>
<div id="footer" class="atk-wrapper">
This system is implemented using Agile Toolkit. © 1999–2012. See License
</div>
<div id="atk-growl-holder" class="atk-growl"></div>
</body>
</html>
Demo page is using older toolkit version, than in master branch. If you use example with master branch, you need following change:
$this->dq
->set('gender', $this->api->db->dsql()->expr('if(gender="M","F","M")'))
->where('id',$id)
->do_update();
this is due to change in dsql object.
here is working example with latest toolkit version
Firstly, I apologise if this is a really simple question to those with more experience, but I'm a little to new to this so I hope someone may be able to help me please.
I'm trying to implement a jQuery Modal Confirmation box upon a button click. This shown in the script below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<script type="text/javascript">
var deleteTheSelectedUrl = '';
$(document).ready(function() {
// create the jQuery modal window and set autoOpen to false
$("#jQueryDeleteConfirmationModalWindow").dialog({
title: "Delete Confirmation",
autoOpen: false, // set this to false so we can manually open it
dialogClass: "jQueryDeleteConfirmationModalWindow",
closeOnEscape: false,
draggable: false,
width: 460,
height: 260,
modal: true,
buttons: {
"Yes, I'm sure": function() {
$( this ).dialog( "close" );
if('' != jQuery.trim(deleteTheSelectedUrl)) {
window.location = deleteTheSelectedUrl;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
// bind the loading screen to each delete link, assuming you have some kind of way to select them via jQuery
jQuery('a.deleteConfirmation').click(function() {
deleteTheSelectedUrl = $(this).attr('href');
var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name
name = jQuery.trim(name);
$("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
$("#jQueryDeleteConfirmationModalWindow").dialog('open');
return false;
});
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<input name="username" type="hidden" id="username" value="IRHM73" />
<input name="locationid" type="hidden" id="locationid" value="1" />
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/>
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
//$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $galleryPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a><input type="radio" name="delete" /></li>
<p><span class="style4"><b>Image Name:</b> <?php echo htmlentities($xmlFile->getAttribute('originalname'));?> <br />
<b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The problem I'm having, is that when I click the 'Delete Selected Image' button, I receive this error:'jQueryDeleteConfirmationModalWindow' is undefined at line 92 which is this
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
I've rebuilt the page a few times, but I still get the same error, but I'm not sure why.
I just wondered whether someone could have a look at this please and let me know where I'm going wrong?
Thanks and regards
I don't see a div with the ID jQueryDeleteConfirmationModalWindow. Perhaps I am missing it? The jQuery Dialog is performed on an existing div.
http://jqueryui.com/demos/dialog/
<div id="jQueryDeleteConfirmationModalWindow">ARE YOU SURE???</div>
Your onlclick event handler should call a function name
<input type="button" onclick="showDialog()" ... />
then your JS will access it this way
function showDialog(){
$("#jQueryDeleteConfirmationModalWindow").dialog({...});
}
I have an update profile page.
It has three forms, it uses a get request to show any one form.
Like update_profile.php?type=profile lets the user edit his profile, update_profile.php?type=settings lets the user edit his account settings.
Type: profile has a file input, I want the users to be able to upload without page refresh.
Now this cant be done using ajax, so I will need a workaround. I've tried the iframe method, xhr2 method and html5 + ajax method which someone posted on stackoverflow.
So if someone would be kind to explain things to me in detailed steps I would appreciate that.
Here is my html:
<script type='text/javascript'>
function nouser() {
$().toastmessage('showToast', {
text : 'The user does not exist',
sticky : true,
position : 'middle-center',
type : 'error',
closeText: '',
close : function () {
console.log("toast is closed ...");
}
});
}
</script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Update Profile</title>
<link rel="shortcut icon" type="image/png" href="includes/template/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="includes/template/css2/style.css" />
<link rel="stylesheet" type="text/css" href="includes/jquery/toast/resources/css/jquery.toastmessage.css" />
<link rel="stylesheet" type="text/css" href="includes/jquery/notification/css/jquery_notification.css" />
<script type="text/javascript" src="includes/jquery/jquery_v_1.4.js"></script>
<script type="text/javascript" src="includes/jquery/toast/javascript/jquery.toastmessage.js"></script>
<script type="text/javascript" src="includes/jquery/notification/js/jquery_notification_v.1.js"></script>
<script type="text/javascript" src="includes/jquery/auto_resize/resize.js"></script>
<script type="text/javascript" src="includes/jquery/jquery_form.js"></script>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css2/ie.css" />
<![endif]-->
</head>
<body>
<div class="topBar" >
<marquee>Welcome to The Marshall Meme. Your IP Adress is 127.0.0.1 You are logged in as marshall</marquee>
</div>
<br />
<div class="logo" >
<img src="includes/template/images/logo.png"/><br/>
</div>
<center>
<div id="wrap">
<br>
<div class="wrapbg">
<span class="corners-top"><span></span></span>
<a class='nav' href='index.php'>Home</a>
<a class='nav' href='whoson.php'>Whos online</a>
<a class='nav' href='logout.php'>Logout</a> <a class='nav' href='forum.php'>Forum</a>
<span class="corners-bottom"><span></span></span>
</div><div class="wrapbg">
<span class="corners-top"><span></span></span>
<div id="content">
Web name
<hr class="hr1" />
<br />
<ul>
<a href='whats_new.php'><button class='action greenbtn'><span class='label'>Whats new?</span></button></a><a href='friend_requests.php'><button class='action redbtn'><span class='label'>Friend requests</span></button></a><a href='update_profile.php?type=profile'><button class='action greenbtn'><span class='label'>Edit profile</span></button></a><a href='update_profile.php?type=settings'><button class='action bluebtn'><span class='label'>Security Settings</span></button></a><a href='update_profile.php?type=changepass'><button class='action greenbtn'><span class='label'>Change password</span></button></a></div>
<span class="corners-bottom"><span></span></span>
</div><div id='emptydiv'> </div>
<div class="wrapbg">
<span class="corners-top"><span></span></span>
<div id="content"><br/>
Update profile
<hr class='hr1'>
<form action='' method="POST" enctype="multipart/form-data">
<table>
Profile picture<br>
<img src="uploads/profile_pics/TIFF_06_liam-neeson_01.jpg"></img>
Thumbnail
<img src="uploads/profile_pics_small/TIFF_06_liam-neeson_01.jpg" ?></img>
<tr><td class="lTxt">Change profile picture:</td> <td><input type="file" name="pic"/></td></tr>
<tr><td class="lTxt">About me:</td> <td><textarea name='about'>Updating my profile :|
fuck yeaaaa</textarea></td></tr>
<tr><td class="lTxt">Interests:</td> <td><textarea name='interests'>I love web development with jquery and php.
Really awesome! yea</textarea></td></tr>
<input type='hidden' name='action' value='profile'/>
<tr><td></td><td><button id="update_profile" name='update' class="action greenbtn"><span class="label">Update profile</span></button></td></tr>
</table>
</form>
</a></div>
<span class="corners-bottom"><span></span></span>
</div> <script type='text/javascript'>
$(function(){
$('form[name=update_stuff]').on("submit", function(e){
e.preventDefault();
$.ajax({
url: 'process.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
$('#emptydiv').html(data);
}
});
});
});
</script>
</div>
</br>
<div id="footer">
Copyright © 2010-2011, Marshall Meme. All rights reserved.<br>
There are no users online</div>
</div>
</center>
</body>
</html>
Here is the jQuery code I normally use to submit forms:
$(function(){
$('form[name=update_stuff]').on("submit", function(e){
e.preventDefault();
$.ajax({
url: 'process.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
$('#emptydiv').html(data);
}
});
});
});
I use the $_FILES in php to get the file name and verify its extension and size server side, so i need the information in that. How can this be done?
Also would i need to change the form name for updating profile and write a different code for it than the other forms in the same page?
You must have to use any server script to upload file so you have to Ajax method, j query with Ajax, you can try also uplaodify
http://www.uploadify.com/
In master.php
<?php
//echo "session check: ".$_SESSION['session_array'];
//exit;
session_start(); // Session Starts
if( !isset($_SESSION['session_array']) )
{
header("Location: index.php");
exit;
}
include("conn.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LMS</title>
<link rel="stylesheet" type="text/css" href="jui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="jui/general.css">
<link rel="stylesheet" type="text/css" href="jui/themes/icon.css">
<script type="text/javascript" src="jui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/core.js"></script>
</head>
<body class="easyui-layout">
<div region="north" class="north_master" border="false" split="false" >
<div style="float:left;">
<img src="images/usr_logo.jpg" alt="Lead Management System" width="168" height="66" title="Lead Management System" >
</div>
<div style="float:right;">
<br/><br/>
<a id="logout" name="logout" href="logout.php?logout=1" class="easyui-linkbutton" iconCls="icon-cancel" onClick="javascript: return confirm('Are you sure you want to log out?');">Logout</a>
</div>
</div>
<div region="south" class="south" border="false">
<?php include('footer.php'); ?>
</div>
<div region="center" class="center" style="background-image:url(img/product-display.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:right bottom; ">
<?php
include('dashboard.php');
?>
</div>
</body>
</html>
In dashboard.php
<script language="javascript">
jQuery(document).ready(function($){
alert("check");
});
</script>
<div class="content">
<h1>Slot Dashboard</h1>
<div>
Add Slot
</div>
<table border='1' bordercolor='#B4B4B4' cellpadding='1' cellspacing='0' width='80%' align="center">
<tr align="left">
<th>Week</th>
<th>Dates</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>09/04/2011 - 09/10/2011</td>
<td>Revised</td>
<td>09/04/2011</td>
<td>View</td>
</tr>
<tr>
<td>2</td>
<td>09/11/2011 - 09/17/2011</td>
<td>Revised</td>
<td>09/11/2011</td>
<td>View</td>
</tr>
<tr>
<td>3</td>
<td>09/18/2011 - 09/24/2011</td>
<td>Not Submitted</td>
<td>09/18/2011</td>
<td>View</td>
</tr>
</table>
</div>
Question: While master.php runs "check" alerts twice.
I need to know why "check" alerts twice. How to solve this
<div region=center>
The scripts within the div runs twice. there is some bug with jeasy-ui. Help me how to solve that.
Technically included page alert shouldn't fire twice. it is only possible in case of you add sample.php file in php.ini as auto_append_file
i found same problem in easyui every version, when script is included in to panel/layout, the script will be run twice, the reason I think:
the page be loaded in browser ,the browser run the script of page once, when dom is loaded ,the easyui render style for the node in dom, the script in the node will be called second by easyui.
this problem isn't only in layout , but in panel, Maybe even for the every thing inherit from panel.
this problem may be in the easyui's root render method, so I can't find solved for this without src.
now i have to change easyui to another ui framework.
example for theis problem, the alert be called twice in browser:
</div>
<div region="south" class="south" border="false">
</div>
<div region="center" class="center" >
<script>
alert("here");
</script>
</div>