Search Results

Search found 10226 results on 410 pages for 'width'.

Page 405/410 | < Previous Page | 401 402 403 404 405 406 407 408 409 410  | Next Page >

  • Fetch image from folder via datatable does not work after placing image in subdirectory

    - by Arnold Bishkoff
    I am having trouble wrapping my head around the following I have code that fetches an image via smarty in a line img src="getsnap.php?picid={$data[$smarty.section.sec.index].picno|default:$nextpic}&typ=pic&width={$config.disp_snap_width}&height={$config.disp_snap_height}" class="smallpic" alt="" / this works if i pull the image from /temp/userimages/userid/imageNo.ext but because an OS can segfault if you store too many folders or images in a directory i have code that assigns the user image to a subdirectory based upon division of a subdir per 1000 userids. so in thise case i have user id 94 whos images get stored in /siteroot/temp/userimages/000000/94/pic_1.jpg (through 10) or tn_1 (through 10).jpg here is the code for getsnap.php <?php ob_start(); if ( !defined( 'SMARTY_DIR' ) ) { include_once( 'init.php' ); } include('core/snaps_functions.php'); if (isset($_REQUEST['username']) && $_REQUEST['username'] != '') { $userid = $osDB-getOne('select id from ! where username = ?',array(USER_TABLE, $_REQUEST['username']) ); } else { // include ( 'sessioninc.php' ); if( !isset($_GET['id']) || (isset($_GET['id'])&& (int)$_GET['id'] <= 0 ) ) { $userid = $_SESSION['UserId']; } else { $userid = $_GET['id']; } } if (!isset($_GET['picid']) ) { if ((isset($_REQUEST['type']) && $_REQUEST['type'] != 'gallery') || !isset($_REQUEST['type']) ) { $defpic = $osDB-getOne('select picno from ! where userid = ? and ( album_id is null or album_id = ?) and default_pic = ? and active = ? ',array(USER_SNAP_TABLE, $userid,'0','Y','Y' ) ); if ($defpic != '') { $picid = $defpic; } else { $picid = $osDB-getOne('select picno from ! where userid = ? and ( album_id is null or album_id = ?) and active=? order by rand()',array(USER_SNAP_TABLE, $userid,'0','Y' ) ); } unset( $defpic); } } else { $picid = $_GET['picid']; } $typ = isset( $_GET['typ'])?$_GET['typ']:'pic' ; $cond = ''; if ( ($config['snaps_require_approval'] == 'Y' || $config['snaps_require_approval'] == '1') && $userid != $_SESSION['UserId'] ) { $cond = " and active = 'Y' "; } $sql = 'select * from ! where userid = ? and picno = ? '.$cond; //Get the pic $row =& $osDB-getRow ( $sql, array( USER_SNAP_TABLE, $userid, $picid ) ); //Okay pic was found in the DB, Lets actually do something // $id = $userid; $dir = str_pad(($id - ($id % 1000))/100000,6,'0',STR_PAD_LEFT); $zimg = USER_IMAGES_DIR.$dir; $img = getPicture($zimg, $userid, $picid, $typ, $row); //$img = getPicture($userid, $picid, $typ, $row); //$img = getPicture($dir, $userid, $picid, $typ, $row); $ext = ($typ = 'tn')?$row['tnext']:$row['picext']; // Now pic is built as // something pic_x.ext ie pic_2.jpg if ( $img != '' && ( ( hasRight('seepictureprofile') && ( $config['snaps_require_approval'] == 'Y' && $row['active'] == 'Y' ) ||$config['snaps_require_approval'] == 'N' ) || $userid == $_SESSION['UserId'] ) ) { $img2 = $img; //$img2 = $dir.'/'.$img; } else { $gender = $osDB-getOne( 'select gender from ! where id = ?', array( USER_TABLE, $userid ) ) ; if ($gender == 'M') { $nopic = SKIN_IMAGES_DIR.'male.jpg'; } elseif ($gender == 'F') { $nopic = SKIN_IMAGES_DIR.'female.jpg'; } elseif ($gender == 'D') { $nopic = SKIN_IMAGES_DIR.'director.jpg'; } $img2 = imagecreatefromjpeg($nopic); $ext = 'jpg'; } ob_end_clean(); header("Pragma: public"); header("Content-Type: image/".$ext); header("Content-Transfer-Encoding: binary"); header("Cache-Control: must-revalidate"); $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() - 30) . " GMT"; header($ExpStr); $id = $userid; $dir = str_pad(($id - ($id % 1000))/100000,6,'0',STR_PAD_LEFT); $zimg = USER_IMAGES_DIR.$dir; //header("Content-Disposition: attachment; filename=profile_".$userid."_".$typ.".".$ext); //header("Content-Disposition: attachment; filename=$dir.'/'.profile_".$userid."".$typ.".".$ext); //header("Content-Disposition: attachment; filename=profile"$dir".'/'.".$userid."_".$typ.".".$ext); header("Content-Disposition: attachment; filename=profile_".$userid."_".$typ.".".$ext); /* if ($_SESSION['browser'] != 'MSIE') { header("Content-Disposition: inline" ); } */ if ($ext == 'jpg') { imagejpeg($img2); } elseif ($ext == 'gif') { imagegif($img2); } elseif ($ext == 'png') { imagepng($img2); } elseif ($ext == 'bmp') { imagewbmp($img2); } imagedestroy($img2); ?

    Read the article

  • Ldap invalid credentials not loading authentication failure url

    - by Murari
    Able to do the custom ldap authentication for external db authorities. But when i am trying to test wrong password the authentication failure url is not showing instead my browser prints the exception details.Below is my securitycontext.xml and exption given <http auto-config="false" access-decision-manager-ref="accessDecisionManager" access-denied-page="/accessDenied.jsp"> <!-- Restrict access to ALL other pages --> <intercept-url pattern="/index.jsp" filters="none" /> <!-- Don't set any role restrictions on login.jsp --> <intercept-url pattern="/**" access="IS_AUTHENTICATED_ANONYMOUSLY" /> <intercept-url pattern="/service/**" access="PRIV_Report User, PRIV_305" /> <logout logout-success-url="/index.jsp" /> <form-login authentication-failure-url="/index.jsp?error=1" default-target-url="/home.jsp" /> <anonymous/> </http> <b:bean id="accessDecisionManager" class="org.springframework.security.vote.AffirmativeBased"> <b:property name="decisionVoters"> <b:list> <b:ref bean="roleVoter" /> <b:ref bean="authenticatedVoter" /> </b:list> </b:property> </b:bean> <b:bean id="roleVoter" class="org.springframework.security.vote.RoleVoter"> <b:property name="rolePrefix" value="PRIV_" /> </b:bean> <b:bean id="authenticatedVoter" class="org.springframework.security.vote.AuthenticatedVoter"> </b:bean> <b:bean id="contextSource" class="org.springframework.security.ldap.DefaultSpringSecurityContextSource"> <b:constructor-arg value="ldap://mydomain:389" /> </b:bean> <b:bean id="ldapTemplate" class="org.springframework.ldap.core.LdapTemplate"> <b:constructor-arg ref="contextSource" /> </b:bean> <b:bean id="ldapAuthenticationProvider" class="com.zo.sas.gwt.security.login.server.SASLdapAuthenticationProvider"> <b:property name="authenticator" ref="ldapAuthenticator" /> <custom-authentication-provider /> </b:bean> <b:bean id="ldapAuthenticator" class="com.zo.sas.gwt.security.login.server.SASAuthenticator"> <b:property name="contextSource" ref="contextSource" /> <b:property name="userDnPatterns"> <b:value>uid={0},OU=People</b:value> </b:property> </b:bean> and my exception logs..... org.springframework.ldap.AuthenticationException: [LDAP: error code 49 - Invalid Credentials]; nested exception is javax.naming.AuthenticationException: [LDAP: error code 49 - Invalid Credentials] org.springframework.ldap.support.LdapUtils.convertLdapException(LdapUtils.java:180) org.springframework.ldap.core.support.AbstractContextSource.createContext(AbstractContextSource.java:266) org.springframework.ldap.core.support.AbstractContextSource.getContext(AbstractContextSource.java:106) com.zo.sas.gwt.security.login.server.SASAuthenticator.authenticate(SASAuthenticator.java:55) com.zo.sas.gwt.security.login.server.SASLdapAuthenticationProvider.authenticate(SASLdapAuthenticationProvider.java:45) org.springframework.security.providers.ProviderManager.doAuthentication(ProviderManager.java:188) org.springframework.security.AbstractAuthenticationManager.authenticate(AbstractAuthenticationManager.java:46) org.springframework.security.ui.webapp.AuthenticationProcessingFilter.attemptAuthentication(AuthenticationProcessingFilter.java:82) org.springframework.security.ui.AbstractProcessingFilter.doFilterHttp(AbstractProcessingFilter.java:258) org.springframework.security.ui.SpringSecurityFilter.doFilter(SpringSecurityFilter.java:53) org.springframework.security.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:390) org.springframework.security.ui.logout.LogoutFilter.doFilterHttp(LogoutFilter.java:89) org.springframework.security.ui.SpringSecurityFilter.doFilter(SpringSecurityFilter.java:53) org.springframework.security.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:390) org.springframework.security.context.HttpSessionContextIntegrationFilter.doFilterHttp(HttpSessionContextIntegrationFilter.java:235) org.springframework.security.ui.SpringSecurityFilter.doFilter(SpringSecurityFilter.java:53) org.springframework.security.util.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:390) org.springframework.security.util.FilterChainProxy.doFilter(FilterChainProxy.java:175) org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(DelegatingFilterProxy.java:183) org.springframework.web.filter.DelegatingFilterProxy.doFilter(DelegatingFilterProxy.java:138) This is my index.jsp <html> <script type="text/javascript" language="javascript"> var dictionary = { loginErr: "${SPRING_SECURITY_LAST_EXCEPTION.message}", error: "${param.error}" }; </script> <head> </head> <body > <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> <script type="text/javascript" language="javascript" src="com.zo.sas.gwt.sasworkflow.home.Home.nocache.js"></script> </body> </html>

    Read the article

  • SDL+OpenGL app: blank screen

    - by Lococo
    I spent the last three days trying to create a small app using SDL + OpenGL. The app itself runs fine -- except it never outputs any graphics; just a black screen. I've condensed it down to a minimal C file, and I'm hoping someone can give me some guidance. I'm running out of ideas. I'm using Windows Vista, MinGW & MSYS. Thanks in advance for any advice! #include <SDL/SDL.h> #include <SDL_opengl.h> size_t sx=600, sy=600, bpp=32; void render(void) { glEnable(GL_DEPTH_TEST); // enable depth testing glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // clear to black glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // clear color/depth buffer glLoadIdentity(); // reset modelview matrix glColor3b(255, 0, 0); // red glLineWidth(3.0); // line width=3 glRecti(10, 10, sx-10, sy-10); // draw rectangle glFlush(); SDL_GL_SwapBuffers(); } int input(void) { SDL_Event event; while (SDL_PollEvent(&event)) if (event.type == SDL_QUIT || (event.type == SDL_KEYUP && event.key.keysym.sym == SDLK_ESCAPE)) return 0; return 1; } int main(int argc, char *argv[]) { SDL_Surface* surf; if (SDL_Init(SDL_INIT_EVERYTHING) != 0) return 0; if (!(surf = SDL_SetVideoMode(sx, sy, bpp, SDL_HWSURFACE|SDL_DOUBLEBUF))) return 0; glViewport(0, 0, sx, sy); // reset the viewport to new dimensions glMatrixMode(GL_PROJECTION); // set projection matrix to be current glLoadIdentity(); // reset projection matrix glOrtho(0, sx, sy, 0, -1.0, 1.0); // create ortho view glMatrixMode(GL_MODELVIEW); // set modelview matrix glLoadIdentity(); // reset modelview matrix for (;;) { if (!input()) break; render(); SDL_Delay(10); } SDL_FreeSurface(surf); SDL_Quit(); exit(0); } UPDATE: I have a version that works, but it changes orthographic to perspective. I'm not sure why this works and the other doesn't, but for future reference, here's a version that works: #include <SDL/SDL.h> #include <SDL_opengl.h> size_t sx=600, sy=600, bpp=32; void render(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); // set location in front of camera glTranslated(0, 0, -10); glBegin(GL_QUADS); // draw a square glColor3d(1, 0, 0); glVertex3d(-2, 2, 0); glVertex3d( 2, 2, 0); glVertex3d( 2, -2, 0); glVertex3d(-2, -2, 0); glEnd(); glFlush(); SDL_GL_SwapBuffers(); } int input(void) { SDL_Event event; while (SDL_PollEvent(&event)) if (event.type == SDL_QUIT || (event.type == SDL_KEYUP && event.key.keysym.sym == SDLK_ESCAPE)) return 0; return 1; } int main(int argc, char *argv[]) { SDL_Surface *surf; if (SDL_Init(SDL_INIT_EVERYTHING) != 0) return 0; if (!(surf = SDL_SetVideoMode(sx, sy, bpp, SDL_OPENGL))) return 0; glViewport(0, 0, sx, sy); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float)sx / (float)sy, 1.0, 100.0); glMatrixMode(GL_MODELVIEW); glClearColor(0, 0, 0, 1); glClearDepth(1.0); glEnable(GL_DEPTH_TEST); for (;;) { if (!input()) break; render(); SDL_Delay(10); } SDL_FreeSurface(surf); SDL_Quit(); return 0; }

    Read the article

  • JSF and Jquery - doesn't work

    - by darkrain
    Hi I am trying to get Jquery work in JSF. But i doesn't work. Can somebody help me ? The scripts are in the folder : resources This is my JSP code : I am using netbeans and the <?xml version="1.0" encoding="UTF-8"?> <!-- Document : testpage Created on : 08.07.2009, 01:16:01 Author : reBourne --> <jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf"> <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/> <f:view> <webuijsf:page id="page1"> <webuijsf:html id="html1"> <webuijsf:head id="head1"> <webuijsf:link id="link1" url="/resources/css/stylesheet.css"/> <webuijsf:script id="script1" url="resources/jquery.js"/> <webuijsf:script id="script2" url="recources/main.js" /> <style> body { margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } h1{ font-size:180%; font-weight:normal; color:#555; } h2{ clear:both; font-size:160%; font-weight:normal; color:#555; margin:0; padding:.5em 0; } a{ text-decoration:none; color:#f30; } p{ clear:both; margin:0; padding:.5em 0; } pre{ display:block; font:100% "Courier New", Courier, monospace; padding:10px; border:1px solid #bae2f0; background:#e3f4f9; margin:.5em 0; overflow:auto; width:800px; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline; margin-right:10px; } /* */ #preview{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; } /* */ </style> </webuijsf:head> <webuijsf:body id="body1" style="-rave-layout: grid"> <webuijsf:form id="form1"> <ul> <li> <a class="preview" href="resources/images/1.jpg"> <img alt="gallery thumbnail" src="resources/images/1s.jpg"/> </a> </li> <li> <a class="preview" href="resources/images/2.jpg"> <img alt="gallery thumbnail" src="resources/images/2s.jpg"/> </a> </li> <li> <a class="preview" href="resources/images/3.jpg"> <img alt="gallery thumbnail" src="resources/images/3s.jpg"/> </a> </li> <li> <a class="preview" href="resources/images/4.jpg"> <img alt="gallery thumbnail" src="resources/images/4s.jpg"/> </a> </li> </ul> </webuijsf:form> </webuijsf:body> </webuijsf:html> </webuijsf:page> </f:view> </jsp:root> Or has someone a real life example with Javascript ?!

    Read the article

  • paintComponent method is not displaying anything on the panel

    - by Captain Gh0st
    I have been trying to debug this for hours. The program is supposed to be a grapher that graphs coordinates, but i cannot get anything to display not even a random line, but if i put a print statement there it works. It is a problem with the paintComponent Method. When I out print statement before g.drawLine then it prints, but it doesn't draw any lines even if i put a random line with coordinates (1,3), (2,4). import java.awt.*; import java.util.*; import javax.swing.*; public abstract class XYGrapher { abstract public Coordinate xyStart(); abstract public double xRange(); abstract public double yRange(); abstract public Coordinate getPoint(int pointNum); public class Paint extends JPanel { public void paintGraph(Graphics g, int xPixel1, int yPixel1, int xPixel2, int yPixel2) { super.paintComponent(g); g.setColor(Color.black); g.drawLine(xPixel1, yPixel1, xPixel2, yPixel2); } public void paintXAxis(Graphics g, int xPixel, int pixelsWide, int pixelsHigh) { super.paintComponent(g); g.setColor(Color.green); g.drawLine(xPixel, 0, xPixel, pixelsHigh); } public void paintYAxis(Graphics g, int yPixel, int pixelsWide, int pixelsHigh) { super.paintComponent(g); g.setColor(Color.green); g.drawLine(0, yPixel, pixelsWide, yPixel); } } public void drawGraph(int xPixelStart, int yPixelStart, int pixelsWide, int pixelsHigh) { JFrame frame = new JFrame(); Paint panel = new Paint(); panel.setPreferredSize(new Dimension(pixelsWide, pixelsHigh)); panel.setMinimumSize(new Dimension(pixelsWide, pixelsHigh)); panel.setMaximumSize(new Dimension(pixelsWide, pixelsHigh)); frame.setLocation(frame.getToolkit().getScreenSize().width / 2 - pixelsWide / 2, frame.getToolkit().getScreenSize().height / 2 - pixelsHigh / 2); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setResizable(false); frame.add(panel); frame.pack(); frame.setVisible(true); double xRange = xRange(); double yRange = yRange(); Coordinate xyStart = xyStart(); int xPixel = xPixelStart - (int) (xyStart.getX() * (pixelsWide / xRange)); int yPixel = yPixelStart + (int) ((xyStart.getY() + yRange) * (pixelsHigh / yRange)); System.out.println(xPixel + " " + yPixel); if(yPixel > 0 && (yPixel < pixelsHigh)) { System.out.println("y"); panel.paintYAxis(panel.getGraphics(), yPixel, pixelsWide, pixelsHigh); } if(xPixel > 0 && (xPixel < pixelsHigh)) { System.out.println("x"); panel.paintXAxis(panel.getGraphics(), xPixel, pixelsWide, pixelsHigh); } for(int i = 0; i>=0; i++) { Coordinate point1 = getPoint(i); Coordinate point2 = getPoint(i+1); if(point2 == null) { break; } else { if(point1.drawFrom() && point2.drawTo()) { int xPixel1 = (int) (xPixelStart + (point1.getX() - xyStart.getX()) * (pixelsWide / xRange)); int yPixel1 = (int) (yPixelStart + (xyStart.getY() + yRange-point1.getY()) * (pixelsHigh / yRange)); int xPixel2 = (int) (xPixelStart + (point2.getX() - xyStart.getX()) * (pixelsWide / xRange)); int yPixel2 = (int) (yPixelStart + (xyStart.getY() + yRange - point2.getY()) * (pixelsHigh / yRange)); panel.paintGraph(panel.getGraphics(), xPixel1, yPixel1, xPixel2, yPixel2); } } } frame.pack(); } } This is how i am testing it is supposed to be a square, but nothing shows up. public class GrapherTester extends XYGrapher { public Coordinate xyStart() { return new Coordinate(-2,2); } public double xRange() { return 4; } public double yRange() { return 4; } public Coordinate getPoint(int pointNum) { switch(pointNum) { case 0: return new Coordinate(-1,-1); case 1: return new Coordinate(1,-1); case 2: return new Coordinate(1,1); case 3: return new Coordinate(-1,1); case 4: return new Coordinate(-1,-1); } return null; } public static void main(String[] args) { new GrapherTester().drawGraph(100, 100, 500, 500); } } Coordinate class so if any of you want to run and try it out. That is all you would need. public class Coordinate { float x; float y; boolean drawTo; boolean drawFrom; Coordinate(double x, double y) { this.x = (float) x; this.y = (float) y; drawFrom = true; drawTo = true; } Coordinate(double x, double y, boolean drawFrom, boolean drawTo) { this.x = (float) x; this.y = (float) y; this.drawFrom = drawFrom; this.drawTo = drawTo; } public double getX() { return x; } public double getY() { return y; } public boolean drawTo() { return drawTo; } public boolean drawFrom() { return drawFrom; } }

    Read the article

  • Pagination links do not work after first page

    - by TheStack
    Hello, I am trying to fix this pagination script. It seems when I click on the pagination links [1][2][3][4]or[5] , it doesn't work. It just shows the first page and when clicking on the next numbers nothing happens. I hoping someone can see something in the script that I can not see. The main page looks like this (pagination.php): <?php include_once('generate_pagination.php'); ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_pagination.js"></script> <div id="loading" ></div> <div id="content" data-page="1"></div> <ul id="pagination"> <?php generate_pagination() ?> </ul> <br /> <br /> <a href="#" class="category" id="marketing">Marketing</a> <a href="#" class="category" id="automotive">Automotive</a> <a href="#" class="category" id="sports">Sports</a> Then, generate_pagination.php: <?php function generate_pagination($sql) { include_once('config.php'); $per_page = 3; //Calculating no of pages $result = mysql_query($sql); $count = mysql_fetch_row($result); $pages = ceil($count[0]/$per_page); //Pagination Numbers for($i=1; $i<=$pages; $i++) { echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>'; } } $ids=$_GET['ids']; generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'"); ?> Here is the jquery file (jquery_pagination.js): $(document).ready(function(){ //Display Loading Image function Display_Load() { $("#loading").fadeIn(900,0); $("#loading").html("<img src='bigLoader.gif' />"); } //Hide Loading Image function Hide_Load() { $("#loading").fadeOut('slow'); }; //Default Starting Page Results $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'}); Display_Load(); $("#content").load("pagination_data.php?page=1", Hide_Load()); //Pagination Click $("#pagination li").click(function(){ Display_Load(); //CSS Styles $("#pagination li") .css({'border' : 'solid #dddddd 1px'}) .css({'color' : '#0063DC'}); $(this) .css({'color' : '#FF0084'}) .css({'border' : 'none'}); //Loading Data var pageNum = this.id; $("#content").load("pagination_data.php?page=" + pageNum, function(){ Hide_Load(); $(this).attr('data-page', pageNum); }); }); // Editing below. // Sort content Marketing $("a.category").click(function() { Display_Load(); var this_id = $(this).attr('id'); $.get("pagination.php", { category: this.id }, function(data){ //Load your results into the page var pageNum = $('#content').attr('data-page'); $("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id ); $("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load()); }); }); }); Lastly, filter_marketing.php (when a user clicks the filter link buttons): <?php include('config.php'); $per_page = 3; if(count($_GET)>0) { if($_GET['page']!=''){ $page=$_GET['page']; } if($_GET['id']!=''){ $id=$_GET['id']; } } $page= ($_GET['page']!='') ? $_GET['page']: false; $id= ($_GET['id']!='') ? $_GET['id']: false; $start = ($page-1)*$per_page; if($page && $id){ $sql = "SELECT * FROM explore WHERE category='$id' ORDER BY category LIMIT $start,$per_page"; } else { die('Error: missing parameters. Id= '.$id.' and page= '.$page); } $result = mysql_query($sql); ?> <table width="800px"> <?php while($row = mysql_fetch_array($result)) { $msg_id=$row['id']; $message=$row['site_description']; $site_price=$row['site_price']; ?> <tr> <td><?php echo $msg_id; ?></td> <td><?php echo $message; ?></td> <td><?php echo $site_price; ?></td> </tr> <?php } ?> </table> So, if anyone sees where the problem is occurring and can help rid of the problem, that would be great, Thank you.

    Read the article

  • css problem with unordered lists (as usual with IE)

    - by Emin
    I am using un-ordered lists that nests some divs to show the desired output on screen. I am using css to style them and they seem to look perfect on chrome and firefox. But in IE(8) it looks there is a problem which I was unable to locate. I am using the below CSS <style type="text/css"> .ur_container {width:980px; padding: 0; margin: 0;} .ur_container ul.bx_grp {list-style-type: none; padding: 0px; margin: 0px; } .ur_container ul.bx_lnx {list-style-type: none; padding: 5px; margin: 0px; } .bx_grp {border:1px solid #c5c5c5; background-color: yellow; margin:0; padding:0;} .bx_grp_header {background-color: #d6d6d6; border-bottom:1px solid #acacac;} .bx_grp_title {float: left; font: bold 11px Arial; padding:5px;} .bx_grp_options {float: right; font: 10px Arial; padding: 5px;} .bx_grp_options a{color: #125B93; text-decoration: none; } .bx_lnx {padding:0px; background-color: red;} .bx_lnx_header {font:11px Arial; color:#333;} .bx_lnx_title {float: left;} .bx_lnx_refno {background-color:#333; color: fff; padding: 1px; margin-right: 5px; } .bx_lnx_options {float: right;} .bx_lnx_options a {color: #258CF4; text-decoration: none;} .bx_lnx_url {font: 9px Arial; color: #999; margin-top: 4px; } .bx_lnx_notes {} .bx_lnx_notes span {background-color: #FDFFCC; color: #666; font: 9px Arial; padding:2px;} .bx_lnx_tags {} .bx_lnx_tags span {background-color: #efefef; border-bottom: 1px solid #ccc; color: #666; font: 9px Arial; padding: 1px 2px 1px 2px; margin-right: 5px;} </style> Against the following HTML <div class="ur_container"> <ul class="bx_grp" id="grp_1"> <li> <div class="bx_grp_header"> <span class="bx_grp_title">Personal File</span> <span class="bx_grp_options"><a href="#">rename</a> &bull; <a href="#">make private</a> &bull; <a href="#">hide</a href="#"> &bull; <a href="#">delete</a></span> <div style="clear: both;"></div> </div> </li> <li> <ul class="bx_lnx" id="lnx_1"> <li> <div class="bx_lnx_header"> <span class="bx_linx_title"><span class="bx_lnx_refno">#3103</span>How to file personal files</span> <span class="bx_lnx_options"><a href="#">edit</a> &bull; <a href="#">move</a> &bull; <a href="#">delete</a></span> </div> </li> <li class="bx_lnx_url">http://www.google.com</li> <li class="bx_lnx_notes"><span>search google for this</span></li> <li class="bx_lnx_tags"><span>personal</span><span>file</span><span>google</span></li> </ul> </li> </ul> </div> Which produces this output in Chrome and Fireworks and the following in IE The yellow and red colors was used in order to show that is being going wrong. The yellow part is the undesired one. Can anyone point me in the right direction please ? Regards

    Read the article

  • webgl adding projection doesnt display object

    - by dazed3confused
    I am having a look at web gl, and trying to render a cube, but I am having a problem when I try to add projection into the vertex shader. I have added an attribute, but when I use it to multiple the modelview and position, it stops displaying the cube. Im not sure why and was wondering if anyone could help? Ive tried looking at a few examples but just cant get this to work vertex shader attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); //gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0); } fragment shader #ifdef GL_ES precision highp float; // Not sure why this is required, need to google it #endif uniform vec4 uColor; void main() { gl_FragColor = uColor; } function init() { // Get a reference to our drawing surface canvas = document.getElementById("webglSurface"); gl = canvas.getContext("experimental-webgl"); /** Create our simple program **/ // Get our shaders var v = document.getElementById("vertexShader").firstChild.nodeValue; var f = document.getElementById("fragmentShader").firstChild.nodeValue; // Compile vertex shader var vs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vs, v); gl.compileShader(vs); // Compile fragment shader var fs = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fs, f); gl.compileShader(fs); // Create program and attach shaders program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); // Some debug code to check for shader compile errors and log them to console if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) console.log(gl.getShaderInfoLog(vs)); if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) console.log(gl.getShaderInfoLog(fs)); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) console.log(gl.getProgramInfoLog(program)); /* Create some simple VBOs*/ // Vertices for a cube var vertices = new Float32Array([ -0.5, 0.5, 0.5, // 0 -0.5, -0.5, 0.5, // 1 0.5, 0.5, 0.5, // 2 0.5, -0.5, 0.5, // 3 -0.5, 0.5, -0.5, // 4 -0.5, -0.5, -0.5, // 5 -0.5, 0.5, -0.5, // 6 -0.5,-0.5, -0.5 // 7 ]); // Indices of the cube var indicies = new Int16Array([ 0, 1, 2, 1, 2, 3, // front 5, 4, 6, 5, 6, 7, // back 0, 1, 5, 0, 5, 4, // left 2, 3, 6, 6, 3, 7, // right 0, 4, 2, 4, 2, 6, // top 5, 3, 1, 5, 3, 7 // bottom ]); // create vertices object on the GPU vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // Create indicies object on th GPU ibo = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicies, gl.STATIC_DRAW); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); // Render scene every 33 milliseconds setInterval(render, 33); } var mvMatrix = mat4.create(); var pMatrix = mat4.create(); function render() { // Set our viewport and clear it before we render gl.viewport(0, 0, canvas.width, canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.useProgram(program); // Bind appropriate VBOs gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); // Set the color for the fragment shader program.uColor = gl.getUniformLocation(program, "uColor"); gl.uniform4fv(program.uColor, [0.3, 0.3, 0.3, 1.0]); // // code.google.com/p/glmatrix/wiki/Usage program.uPMatrix = gl.getUniformLocation(program, "uPMatrix"); program.uMVMatrix = gl.getUniformLocation(program, "uMVMatrix"); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 1.0, 10.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0.0, -0.25, -1.0]); gl.uniformMatrix4fv(program.uPMatrix, false, pMatrix); gl.uniformMatrix4fv(program.uMVMatrix, false, mvMatrix); // Set the position for the vertex shader program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); gl.enableVertexAttribArray(program.aVertexPosition); gl.vertexAttribPointer(program.aVertexPosition, 3, gl.FLOAT, false, 3*4, 0); // position // Render the Object gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); } Thanks in advance for any help

    Read the article

  • Webkit browser jQuery transformations/transitions not working with jSplitSlider

    - by user3689793
    I am helping to build a site and i'm having an issue with the functionality of an add-in called jsplitslider when running it in chrome. Right now, when I navigate between the slides, the div's get stuck on top of each other and never clear the webkit transformations/animations: <div class="sl-content-slice" style="transition: all 800ms ease-in-out; -webkit-transition: all 800ms ease-in-out;"> I think the problem is due to timing of the functions, but I can't seem to figure out where I would need to add a setTimeout(). I only think this because I exhausted a lot of the other options like display: inline-block, notransitions css, etc. I'm desperate to figure out how to make this work in chrome. It works in FF and IE(surprisingly enough). I'm not great at webcoding, so any help will be appreciated! The code on the site isn't minimized. Here is the jQuery where I think the problem lies: var cssStyle = config.orientation === 'horizontal' ? { marginTop : -this.size.height / 2 } : { marginLeft : -this.size.width / 2 }, // default slide's slices style resetStyle = { 'transform' : 'translate(0%,0%) rotate(0deg) scale(1)', opacity : 1 }, // slice1 style slice1Style = config.orientation === 'horizontal' ? { 'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' } : { 'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' }, // slice2 style slice2Style = config.orientation === 'horizontal' ? { 'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' } : { 'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' }; if( this.options.optOpacity ) { slice1Style.opacity = 0; slice2Style.opacity = 0; } // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next" // or going "prev" according to the direction. // the idea is to make it more interesting by giving some animations to the respective slide's elements //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' ); $currentSlide.removeClass( 'sl-trans-elems' ); var transitionProp = { 'transition' : 'all ' + this.options.speed + 'ms ease-in-out' }; // add the 2 slices and animate them $movingSlide.css( 'z-index', this.slidesCount ) .find( 'div.sl-content-wrapper' ) .wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) ) .parent() .cond( dir === 'prev', function() { var slice = this; this.css( slice1Style ); setTimeout( function() { slice.css( resetStyle ); }, 150 ); }, function() { var slice = this; setTimeout( function() { slice.css( slice1Style ); }, 150 ); } ) .clone() .appendTo( $movingSlide ) .cond( dir === 'prev', function() { var slice = this; this.css( slice2Style ); setTimeout( function() { $currentSlide.addClass( 'sl-trans-back-elems' ); if( self.support ) { slice.css( resetStyle ).on( self.transEndEventName, function() { self._onEndNavigate( slice, $currentSlide, dir ); } ); } else { self._onEndNavigate( slice, $currentSlide, dir ); } }, 150 ); }, function() { var slice = this; setTimeout( function() { $nextSlide.addClass( 'sl-trans-elems' ); if( self.support ) { slice.css( slice2Style ).on( self.transEndEventName, function() { self._onEndNavigate( slice, $currentSlide, dir ); } ); } else { self._onEndNavigate( slice, $currentSlide, dir ); } }, 150 ); } ) .find( 'div.sl-content-wrapper' ) .css( cssStyle ); $nextSlide.show(); }, _validateValues : function( config ) { // OK, so we are restricting the angles and scale values here. // This is to avoid the slices wrong sides to be shown. // you can adjust these values as you wish but make sure you also ajust the // paddings of the slides and also the options.translateFactor value and scale data attrs if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) { config.slice1angle = this.options.maxAngle; } if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) { config.slice2angle = this.options.maxAngle; } if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) { config.slice1scale = this.options.maxScale; } if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) { config.slice2scale = this.options.maxScale; } if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) { config.orientation = 'horizontal' } }, _onEndNavigate : function( $slice, $oldSlide, dir ) { // reset previous slide's style after next slide is shown var $slide = $slice.parent(), removeClasses = 'sl-trans-elems sl-trans-back-elems'; // remove second slide's slice $slice.remove(); // unwrap.. $slide.css( 'z-index', 10 ) .find( 'div.sl-content-wrapper' ) .unwrap(); // hide previous current slide $oldSlide.hide().removeClass( removeClasses ); $slide.removeClass( removeClasses ); // now we can navigate again.. this.isAnimating = false; this.options.onAfterChange( $slide, this.current ); }, Sorry if I missed any conventions when posting, this is my first S.O. post. Thanks in advance for any help.

    Read the article

  • javax.servlet.ServletException: WriteText method cannot write null text

    - by Learner
    I have created a Web application using JSF+Icefaces+Richfaces+Primefaces.It is working great while I run it from eclipse as a project but When I created its WAR file and deployed in GlassFish Server then while rendering a page it is throwing this exception javax.servlet.ServletException: WriteText method cannot write null text I searched but didn't get any good solution.A quick help is highly appreciated Edit:1 I think this would be the relevant part for this <li class="page_item" id="liMasterSearch"> <!-- this is for hide (<li class="page_item hide" id="liMasterSearch"> applied to every class) --> <h:commandLink value="Search" action="#{masterRenderBean.showSimpleSearch}"></h:commandLink> </li> <li class="page_item" id="liAdvanceSearch"> <h:commandLink value="Advance Search" action="#{masterRenderBean.showADVS}"></h:commandLink> </li> Here you can see two links (1) Search and (2) Advance Search when I click on Search , It shows search page (By rendering-Actually I have included all pages in masterpage and render them on commandlink functions) <h:panelGroup rendered="#{not masterRenderBean.simpleSearch}"> <ui:include src="../../WebPages/SearchPages/MasterSearch.xhtml"></ui:include> </h:panelGroup> But When I click on Advance Search link (on which this part should render) <h:panelGroup rendered="#{not masterRenderBean.advs}"> <ui:include src="../../WebPages/SearchPages/PersonalAdvanceSearch.xhtml"/> </h:panelGroup> The browser show the above exception. NOTE: Keep in mind that this problem is occurring in deploying.It is not coming in actual application when I run it from eclipse from code EDIT:2 I found in server logs that this exception is coming due to acefaces and this portion of code <ace:autoCompleteEntry id="txtplaceofbirth" rows="10" autocomplete="false" minChars="2" width="150" value="#{inputPersonal.selectedplcofBirth}" filterMatchMode="none" valueChangeListener="#{inputPersonal.valueChangeEventCity}"> <f:selectItems value="#{inputPersonal.cities}"/> </ace:autoCompleteEntry></h:outputFormat> is messing up.Any idea Why this is hapening? Edit #3: Here is the full tack trace of exception [#|2012-11-19T09:55:48.026+0500|SEVERE|glassfish3.1.2|javax.enterprise.system.std.com.sun.enterprise.server.logging|_ThreadID=53;_ThreadName=Thread-2;|java.lang.NullPointerException: WriteText method cannot write null text at org.icefaces.impl.context.DOMResponseWriter.writeText(DOMResponseWriter.java:314) at org.icefaces.impl.context.DOMResponseWriter.writeText(DOMResponseWriter.java:340) at com.sun.faces.renderkit.html_basic.OutputMessageRenderer.encodeEnd(OutputMessageRenderer.java:163) at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:875) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1764) at javax.faces.render.Renderer.encodeChildren(Renderer.java:168) at org.icefaces.impl.renderkit.RendererWrapper.encodeChildren(RendererWrapper.java:49) at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:845) at com.sun.faces.renderkit.html_basic.HtmlBasicRenderer.encodeRecursive(HtmlBasicRenderer.java:304) at com.sun.faces.renderkit.html_basic.GroupRenderer.encodeChildren(GroupRenderer.java:105) at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:845) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1757) at javax.faces.render.Renderer.encodeChildren(Renderer.java:168) at org.icefaces.impl.renderkit.RendererWrapper.encodeChildren(RendererWrapper.java:49) at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:845) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1757) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1760) at org.icefaces.impl.context.DOMPartialViewContext.processPartial(DOMPartialViewContext.java:142) at javax.faces.component.UIViewRoot.encodeChildren(UIViewRoot.java:981) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1757) at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:391) at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:131) at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:288) at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:121) at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139) at javax.faces.webapp.FacesServlet.service(FacesServlet.java:594) at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1542) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:281) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175) at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:655) at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:595) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:161) at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:331) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:231) at com.sun.enterprise.v3.services.impl.ContainerMapper$AdapterCallable.call(ContainerMapper.java:317) at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:195) at com.sun.grizzly.http.ProcessorTask.invokeAdapter(ProcessorTask.java:849) at com.sun.grizzly.http.ProcessorTask.doProcess(ProcessorTask.java:746) at com.sun.grizzly.http.ProcessorTask.process(ProcessorTask.java:1045) at com.sun.grizzly.http.DefaultProtocolFilter.execute(DefaultProtocolFilter.java:228) at com.sun.grizzly.DefaultProtocolChain.executeProtocolFilter(DefaultProtocolChain.java:137) at com.sun.grizzly.DefaultProtocolChain.execute(DefaultProtocolChain.java:104) at com.sun.grizzly.DefaultProtocolChain.execute(DefaultProtocolChain.java:90) at com.sun.grizzly.http.HttpProtocolChain.execute(HttpProtocolChain.java:79) at com.sun.grizzly.ProtocolChainContextTask.doCall(ProtocolChainContextTask.java:54) at com.sun.grizzly.SelectionKeyContextTask.call(SelectionKeyContextTask.java:59) at com.sun.grizzly.ContextTask.run(ContextTask.java:71) at com.sun.grizzly.util.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:532) at com.sun.grizzly.util.AbstractThreadPool$Worker.run(AbstractThreadPool.java:513) at java.lang.Thread.run(Thread.java:722) |#]

    Read the article

  • Windows Phone 7: Making ListBox items change dynamically

    - by Chad La Guardia
    I am working on creating a Windows Phone app that will play a series of sound clips selected from a list. I am using the MVVM (Model View View-Model) Design pattern and have designed a model for my data, along with a view model for my page. Here is what the XAML for the ListBox looks like: <ListBox x:Name="MediaListBox" Margin="0,0,-12,0" ItemsSource="{Binding Media}" SelectionChanged="MediaListBox_SelectionChanged" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"> <ListBox.ItemTemplate > <DataTemplate> <StackPanel Margin="0,0,0,17" Width="432" Orientation="Horizontal"> <Image Source="../Media/Images/play.png" /> <StackPanel > <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Visibility="{Binding ShortDescriptionVisibility}" Style="{StaticResource PhoneTextSubtleStyle}"/> <TextBlock Text="{Binding LongDescription}" TextWrapping="Wrap" Visibility="{Binding LongDescriptionVisibility}" /> <StackPanel> <Slider HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Visibility="{Binding LongDescriptionVisibility}" ValueChanged="Slider_ValueChanged" LargeChange="0.25" SmallChange="0.05" /> </StackPanel> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> My question is this: I want to be able to expand and collapse part of the items in the ListBox. As you can see, I have a binding for the visibility. That binding is coming from the MediaModel. However, when I change this property in the ObservableCollection, the page is not updated to reflect this. The ViewModel for this page looks like this: public class ListenPageViewModel : INotifyPropertyChanged { public ListenPageViewModel() { this.Media = new ObservableCollection<MediaModel>; } /// <summary> /// A collection for MediaModel objects. /// </summary> public ObservableCollection<MediaModel> Media { get; private set; } public bool IsDataLoaded { get; private set; } /// <summary> /// Creates and adds the media to their respective collections. /// </summary> public void LoadData() { this.Media.Clear(); this.Media.Add(new MediaModel() { Title = "Media 1", ShortDescription = "Short here.", LongDescription = "Long here.", MediaSource = "/Media/test.mp3", LongDescriptionVisibility = Visibility.Collapsed, ShortDescriptionVisibility = Visibility.Visible }); this.Media.Add(new MediaModel() { Title = "Media 2", ShortDescription = "Short here.", LongDescription = "Long here.", MediaSource = "/Media/test2.mp3", LongDescriptionVisibility = Visibility.Collapsed, ShortDescriptionVisibility = Visibility.Visible }); this.IsDataLoaded = true; } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } } The bindings work correctly and I am seeing the data displayed; however, when I change the properties, the list does not update. I believe that this may be because when I change things inside the observable collection, the property changed event is not firing. What can I do to remedy this? I have poked around for some info on this, but many of the tutorials don't cover this kind of behavior. Any help would be greatly appreciated! Thanks Edit: As requested, I have added the MediaModel code: public class MediaModel : INotifyPropertyChanged { public string Title { get; set; } public string ShortDescription { get; set; } public string LongDescription { get; set; } public string MediaSource { get; set; } public Visibility LongDescriptionVisibility { get; set; } public Visibility ShortDescriptionVisibility { get; set; } public MediaModel() { } public MediaModel(string Title, string ShortDescription, string LongDescription, string MediaSource, Visibility LongDescriptionVisibility, Visibility ShortDescriptionVisibility) { this.Title = Title; this.ShortDescription = ShortDescription; this.LongDescription = LongDescription; this.MediaSource = MediaSource; this.LongDescriptionVisibility = LongDescriptionVisibility; this.ShortDescriptionVisibility = ShortDescriptionVisibility; } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } } Originally, I did not have this class implement the INotifyPropertyChanged. I did this to see if it would solve the problem. I was hoping this could just be a data object.

    Read the article

  • list images from directory by function

    - by osc2nuke
    i'm using this function: function getmyimages($qid){ $imgdir = 'modules/Projects/uploaded_project_images/'. $qid .''; // the directory, where your images are stored $allowed_types = array('png','jpg','jpeg','gif'); // list of filetypes you want to show $dimg = opendir($imgdir); while($imgfile = readdir($dimg)) { if(in_array(strtolower(substr($imgfile,-3)),$allowed_types)) { $a_img[] = $imgfile; sort($a_img); reset ($a_img); } } $totimg = count($a_img); // total image number for($x=0; $x < $totimg; $x++) { $size = getimagesize($imgdir.'/'.$a_img[$x]); // do whatever $halfwidth = ceil($size[0]/2); $halfheight = ceil($size[1]/2); $mytest = 'name: '.$a_img[$x].' width: '.$size[0].' height: '.$size[1].'<br /><a href="'. $imgdir .'/'.$a_img[$x].'">'. $a_img[$x]. '</a>'; } return $mytest; } And i call this function between a while row as: $sql_select = $db->sql_query('SELECT * from '.$prefix.'_projects WHERE topic=\''.$cid.'\''); OpenTable(); while ($row2 = $db->sql_fetchrow($sql_select)){ $qid = $row2['qid']; $project_query = $db->sql_query('SELECT p.uid, p.uname, p.subject, p.story, p.storyext, p.date, p.topic, p.pdate, p.materials, p.bidoptions, p.projectduration, pd.id_duration, pm.material_id, pbo.bidid, pc.cid FROM ' . $prefix . '_projects p, ' . $prefix . '_projects_duration pd, ' . $prefix . '_project_materials pm, ' . $prefix . '_project_bid_options pbo, ' . $prefix . '_project_categories pc WHERE p.topic=\''.$cid.'\' and p.qid=\''.$qid.'\' and p.bidoptions=pbo.bidid and p.materials=pm.material_id and p.projectduration=pd.id_duration'); while ($project_row = $db->sql_fetchrow($project_query)) { //$qid = $project_row['qid']; $uid = $project_row['uid']; $uname = $project_row['uname']; $subject = $project_row['subject']; $story = $project_row['story']; $storyext = $project_row['storyext']; $date = $project_row['date']; $topic = $project_row['topic']; $pdate = $project_row['pdate']; $materials = $project_row['materials']; $bidoptions = $project_row['bidoptions']; $projectduration = $project_row['projectduration']; //Get the topic name $topic_query = $db->sql_query('SELECT cid,title from '.$prefix.'_project_categories WHERE cid =\''.$cid.'\''); while ($topic_row = $db->sql_fetchrow($topic_query)) { $topic_id = $topic_row['cid']; $topic_title = $topic_row['title']; } //Get the material text $material_query = $db->sql_query('SELECT material_id,material_name from '.$prefix.'_project_materials WHERE material_id =\''.$materials.'\''); while ($material_row = $db->sql_fetchrow($material_query)) { $material_id = $material_row['material_id']; $material_name = $material_row['material_name']; } //Get the bid methode $bid_query = $db->sql_query('SELECT bidid,bidname from '.$prefix.'_project_bid_options WHERE bidid =\''.$bidoptions.'\''); while ($bid_row = $db->sql_fetchrow($bid_query)) { $bidid = $bid_row['bidid']; $bidname = $bid_row['bidname']; } //Get the project duration $duration_query = $db->sql_query('SELECT id_duration,duration_value,duration_alias from '.$prefix.'_projects_duration WHERE id_duration =\''.$projectduration.'\''); while ($duration_row = $db->sql_fetchrow($duration_query)) { $id_duration = $duration_row['id_duration']; $duration_value = $duration_row['duration_value']; $duration_alias = $duration_row['duration_alias']; } } echo '<br/><b>id</b>--->' .$qid. '<br/><b>uid</b>--->' .$uid. '<br/><b>username</b>--->' .$uname. '<br/><b>subject</b>--->'.$subject. '<br/><b>story1</b>--->'.$story. '<br/><b>story2</b>--->'.$storyext. '<br/><b>postdate</b>--->'.$date. '<br/><b>categorie</b>--->'.$topic_title . '<br/><b>project start</b>--->'.$pdate. '<br/><b>materials</b>--->'.$material_name. '<br/><b>bid methode</b>--->'.$bidname. '<br/><b>project duration</b>--->'.$duration_alias.'<br /><br /><br/><b>image url</b>--->'.getmyimages($qid).'<br /><br />'; } CloseTable(); the result outputs only the "last" file from the directories. if i do a echo instead of a return $mytest; it read the whole directory but ruïns the output.

    Read the article

  • How do I make my applet turn the user's input into an integer and compare it to the computer's random number?

    - by Kitteran
    I'm in beginning programming and I don't fully understand applets yet. However, (with some help from internet tutorials) I was able to create an applet that plays a game of guess with the user. The applet compiles fine, but when it runs, this error message appears: "Exception in thread "main" java.lang.NumberFormatException: For input string: "" at java.lang.NumberFormatException.forInputString(NumberFormatException.java:48) at java.lang.Integer.parseInt(Integer.java:470) at java.lang.Integer.parseInt(Integer.java:499) at Guess.createUserInterface(Guess.java:101) at Guess.<init>(Guess.java:31) at Guess.main(Guess.java:129)" I've tried moving the "userguess = Integer.parseInt( t1.getText() );" on line 101 to multiple places, but I still get the same error. Can anyone tell me what I'm doing wrong? The Code: // Creates the game GUI. import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Guess extends JFrame{ private JLabel userinputJLabel; private JLabel lowerboundsJLabel; private JLabel upperboundsJLabel; private JLabel computertalkJLabel; private JButton guessJButton; private JPanel guessJPanel; static int computernum; int userguess; static void declare() { computernum = (int) (100 * Math.random()) + 1; //random number picked (1-100) } // no-argument constructor public Guess() { createUserInterface(); } // create and position GUI components private void createUserInterface() { // get content pane and set its layout Container contentPane = getContentPane(); contentPane.setLayout( null ); contentPane.setBackground( Color.white ); // set up userinputJLabel userinputJLabel = new JLabel(); userinputJLabel.setText( "Enter Guess Here -->" ); userinputJLabel.setBounds( 0, 65, 120, 50 ); userinputJLabel.setHorizontalAlignment( JLabel.CENTER ); userinputJLabel.setBackground( Color.white ); userinputJLabel.setOpaque( true ); contentPane.add( userinputJLabel ); // set up lowerboundsJLabel lowerboundsJLabel = new JLabel(); lowerboundsJLabel.setText( "Lower Bounds Of Guess = 1" ); lowerboundsJLabel.setBounds( 0, 0, 170, 50 ); lowerboundsJLabel.setHorizontalAlignment( JLabel.CENTER ); lowerboundsJLabel.setBackground( Color.white ); lowerboundsJLabel.setOpaque( true ); contentPane.add( lowerboundsJLabel ); // set up upperboundsJLabel upperboundsJLabel = new JLabel(); upperboundsJLabel.setText( "Upper Bounds Of Guess = 100" ); upperboundsJLabel.setBounds( 250, 0, 170, 50 ); upperboundsJLabel.setHorizontalAlignment( JLabel.CENTER ); upperboundsJLabel.setBackground( Color.white ); upperboundsJLabel.setOpaque( true ); contentPane.add( upperboundsJLabel ); // set up computertalkJLabel computertalkJLabel = new JLabel(); computertalkJLabel.setText( "Computer Says:" ); computertalkJLabel.setBounds( 0, 130, 100, 50 ); //format (x, y, width, height) computertalkJLabel.setHorizontalAlignment( JLabel.CENTER ); computertalkJLabel.setBackground( Color.white ); computertalkJLabel.setOpaque( true ); contentPane.add( computertalkJLabel ); //Set up guess jbutton guessJButton = new JButton(); guessJButton.setText( "Enter" ); guessJButton.setBounds( 250, 78, 100, 30 ); contentPane.add( guessJButton ); guessJButton.addActionListener( new ActionListener() // anonymous inner class { // event handler called when Guess button is pressed public void actionPerformed( ActionEvent event ) { guessActionPerformed( event ); } } // end anonymous inner class ); // end call to addActionListener // set properties of application's window setTitle( "Guess Game" ); // set title bar text setSize( 500, 500 ); // set window size setVisible( true ); // display window //create text field TextField t1 = new TextField(); // Blank text field for user input t1.setBounds( 135, 78, 100, 30 ); contentPane.add( t1 ); userguess = Integer.parseInt( t1.getText() ); //create section for computertalk Label computertalkLabel = new Label(""); computertalkLabel.setBounds( 115, 130, 300, 50); contentPane.add( computertalkLabel ); } // Display computer reactions to user guess private void guessActionPerformed( ActionEvent event ) { if (userguess > computernum) //if statements (computer's reactions to user guess) computertalkJLabel.setText( "Computer Says: Too High" ); else if (userguess < computernum) computertalkJLabel.setText( "Computer Says: Too Low" ); else if (userguess == computernum) computertalkJLabel.setText( "Computer Says:You Win!" ); else computertalkJLabel.setText( "Computer Says: Error" ); } // end method oneJButtonActionPerformed // end method createUserInterface // main method public static void main( String args[] ) { Guess application = new Guess(); application.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); } // end method main } // end class Phone

    Read the article

  • MySQL table with similar column info - HELP!!!

    - by George Garman
    I have a DB with a table that is named "victim". The form that dumps the info into the table has room for two victims and therefore there is vic1_fname, vic1_lname, vic2_fname, vic2_lname, etc.. (business name, person first, person last, address, city, state, zip) a "1" and "2" of each. Now I want to search the DB and locate listed victims. This is what I have so far: $result = mysql_query( "SELECT victim.* FROM victim WHERE vic1_business_name OR vic2_business_name LIKE '%$search_vic_business_name%' AND vic1_fname OR vic2_fname LIKE '%$search_vic_fname%' AND vic1_lname OR vic2_lname LIKE '%$search_vic_lname%' AND vic1_address OR vic2_address LIKE '%$search_vic_address%' AND vic1_city OR vic2_city LIKE '%$search_vic_city%' AND vic1_state OR vic2_state LIKE '%$search_vic_state%' AND vic1_dob OR vic2_dob LIKE '%$search_vic_dob%' "); <table width="960" style="border: groove;" border=".5"> <tr><th colspan=10>You search results are listed below:</th></tr> <tr> <th>Case Number</th> <th>Business Name</th> <th>First Name</th> <th>Last Name</th> <th>DOB / Age</th> <th>Address</th> <th>City</th> <th>State</th> </tr> <?php while($row = mysql_fetch_array($result)) { ?> <tr> <td align="center"><?php print $row['vic_business_name']; ?></td> <td align="center"><?php print $row['vic_fname']; ?></td> <td align="center"><?php print $row['vic_lname']; ?></td> <td align="center"><?php print $row['vic_dob']; ?></td> <td align="center"><?php print $row['vic_adress']; ?></td> <td align="center"><?php print $row['vic_city']; ?></td> <td align="center"><?php print $row['vic_state']; ?></td> </tr> <?php } ?> </table> The info did not display in the table until I changed the table to this: <tr> <td align="center"><?php print $row['vic1_business_name']; ?></td> <td align="center"><?php print $row['vic1_fname']; ?></td> <td align="center"><?php print $row['vic1_lname']; ?></td> <td align="center"><?php print $row['vic1_dob']; ?></td> <td align="center"><?php print $row['vic1_adress']; ?></td> <td align="center"><?php print $row['vic1_city']; ?></td> <td align="center"><?php print $row['vic1_state']; ?></td> </tr> <tr> <td align="center"><?php print $row['vic2_business_name']; ?></td> <td align="center"><?php print $row['vic2_fname']; ?></td> <td align="center"><?php print $row['vic2_lname']; ?></td> <td align="center"><?php print $row['vic2_dob']; ?></td> <td align="center"><?php print $row['vic2_adress']; ?></td> <td align="center"><?php print $row['vic2_city']; ?></td> <td align="center"><?php print $row['vic2_state']; ?></td> </tr> Now it displays both rows, even if its empty. It doesn't matter if the victim was listed originally as vic1 or vic2, i just want to know if they are a victim. I hope this makes sense. I can't get it to display the way I want, line-by-line, irregardless of whether you are vic1 or vic2.

    Read the article

  • calling a java class in a servlet

    - by kawtousse
    hi, in my servlet i called an instance of a class.java( a class that construct an html table) in order to create this table in my jsp. the servlet is like the following: String report=request.getParameter("selrep"); String datev=request.getParameter("datepicker"); String op=request.getParameter("operator"); String batch =request.getParameter("selbatch"); System.out.println("report kind was:"+report); System.out.println("date was:"+datev); System.out.println("operator:"+op); System.out.println("batch:"+batch); if(report.equalsIgnoreCase("Report Denied")) { DeniedReportDisplay rd = new DeniedReportDisplay(); rd.ConstruireReport(); } else if(report.equalsIgnoreCase("Report Locked")) { LockedReportDisplay rl = new LockedReportDisplay(); rl.ConstruireReport(); } request.getRequestDispatcher("EspaceValidation.jsp").forward(request, response); in my jsp i can not display this table even empty or full. note: exemple a class that construct denied Report has this structure: /*constructeur*/ public DeniedReportDisplay() {} /*Methodes*/ @SuppressWarnings("unchecked") public StringBuffer ConstruireReport() { StringBuffer retour=new StringBuffer(); int i = 0; retour.append("<table border = 1 width=900 id=sheet align=left>"); retour.append("<tr bgcolor=#0099FF>" ); retour.append("<label> Denied Report</label>"); retour.append("</tr>"); retour.append("<tr>"); String[] nomCols ={"Nom","Prenom","trackingDate","activity","projectcode","WAName","taskCode","timeSpent","PercentTaskComplete","Comment"}; //String HQL_QUERY = null; for(i=0;i< nomCols.length;i++) { retour.append(("<td bgcolor=#0066CC>")+ nomCols[i] + "</td>"); } retour.append("</tr>"); retour.append("<tr>"); try { s= HibernateUtil.currentSession(); tx=s.beginTransaction(); Query query = s.createQuery("select opcemployees.Nom,opcemployees.Prenom,dailytimesheet.TrackingDate,dailytimesheet.Activity," + "dailytimesheet.ProjectCode,dailytimesheet.WAName,dailytimesheet.TaskCode," + "dailytimesheet.TimeSpent,dailytimesheet.PercentTaskComplete from Opcemployees opcemployees,Dailytimesheet dailytimesheet " + "where opcemployees.Matricule=dailytimesheet.Matricule and dailytimesheet.Etat=3 " + "group by opcemployees.Nom,opcemployees.Prenom" ); for(Iterator it=query.iterate();it.hasNext();) { if(it.hasNext()){ Object[] row = (Object[]) it.next(); retour.append("<td>" +row [0]+ "</td>");//Nom retour.append("<td>" + row [1] + "</td>");//Prenom retour.append("<td>" + row [2] + "</td>");//trackingdate retour.append("<td>" + row [3]+ "</td>");//activity retour.append("<td>" + row [4] +"</td>");//projectcode retour.append("<td>" + row [5]+ "</td>");//waname retour.append("<td>" + row [6] + "</td>");//taskcode retour.append("<td>" + row [7] + "</td>");//timespent retour.append("<td>" + row [8] + "</td>");//perecnttaskcomplete retour.append("<td><input type=text /></td>");//case de commentaire } retour.append("</tr>"); } //terminer la table. retour.append ("</table>"); tx.commit(); } catch (HibernateException e) { retour.append ("</table><H1>ERREUR:</H1>" +e.getMessage()); e.printStackTrace(); } return retour; } thanks for help.

    Read the article

  • Referencing ASP.net textbox data in JavaScripts

    - by GoldenEarring
    I'm interested in making an interactive 3D pie chart using JavaScript and ASP.net controls for a webpage. Essentially, I want to make an interactive version of the chart here: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#3D I want to have 5 ASP.net textboxes where the user enters data and then submits it, and the chart adjusts according to what the user enters. I understand using ASP.net controls with JS is probably not the most effective way to go about it, but I would really appreciate if someone could share how doing this would be possible. I really don't know where to begin. Thanks for any help! <%@ Page Language="C#" %> <!DOCTYPE html> <script runat="server"> void btn1_Click(object sender, EventArgs e) { double s = 0.0; double b = 0; double g = 0.0f; double c = 0.0f; double h = 0.0f; s = double.Parse(txtWork.Text); b = double.Parse(txtEat.Text); g = double.Parse(txtCommute.Text); c = double.Parse(txtWatchTV.Text); h = double.Parse(txtSleep.Text); double total = s + b + g + c + h; if (total != 24) { lblError.Text = "Warning! A day has 24 hours"; } if (total == 24) { lblError.Text = string.Empty; } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } var data = new google.visualization.DataTable(); var txtWork = document.getElementById('<%=txtWork.ClientID%>') txtEat = document.getElementById('<%=txtEat.ClientID%>') txtCommute = document.getElementById('<%=txtCommute.ClientID%>') txtWatchTV = document.getElementById('<%=txtWatchTV.ClientID%>') txtSleep = document.getElementById('<%=txtSleep.ClientID%>'); var workvalue = parseInt(txtWork, 10) var eatvalue = parseInt(txtEat, 10) var commutevalue = parseInt(txtCommute, 10) var watchtvvalue = parseInt(txtWatchTV, 10) var sleepvalue = parseInt(txtSleep, 10) // Declare columns data.addColumn('string', 'Task'); data.addColumn('Number', 'Hours per day'); // Add data. data.addRows([ ['Work', workvalue], ['Eat', eatvalue], ['Commute', commutevalue], ['Watch TV', watchtvvalue], ['Sleep', sleepvalue], ]); </script> </head> <body> <form id="form1" runat="server"> <div id="piechart_3d" style="width: 900px; height: 500px;"> </div> <asp:Label ID="lblError" runat="server" Font-Size="X-Large" Font-Bold="true" /> <table> <tr> <td>Work:</td> <td><asp:TextBox ID="txtWork" Text="11" runat="server" /></td> </tr> <tr> <td>Eat:</td> <td><asp:TextBox ID="txtEat" text="2" runat="server" /></td> </tr> <tr> <td>Commute:</td> <td><asp:TextBox ID="txtCommute" Text="2" runat="server" /></td> </tr> <tr> <td>Watch TV:</td> <td><asp:TextBox ID="txtWatchTV" Text="2" runat="server" /></td> </tr> <tr> <td>Sleep:</td> <td><asp:TextBox ID="txtSleep" Text="7" runat="server" /></td> </tr> </table> <br /> <br /> <asp:Button ID="btn1" text="Draw 3D PieChart" runat="server" OnClick="btn1_Click" /> </form> </body> </html>

    Read the article

  • PHP - javascript validation radio button

    - by user1806136
    i have a form with 3 sets of radio buttons. i want to set a simple javascript validation alert to appear when user clicks on submit when one of the fields is null. how can i do that using javascript ? my code so far is .. <?php session_start(); $Load=$_SESSION['login_user']; include('../connect.php'); if (isset($_POST['submit'])) { $v1 = intval($_POST['v1']); $v2 = intval($_POST['v2']); $v3 = intval($_POST['v3']); $total = $v1 + $v2 + $v3 ; mysql_query("INSERT into Form1 (P1,P2,P3,TOTAL) values('$v1','$v2','$v3','$total')") or die(mysql_error()); header("Location: mark.php"); } <center><form method="post" action="mark.php" > <tr> <th > School Evaluation <font size="4" > </font></th> <tr> <th > Criteria <font size="4" > </font></th> <th> 4<font size="4" > </font></th> <th> 3<font size="4" > </font></th> <th> 2<font size="4" > </font></th> <th> 1<font size="4" > </font></th> </tr> <tr> <th> Your attendance<font size="4" > </font></th> <td> <input type="radio" name ="v1" value = "4" onclick="updateTotal();"/></td> <td> <input type="radio" name ="v1" value = "3" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v1" value = "2" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v1" value = "1" onclick="updateTotal();" /></td> </tr> <tr> <th > Your grades <font size="4" > </font></th> <td> <input type="radio" name ="v2" value = "4" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v2" value = "3" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v2" value = "2" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v2" value = "1" onclick="updateTotal();" /></td> </tr> <tr> <th >Your self-control <font size="4" > </font></th> <td> <input type="radio" name ="v3" value = "4" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v3" value = "3" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v3" value = "2" onclick="updateTotal();" /></td> <td> <input type="radio" name ="v3" value = "1" onclick="updateTotal();" /></td> </tr> </tr> </table> i have put <br> <td><input type="submit" name="submit" value="Submit" onClick="return validation(form);"> <input type="reset" name="clear" value="clear" style="width: 70px"></td> </form> i have try alot of codes but no alert appears!

    Read the article

  • files get uploaded just before they get cancelled

    - by user1763986
    Got a little situation here where I am trying to cancel a file's upload. What I have done is stated that if the user clicks on the "Cancel" button, then it will simply remove the iframe so that it does not go to the page where it uploads the files into the server and inserts data into the database. Now this works fine if the user clicks on the "Cancel" button in quickish time the problem I have realised though is that if the user clicks on the "Cancel" button very late, it sometimes doesn't remove the iframe in time meaning that the file has just been uploaded just before the user has clicked on the "Cancel" button. So my question is that is there a way that if the file does somehow get uploaded before the user clicks on the "Cancel" button, that it deletes the data in the database and removes the file from the server? Below is the image upload form: <form action="imageupload.php" method="post" enctype="multipart/form-data" target="upload_target_image" onsubmit="return imageClickHandler(this);" class="imageuploadform" > <p class="imagef1_upload_process" align="center"> Loading...<br/> <img src="Images/loader.gif" /> </p> <p class="imagef1_upload_form" align="center"> <br/> <span class="imagemsg"></span> <label>Image File: <input name="fileImage" type="file" class="fileImage" /></label><br/> <br/> <label class="imagelbl"><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label> </p> <p class="imagef1_cancel" align="center"> <input type="reset" name="imageCancel" class="imageCancel" value="Cancel" /> </p> <iframe class="upload_target_image" name="upload_target_image" src="#" style="width:0px;height:0px;border:0px;solid;#fff;"></iframe> </form> Below is the jquery function which controls the "Cancel" button: $(imageuploadform).find(".imageCancel").on("click", function(event) { $('.upload_target_image').get(0).contentwindow $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'"); return stopImageUpload(2); }); Below is the php code where it uploads the files and inserts the data into the database. The form above posts to this php page "imageupload.php": <body> <?php include('connect.php'); session_start(); $result = 0; //uploads file move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]); $result = 1; //set up the INSERT SQL query command to insert the name of the image file into the "Image" Table $imagesql = "INSERT INTO Image (ImageFile) VALUES (?)"; //prepare the above SQL statement if (!$insert = $mysqli->prepare($imagesql)) { // Handle errors with prepare operation here } //bind the parameters (these are the values that will be inserted) $insert->bind_param("s",$img); //Assign the variable of the name of the file uploaded $img = 'ImageFiles/'.$_FILES['fileImage']['name']; //execute INSERT query $insert->execute(); if ($insert->errno) { // Handle query error here } //close INSERT query $insert->close(); //Retrieve the ImageId of the last uploded file $lastID = $mysqli->insert_id; //Insert into Image_Question Table (be using last retrieved Image id in order to do this) $imagequestionsql = "INSERT INTO Image_Question (ImageId, SessionId, QuestionId) VALUES (?, ?, ?)"; //prepare the above SQL statement if (!$insertimagequestion = $mysqli->prepare($imagequestionsql)) { // Handle errors with prepare operation here echo "Prepare statement err imagequestion"; } //Retrieve the question number $qnum = (int)$_POST['numimage']; //bind the parameters (these are the values that will be inserted) $insertimagequestion->bind_param("isi",$lastID, 'Exam', $qnum); //execute INSERT query $insertimagequestion->execute(); if ($insertimagequestion->errno) { // Handle query error here } //close INSERT query $insertimagequestion->close(); ?> <!--Javascript which will output the message depending on the status of the upload (successful, failed or cancelled)--> <script> window.top.stopImageUpload(<?php echo $result; ?>, '<?php echo $_FILES['fileImage']['name'] ?>'); </script> </body> UPDATE: Below is the php code "cancelimage.php" where I want to delete the cancelled file from the server and delete the record from the database. It is set up but not finished, can somebody finish it off so I can retrieve the name of the file and it's id using $_SESSION? <?php // connect to the database include('connect.php'); /* check connection */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); die(); } //remove file from server unlink("ImageFiles/...."); //need to retrieve file name here where the ... line is //DELETE query statement where it will delete cancelled file from both Image and Image Question Table $imagedeletesql = " DELETE img, img_q FROM Image AS img LEFT JOIN Image_Question AS img_q ON img_q.ImageId = img.ImageId WHERE img.ImageFile = ?"; //prepare delete query if (!$delete = $mysqli->prepare($imagedeletesql)) { // Handle errors with prepare operation here } //Dont pass data directly to bind_param store it in a variable $delete->bind_param("s",$img); //execute DELETE query $delete->execute(); if ($delete->errno) { // Handle query error here } //close query $delete->close(); ?> Can you please provide an sample code in your answer to make it easier for me. Thank you

    Read the article

  • Building my first Javascript Application (jQuery), struggling on something

    - by Jason Wells
    I'd really appreciate recommendations on the most efficient way to approach this. I'm building a simple javascript application which displays a list of records and allows the user to edit a record by clicking an "Edit" link in the records row. The user also can click the "Add" link to pop open a dialog allowing them to add a new record. Here's a working prototype of this: http://jsfiddle.net/FfRcG/ You'll note if you click "Edit" a dialog pops up with some canned values. And, if you click "Add", a dialog pops up with empty values. I need help on how to approach two problems I believe we need to pass our index to our edit dialog and reference the values within the JSON, but I am unsure how to pass the index when the user clicks edit. It bothers me that the Edit and Add div contents are so similiar (Edit just pre populates the values). I feel like there is a more efficient way of doing this but am at a loss. Here is my code for reference $(document).ready( function(){ // Our JSON (This would actually be coming from an AJAX database call) people = { "COLUMNS":["DATEMODIFIED", "NAME","AGE"], "DATA":[ ["9/6/2012", "Person 1","32"], ["9/5/2012","Person 2","23"] ] } // Here we loop over our JSON and build our HTML (Will refactor to use templating eventually) members = people.DATA; var newcontent = '<table width=50%><tr><td>date</td><td>name</td><td>age</td><td></td></tr>'; for(var i=0;i<members.length;i++) { newcontent+= '<tr id="member'+i+'"><td>' + members[i][0] + '</td>'; newcontent+= '<td>' + members[i][1] + '</td>'; newcontent+= '<td>' + members[i][2] + '</td>'; newcontent+= '<td><a href="#" class="edit" id=edit'+i+'>Edit</a></td><td>'; } newcontent += "</table>"; $("#result").html(newcontent); // Bind a dialog to the edit link $(".edit").click( function(){ // Trigger our dialog to open $("#edit").dialog("open"); // Not sure the most efficient way to change our dialog field values $("#name").val() // ??? alert($()); return false; }); // Bind a dialog to the add link $(".edit").click( function(){ // Trigger our dialog to open $("#add").dialog("open"); return false; }); // Bind a dialog to our edit DIV $("#edit").dialog(); // Bind a dialog to our add DIV $("#add").dialog(); }); And here's the HTML <h1>People</h1> <a href="#" class="add">Add a new person</a> <!-- Where results show up --> <div id="result"></div> <!-- Here's our edit DIV - I am not clear as to the best way to pass the index in our JSON so that we can reference positions in our array to pre populate the input values. --> <div id="edit"> <form> <p>Name:<br/><input type="text" id="name" value="foo"></p> <p>Age:<br/><input type="text" id="age" value="33"></p> <input type="submit" value="Save" id="submitEdit"> </form> </div> <!-- Here's our add DIV - This layout is so similiar to our edit dialog. What is the most efficient way to handle a situation like this? --> <div id="add"> <form> <p>Name:<br/><input type="text" id="name"></p> <p>Age:<br/><input type="text" id="age"></p> <input type="submit" value="Save" id="submitEdit"> </form> </div>

    Read the article

  • Inheritance Mapping Strategies with Entity Framework Code First CTP5: Part 3 – Table per Concrete Type (TPC) and Choosing Strategy Guidelines

    - by mortezam
    This is the third (and last) post in a series that explains different approaches to map an inheritance hierarchy with EF Code First. I've described these strategies in previous posts: Part 1 – Table per Hierarchy (TPH) Part 2 – Table per Type (TPT)In today’s blog post I am going to discuss Table per Concrete Type (TPC) which completes the inheritance mapping strategies supported by EF Code First. At the end of this post I will provide some guidelines to choose an inheritance strategy mainly based on what we've learned in this series. TPC and Entity Framework in the Past Table per Concrete type is somehow the simplest approach suggested, yet using TPC with EF is one of those concepts that has not been covered very well so far and I've seen in some resources that it was even discouraged. The reason for that is just because Entity Data Model Designer in VS2010 doesn't support TPC (even though the EF runtime does). That basically means if you are following EF's Database-First or Model-First approaches then configuring TPC requires manually writing XML in the EDMX file which is not considered to be a fun practice. Well, no more. You'll see that with Code First, creating TPC is perfectly possible with fluent API just like other strategies and you don't need to avoid TPC due to the lack of designer support as you would probably do in other EF approaches. Table per Concrete Type (TPC)In Table per Concrete type (aka Table per Concrete class) we use exactly one table for each (nonabstract) class. All properties of a class, including inherited properties, can be mapped to columns of this table, as shown in the following figure: As you can see, the SQL schema is not aware of the inheritance; effectively, we’ve mapped two unrelated tables to a more expressive class structure. If the base class was concrete, then an additional table would be needed to hold instances of that class. I have to emphasize that there is no relationship between the database tables, except for the fact that they share some similar columns. TPC Implementation in Code First Just like the TPT implementation, we need to specify a separate table for each of the subclasses. We also need to tell Code First that we want all of the inherited properties to be mapped as part of this table. In CTP5, there is a new helper method on EntityMappingConfiguration class called MapInheritedProperties that exactly does this for us. Here is the complete object model as well as the fluent API to create a TPC mapping: public abstract class BillingDetail {     public int BillingDetailId { get; set; }     public string Owner { get; set; }     public string Number { get; set; } }          public class BankAccount : BillingDetail {     public string BankName { get; set; }     public string Swift { get; set; } }          public class CreditCard : BillingDetail {     public int CardType { get; set; }     public string ExpiryMonth { get; set; }     public string ExpiryYear { get; set; } }      public class InheritanceMappingContext : DbContext {     public DbSet<BillingDetail> BillingDetails { get; set; }              protected override void OnModelCreating(ModelBuilder modelBuilder)     {         modelBuilder.Entity<BankAccount>().Map(m =>         {             m.MapInheritedProperties();             m.ToTable("BankAccounts");         });         modelBuilder.Entity<CreditCard>().Map(m =>         {             m.MapInheritedProperties();             m.ToTable("CreditCards");         });                 } } The Importance of EntityMappingConfiguration ClassAs a side note, it worth mentioning that EntityMappingConfiguration class turns out to be a key type for inheritance mapping in Code First. Here is an snapshot of this class: namespace System.Data.Entity.ModelConfiguration.Configuration.Mapping {     public class EntityMappingConfiguration<TEntityType> where TEntityType : class     {         public ValueConditionConfiguration Requires(string discriminator);         public void ToTable(string tableName);         public void MapInheritedProperties();     } } As you have seen so far, we used its Requires method to customize TPH. We also used its ToTable method to create a TPT and now we are using its MapInheritedProperties along with ToTable method to create our TPC mapping. TPC Configuration is Not Done Yet!We are not quite done with our TPC configuration and there is more into this story even though the fluent API we saw perfectly created a TPC mapping for us in the database. To see why, let's start working with our object model. For example, the following code creates two new objects of BankAccount and CreditCard types and tries to add them to the database: using (var context = new InheritanceMappingContext()) {     BankAccount bankAccount = new BankAccount();     CreditCard creditCard = new CreditCard() { CardType = 1 };                      context.BillingDetails.Add(bankAccount);     context.BillingDetails.Add(creditCard);     context.SaveChanges(); } Running this code throws an InvalidOperationException with this message: The changes to the database were committed successfully, but an error occurred while updating the object context. The ObjectContext might be in an inconsistent state. Inner exception message: AcceptChanges cannot continue because the object's key values conflict with another object in the ObjectStateManager. Make sure that the key values are unique before calling AcceptChanges. The reason we got this exception is because DbContext.SaveChanges() internally invokes SaveChanges method of its internal ObjectContext. ObjectContext's SaveChanges method on its turn by default calls AcceptAllChanges after it has performed the database modifications. AcceptAllChanges method merely iterates over all entries in ObjectStateManager and invokes AcceptChanges on each of them. Since the entities are in Added state, AcceptChanges method replaces their temporary EntityKey with a regular EntityKey based on the primary key values (i.e. BillingDetailId) that come back from the database and that's where the problem occurs since both the entities have been assigned the same value for their primary key by the database (i.e. on both BillingDetailId = 1) and the problem is that ObjectStateManager cannot track objects of the same type (i.e. BillingDetail) with the same EntityKey value hence it throws. If you take a closer look at the TPC's SQL schema above, you'll see why the database generated the same values for the primary keys: the BillingDetailId column in both BankAccounts and CreditCards table has been marked as identity. How to Solve The Identity Problem in TPC As you saw, using SQL Server’s int identity columns doesn't work very well together with TPC since there will be duplicate entity keys when inserting in subclasses tables with all having the same identity seed. Therefore, to solve this, either a spread seed (where each table has its own initial seed value) will be needed, or a mechanism other than SQL Server’s int identity should be used. Some other RDBMSes have other mechanisms allowing a sequence (identity) to be shared by multiple tables, and something similar can be achieved with GUID keys in SQL Server. While using GUID keys, or int identity keys with different starting seeds will solve the problem but yet another solution would be to completely switch off identity on the primary key property. As a result, we need to take the responsibility of providing unique keys when inserting records to the database. We will go with this solution since it works regardless of which database engine is used. Switching Off Identity in Code First We can switch off identity simply by placing DatabaseGenerated attribute on the primary key property and pass DatabaseGenerationOption.None to its constructor. DatabaseGenerated attribute is a new data annotation which has been added to System.ComponentModel.DataAnnotations namespace in CTP5: public abstract class BillingDetail {     [DatabaseGenerated(DatabaseGenerationOption.None)]     public int BillingDetailId { get; set; }     public string Owner { get; set; }     public string Number { get; set; } } As always, we can achieve the same result by using fluent API, if you prefer that: modelBuilder.Entity<BillingDetail>()             .Property(p => p.BillingDetailId)             .HasDatabaseGenerationOption(DatabaseGenerationOption.None); Working With The Object Model Our TPC mapping is ready and we can try adding new records to the database. But, like I said, now we need to take care of providing unique keys when creating new objects: using (var context = new InheritanceMappingContext()) {     BankAccount bankAccount = new BankAccount()      {          BillingDetailId = 1                          };     CreditCard creditCard = new CreditCard()      {          BillingDetailId = 2,         CardType = 1     };                      context.BillingDetails.Add(bankAccount);     context.BillingDetails.Add(creditCard);     context.SaveChanges(); } Polymorphic Associations with TPC is Problematic The main problem with this approach is that it doesn’t support Polymorphic Associations very well. After all, in the database, associations are represented as foreign key relationships and in TPC, the subclasses are all mapped to different tables so a polymorphic association to their base class (abstract BillingDetail in our example) cannot be represented as a simple foreign key relationship. For example, consider the the domain model we introduced here where User has a polymorphic association with BillingDetail. This would be problematic in our TPC Schema, because if User has a many-to-one relationship with BillingDetail, the Users table would need a single foreign key column, which would have to refer both concrete subclass tables. This isn’t possible with regular foreign key constraints. Schema Evolution with TPC is Complex A further conceptual problem with this mapping strategy is that several different columns, of different tables, share exactly the same semantics. This makes schema evolution more complex. For example, a change to a base class property results in changes to multiple columns. It also makes it much more difficult to implement database integrity constraints that apply to all subclasses. Generated SQLLet's examine SQL output for polymorphic queries in TPC mapping. For example, consider this polymorphic query for all BillingDetails and the resulting SQL statements that being executed in the database: var query = from b in context.BillingDetails select b; Just like the SQL query generated by TPT mapping, the CASE statements that you see in the beginning of the query is merely to ensure columns that are irrelevant for a particular row have NULL values in the returning flattened table. (e.g. BankName for a row that represents a CreditCard type). TPC's SQL Queries are Union Based As you can see in the above screenshot, the first SELECT uses a FROM-clause subquery (which is selected with a red rectangle) to retrieve all instances of BillingDetails from all concrete class tables. The tables are combined with a UNION operator, and a literal (in this case, 0 and 1) is inserted into the intermediate result; (look at the lines highlighted in yellow.) EF reads this to instantiate the correct class given the data from a particular row. A union requires that the queries that are combined, project over the same columns; hence, EF has to pad and fill up nonexistent columns with NULL. This query will really perform well since here we can let the database optimizer find the best execution plan to combine rows from several tables. There is also no Joins involved so it has a better performance than the SQL queries generated by TPT where a Join is required between the base and subclasses tables. Choosing Strategy GuidelinesBefore we get into this discussion, I want to emphasize that there is no one single "best strategy fits all scenarios" exists. As you saw, each of the approaches have their own advantages and drawbacks. Here are some rules of thumb to identify the best strategy in a particular scenario: If you don’t require polymorphic associations or queries, lean toward TPC—in other words, if you never or rarely query for BillingDetails and you have no class that has an association to BillingDetail base class. I recommend TPC (only) for the top level of your class hierarchy, where polymorphism isn’t usually required, and when modification of the base class in the future is unlikely. If you do require polymorphic associations or queries, and subclasses declare relatively few properties (particularly if the main difference between subclasses is in their behavior), lean toward TPH. Your goal is to minimize the number of nullable columns and to convince yourself (and your DBA) that a denormalized schema won’t create problems in the long run. If you do require polymorphic associations or queries, and subclasses declare many properties (subclasses differ mainly by the data they hold), lean toward TPT. Or, depending on the width and depth of your inheritance hierarchy and the possible cost of joins versus unions, use TPC. By default, choose TPH only for simple problems. For more complex cases (or when you’re overruled by a data modeler insisting on the importance of nullability constraints and normalization), you should consider the TPT strategy. But at that point, ask yourself whether it may not be better to remodel inheritance as delegation in the object model (delegation is a way of making composition as powerful for reuse as inheritance). Complex inheritance is often best avoided for all sorts of reasons unrelated to persistence or ORM. EF acts as a buffer between the domain and relational models, but that doesn’t mean you can ignore persistence concerns when designing your classes. SummaryIn this series, we focused on one of the main structural aspect of the object/relational paradigm mismatch which is inheritance and discussed how EF solve this problem as an ORM solution. We learned about the three well-known inheritance mapping strategies and their implementations in EF Code First. Hopefully it gives you a better insight about the mapping of inheritance hierarchies as well as choosing the best strategy for your particular scenario. Happy New Year and Happy Code-Firsting! References ADO.NET team blog Java Persistence with Hibernate book a { color: #5A99FF; } a:visited { color: #5A99FF; } .title { padding-bottom: 5px; font-family: Segoe UI; font-size: 11pt; font-weight: bold; padding-top: 15px; } .code, .typeName { font-family: consolas; } .typeName { color: #2b91af; } .padTop5 { padding-top: 5px; } .padTop10 { padding-top: 10px; } .exception { background-color: #f0f0f0; font-style: italic; padding-bottom: 5px; padding-left: 5px; padding-top: 5px; padding-right: 5px; }

    Read the article

  • Entity Framework Code-First, OData & Windows Phone Client

    - by Jon Galloway
    Entity Framework Code-First is the coolest thing since sliced bread, Windows  Phone is the hottest thing since Tickle-Me-Elmo and OData is just too great to ignore. As part of the Full Stack project, we wanted to put them together, which turns out to be pretty easy… once you know how.   EF Code-First CTP5 is available now and there should be very few breaking changes in the release edition, which is due early in 2011.  Note: EF Code-First evolved rapidly and many of the existing documents and blog posts which were written with earlier versions, may now be obsolete or at least misleading.   Code-First? With traditional Entity Framework you start with a database and from that you generate “entities” – classes that bridge between the relational database and your object oriented program. With Code-First (Magic-Unicorn) (see Hanselman’s write up and this later write up by Scott Guthrie) the Entity Framework looks at classes you created and says “if I had created these classes, the database would have to have looked like this…” and creates the database for you! By deriving your entity collections from DbSet and exposing them via a class that derives from DbContext, you "turn on" database backing for your POCO with a minimum of code and no hidden designer or configuration files. POCO == Plain Old CLR Objects Your entity objects can be used throughout your applications - in web applications, console applications, Silverlight and Windows Phone applications, etc. In our case, we'll want to read and update data from a Windows Phone client application, so we'll expose the entities through a DataService and hook the Windows Phone client application to that data via proxies.  Piece of Pie.  Easy as cake. The Demo Architecture To see this at work, we’ll create an ASP.NET/MVC application which will act as the host for our Data Service.  We’ll create an incredibly simple data layer using EF Code-First on top of SQLCE4 and we’ll expose the data in a WCF Data Service using the oData protocol.  Our Windows Phone 7 client will instantiate  the data context via a URI and load the data asynchronously. Setting up the Server project with MVC 3, EF Code First, and SQL CE 4 Create a new application of type ASP.NET MVC 3 and name it DeadSimpleServer.  We need to add the latest SQLCE4 and Entity Framework Code First CTP's to our project. Fortunately, NuGet makes that really easy. Open the Package Manager Console (View / Other Windows / Package Manager Console) and type in "Install-Package EFCodeFirst.SqlServerCompact" at the PM> command prompt. Since NuGet handles dependencies for you, you'll see that it installs everything you need to use Entity Framework Code First in your project. PM> install-package EFCodeFirst.SqlServerCompact 'SQLCE (= 4.0.8435.1)' not installed. Attempting to retrieve dependency from source... Done 'EFCodeFirst (= 0.8)' not installed. Attempting to retrieve dependency from source... Done 'WebActivator (= 1.0.0.0)' not installed. Attempting to retrieve dependency from source... Done You are downloading SQLCE from Microsoft, the license agreement to which is available at http://173.203.67.148/licenses/SQLCE/EULA_ENU.rtf. Check the package for additional dependencies, which may come with their own license agreement(s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement(s), then delete the relevant components from your device. Successfully installed 'SQLCE 4.0.8435.1' You are downloading EFCodeFirst from Microsoft, the license agreement to which is available at http://go.microsoft.com/fwlink/?LinkID=206497. Check the package for additional dependencies, which may come with their own license agreement(s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement(s), then delete the relevant components from your device. Successfully installed 'EFCodeFirst 0.8' Successfully installed 'WebActivator 1.0.0.0' You are downloading EFCodeFirst.SqlServerCompact from Microsoft, the license agreement to which is available at http://173.203.67.148/licenses/SQLCE/EULA_ENU.rtf. Check the package for additional dependencies, which may come with their own license agreement(s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement(s), then delete the relevant components from your device. Successfully installed 'EFCodeFirst.SqlServerCompact 0.8' Successfully added 'SQLCE 4.0.8435.1' to EfCodeFirst-CTP5 Successfully added 'EFCodeFirst 0.8' to EfCodeFirst-CTP5 Successfully added 'WebActivator 1.0.0.0' to EfCodeFirst-CTP5 Successfully added 'EFCodeFirst.SqlServerCompact 0.8' to EfCodeFirst-CTP5 Note: We're using SQLCE 4 with Entity Framework here because they work really well together from a development scenario, but you can of course use Entity Framework Code First with other databases supported by Entity framework. Creating The Model using EF Code First Now we can create our model class. Right-click the Models folder and select Add/Class. Name the Class Person.cs and add the following code: using System.Data.Entity; namespace DeadSimpleServer.Models { public class Person { public int ID { get; set; } public string Name { get; set; } } public class PersonContext : DbContext { public DbSet<Person> People { get; set; } } } Notice that the entity class Person has no special interfaces or base class. There's nothing special needed to make it work - it's just a POCO. The context we'll use to access the entities in the application is called PersonContext, but you could name it anything you wanted. The important thing is that it inherits DbContext and contains one or more DbSet which holds our entity collections. Adding Seed Data We need some testing data to expose from our service. The simplest way to get that into our database is to modify the CreateCeDatabaseIfNotExists class in AppStart_SQLCEEntityFramework.cs by adding some seed data to the Seed method: protected virtual void Seed( TContext context ) { var personContext = context as PersonContext; personContext.People.Add( new Person { ID = 1, Name = "George Washington" } ); personContext.People.Add( new Person { ID = 2, Name = "John Adams" } ); personContext.People.Add( new Person { ID = 3, Name = "Thomas Jefferson" } ); personContext.SaveChanges(); } The CreateCeDatabaseIfNotExists class name is pretty self-explanatory - when our DbContext is accessed and the database isn't found, a new one will be created and populated with the data in the Seed method. There's one more step to make that work - we need to uncomment a line in the Start method at the top of of the AppStart_SQLCEEntityFramework class and set the context name, as shown here, public static class AppStart_SQLCEEntityFramework { public static void Start() { DbDatabase.DefaultConnectionFactory = new SqlCeConnectionFactory("System.Data.SqlServerCe.4.0"); // Sets the default database initialization code for working with Sql Server Compact databases // Uncomment this line and replace CONTEXT_NAME with the name of your DbContext if you are // using your DbContext to create and manage your database DbDatabase.SetInitializer(new CreateCeDatabaseIfNotExists<PersonContext>()); } } Now our database and entity framework are set up, so we can expose data via WCF Data Services. Note: This is a bare-bones implementation with no administration screens. If you'd like to see how those are added, check out The Full Stack screencast series. Creating the oData Service using WCF Data Services Add a new WCF Data Service to the project (right-click the project / Add New Item / Web / WCF Data Service). We’ll be exposing all the data as read/write.  Remember to reconfigure to control and minimize access as appropriate for your own application. Open the code behind for your service. In our case, the service was called PersonTestDataService.svc so the code behind class file is PersonTestDataService.svc.cs. using System.Data.Services; using System.Data.Services.Common; using System.ServiceModel; using DeadSimpleServer.Models; namespace DeadSimpleServer { [ServiceBehavior( IncludeExceptionDetailInFaults = true )] public class PersonTestDataService : DataService<PersonContext> { // This method is called only once to initialize service-wide policies. public static void InitializeService( DataServiceConfiguration config ) { config.SetEntitySetAccessRule( "*", EntitySetRights.All ); config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2; config.UseVerboseErrors = true; } } } We're enabling a few additional settings to make it easier to debug if you run into trouble. The ServiceBehavior attribute is set to include exception details in faults, and we're using verbose errors. You can remove both of these when your service is working, as your public production service shouldn't be revealing exception information. You can view the output of the service by running the application and browsing to http://localhost:[portnumber]/PersonTestDataService.svc/: <service xml:base="http://localhost:49786/PersonTestDataService.svc/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns="http://www.w3.org/2007/app"> <workspace> <atom:title>Default</atom:title> <collection href="People"> <atom:title>People</atom:title> </collection> </workspace> </service> This indicates that the service exposes one collection, which is accessible by browsing to http://localhost:[portnumber]/PersonTestDataService.svc/People <?xml version="1.0" encoding="iso-8859-1" standalone="yes"?> <feed xml:base=http://localhost:49786/PersonTestDataService.svc/ xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom"> <title type="text">People</title> <id>http://localhost:49786/PersonTestDataService.svc/People</id> <updated>2010-12-29T01:01:50Z</updated> <link rel="self" title="People" href="People" /> <entry> <id>http://localhost:49786/PersonTestDataService.svc/People(1)</id> <title type="text"></title> <updated>2010-12-29T01:01:50Z</updated> <author> <name /> </author> <link rel="edit" title="Person" href="People(1)" /> <category term="DeadSimpleServer.Models.Person" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /> <content type="application/xml"> <m:properties> <d:ID m:type="Edm.Int32">1</d:ID> <d:Name>George Washington</d:Name> </m:properties> </content> </entry> <entry> ... </entry> </feed> Let's recap what we've done so far. But enough with services and XML - let's get this into our Windows Phone client application. Creating the DataServiceContext for the Client Use the latest DataSvcUtil.exe from http://odata.codeplex.com. As of today, that's in this download: http://odata.codeplex.com/releases/view/54698 You need to run it with a few options: /uri - This will point to the service URI. In this case, it's http://localhost:59342/PersonTestDataService.svc  Pick up the port number from your running server (e.g., the server formerly known as Cassini). /out - This is the DataServiceContext class that will be generated. You can name it whatever you'd like. /Version - should be set to 2.0 /DataServiceCollection - Include this flag to generate collections derived from the DataServiceCollection base, which brings in all the ObservableCollection goodness that handles your INotifyPropertyChanged events for you. Here's the console session from when we ran it: <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding}" SelectionChanged="MainListBox_SelectionChanged"> Next, to keep things simple, change the Binding on the two TextBlocks within the DataTemplate to Name and ID, <ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding}" SelectionChanged="MainListBox_SelectionChanged"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,0,17" Width="432"> <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" /> <TextBlock Text="{Binding ID}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> Getting The Context In the code-behind you’ll first declare a member variable to hold the context from the Entity Framework. This is named using convention over configuration. The db type is Person and the context is of type PersonContext, You initialize it by providing the URI, in this case using the URL obtained from the Cassini web server, PersonContext context = new PersonContext( new Uri( "http://localhost:49786/PersonTestDataService.svc/" ) ); Create a second member variable of type DataServiceCollection<Person> but do not initialize it, DataServiceCollection<Person> people; In the constructor you’ll initialize the DataServiceCollection using the PersonContext, public MainPage() { InitializeComponent(); people = new DataServiceCollection<Person>( context ); Finally, you’ll load the people collection using the LoadAsync method, passing in the fully specified URI for the People collection in the web service, people.LoadAsync( new Uri( "http://localhost:49786/PersonTestDataService.svc/People" ) ); Note that this method runs asynchronously and when it is finished the people  collection is already populated. Thus, since we didn’t need or want to override any of the behavior we don’t implement the LoadCompleted. You can use the LoadCompleted event if you need to do any other UI updates, but you don't need to. The final code is as shown below: using System; using System.Data.Services.Client; using System.Windows; using System.Windows.Controls; using DeadSimpleServer.Models; using Microsoft.Phone.Controls; namespace WindowsPhoneODataTest { public partial class MainPage : PhoneApplicationPage { PersonContext context = new PersonContext( new Uri( "http://localhost:49786/PersonTestDataService.svc/" ) ); DataServiceCollection<Person> people; // Constructor public MainPage() { InitializeComponent(); // Set the data context of the listbox control to the sample data // DataContext = App.ViewModel; people = new DataServiceCollection<Person>( context ); people.LoadAsync( new Uri( "http://localhost:49786/PersonTestDataService.svc/People" ) ); DataContext = people; this.Loaded += new RoutedEventHandler( MainPage_Loaded ); } // Handle selection changed on ListBox private void MainListBox_SelectionChanged( object sender, SelectionChangedEventArgs e ) { // If selected index is -1 (no selection) do nothing if ( MainListBox.SelectedIndex == -1 ) return; // Navigate to the new page NavigationService.Navigate( new Uri( "/DetailsPage.xaml?selectedItem=" + MainListBox.SelectedIndex, UriKind.Relative ) ); // Reset selected index to -1 (no selection) MainListBox.SelectedIndex = -1; } // Load data for the ViewModel Items private void MainPage_Loaded( object sender, RoutedEventArgs e ) { if ( !App.ViewModel.IsDataLoaded ) { App.ViewModel.LoadData(); } } } } With people populated we can set it as the DataContext and run the application; you’ll find that the Name and ID are displayed in the list on the Mainpage. Here's how the pieces in the client fit together: Complete source code available here

    Read the article

  • 10 Essential Tools for building ASP.NET Websites

    - by Stephen Walther
    I recently put together a simple public website created with ASP.NET for my company at Superexpert.com. I was surprised by the number of free tools that I ended up using to put together the website. Therefore, I thought it would be interesting to create a list of essential tools for building ASP.NET websites. These tools work equally well with both ASP.NET Web Forms and ASP.NET MVC. Performance Tools After reading Steve Souders two (very excellent) books on front-end website performance High Performance Web Sites and Even Faster Web Sites, I have been super sensitive to front-end website performance. According to Souders’ Performance Golden Rule: “Optimize front-end performance first, that's where 80% or more of the end-user response time is spent” You can use the tools below to reduce the size of the images, JavaScript files, and CSS files used by an ASP.NET application. 1. Sprite and Image Optimization Framework CSS sprites were first described in an article written for A List Apart entitled CSS sprites: Image Slicing’s Kiss of Death. When you use sprites, you combine multiple images used by a website into a single image. Next, you use CSS trickery to display particular sub-images from the combined image in a webpage. The primary advantage of sprites is that they reduce the number of requests required to display a webpage. Requesting a single large image is faster than requesting multiple small images. In general, the more resources – images, JavaScript files, CSS files – that must be moved across the wire, the slower your website. However, most people avoid using sprites because they require a lot of work. You need to combine all of the images and write just the right CSS rules to display the sub-images. The Microsoft Sprite and Image Optimization Framework enables you to avoid all of this work. The framework combines the images for you automatically. Furthermore, the framework includes an ASP.NET Web Forms control and an ASP.NET MVC helper that makes it easy to display the sub-images. You can download the Sprite and Image Optimization Framework from CodePlex at http://aspnet.codeplex.com/releases/view/50869. The Sprite and Image Optimization Framework was written by Morgan McClean who worked in the office next to mine at Microsoft. Morgan was a scary smart Intern from Canada and we discussed the Framework while he was building it (I was really excited to learn that he was working on it). Morgan added some great advanced features to this framework. For example, the Sprite and Image Optimization Framework supports something called image inlining. When you use image inlining, the actual image is stored in the CSS file. Here’s an example of what image inlining looks like: .Home_StephenWalther_small-jpg { width:75px; height:100px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL s+zNfREAAAAASUVORK5CYII=) no-repeat 0% 0%; } The actual image (in this case a picture of me that is displayed on the home page of the Superexpert.com website) is stored in the CSS file. If you visit the Superexpert.com website then very few separate images are downloaded. For example, all of the images with a red border in the screenshot below take advantage of CSS sprites: Unfortunately, there are some significant Gotchas that you need to be aware of when using the Sprite and Image Optimization Framework. There are workarounds for these Gotchas. I plan to write about these Gotchas and workarounds in a future blog entry. 2. Microsoft Ajax Minifier Whenever possible you should combine, minify, compress, and cache with a far future header all of your JavaScript and CSS files. The Microsoft Ajax Minifier makes it easy to minify JavaScript and CSS files. Don’t confuse minification and compression. You need to do both. According to Souders, you can reduce the size of a JavaScript file by an additional 20% (on average) by minifying a JavaScript file after you compress the file. When you minify a JavaScript or CSS file, you use various tricks to reduce the size of the file before you compress the file. For example, you can minify a JavaScript file by replacing long JavaScript variables names with short variables names and removing unnecessary white space and comments. You can minify a CSS file by doing such things as replacing long color names such as #ffffff with shorter equivalents such as #fff. The Microsoft Ajax Minifier was created by Microsoft employee Ron Logan. Internally, this tool was being used by several large Microsoft websites. We also used the tool heavily on the ASP.NET team. I convinced Ron to publish the tool on CodePlex so that everyone in the world could take advantage of it. You can download the tool from the ASP.NET Ajax website and read documentation for the tool here. I created the installer for the Microsoft Ajax Minifier. When creating the installer, I also created a Visual Studio build task to make it easy to minify all of your JavaScript and CSS files whenever you do a build within Visual Studio automatically. Read the Ajax Minifier Quick Start to learn how to configure the build task. 3. ySlow The ySlow tool is a free add-on for Firefox created by Yahoo that enables you to test the front-end of your website. For example, here are the current test results for the Superexpert.com website: The Superexpert.com website has an overall score of B (not perfect but not bad). The ySlow tool is not perfect. For example, the Superexpert.com website received a failing grade of F for not using a Content Delivery Network even though the website using the Microsoft Ajax Content Delivery Network for JavaScript files such as jQuery. Uptime After publishing a website live to the world, you want to ensure that the website does not encounter any issues and that it stays live. I use the following tools to monitor the Superexpert.com website now that it is live. 4. ELMAH ELMAH stands for Error Logging Modules and Handlers for ASP.NET. ELMAH enables you to record any errors that happen at your website so you can review them in the future. You can download ELMAH for free from the ELMAH project website. ELMAH works great with both ASP.NET Web Forms and ASP.NET MVC. You can configure ELMAH to store errors in a number of different stores including XML files, the Event Log, an Access database, a SQL database, an Oracle database, or in computer RAM. You also can configure ELMAH to email error messages to you when they happen. By default, you can access ELMAH by requesting the elmah.axd page from a website with ELMAH installed. Here’s what the elmah page looks like from the Superexpert.com website (this page is password-protected because secret information can be revealed in an error message): If you click on a particular error message, you can view the original Yellow Screen ASP.NET error message (even when the error message was never displayed to the actual user). I installed ELMAH by taking advantage of the new package manager for ASP.NET named NuGet (originally named NuPack). You can read the details about NuGet in the following blog entry by Scott Guthrie. You can download NuGet from CodePlex. 5. Pingdom I use Pingdom to verify that the Superexpert.com website is always up. You can sign up for Pingdom by visiting Pingdom.com. You can use Pingdom to monitor a single website for free. At the Pingdom website, you configure the frequency that your website gets pinged. I verify that the Superexpert.com website is up every 5 minutes. I have the Pingdom service verify that it can retrieve the string “Contact Us” from the website homepage. If your website goes down, you can configure Pingdom so that it sends an email, Twitter, SMS, or iPhone alert. I use the Pingdom iPhone app which looks like this: 6. Host Tracker If your website does go down then you need some way of determining whether it is a problem with your local network or if your website is down for everyone. I use a website named Host-Tracker.com to check how badly a website is down. Here’s what the Host-Tracker website displays for the Superexpert.com website when the website can be successfully pinged from everywhere in the world: Notice that Host-Tracker pinged the Superexpert.com website from 68 locations including Roubaix, France and Scranton, PA. Debugging I mean debugging in the broadest possible sense. I use the following tools when building a website to verify that I have not made a mistake. 7. HTML Spell Checker Why doesn’t Visual Studio have a built-in spell checker? Don’t know – I’ve always found this mysterious. Fortunately, however, a former member of the ASP.NET team wrote a free spell checker that you can use with your ASP.NET pages. I find a spell checker indispensible. It is easy to delude yourself that you are capable of perfect spelling. I’m always super embarrassed when I actually run the spell checking tool and discover all of my spelling mistakes. The fastest way to add the HTML Spell Checker extension to Visual Studio is to select the menu option Tools, Extension Manager within Visual Studio. Click on Online Gallery and search for HTML Spell Checker: 8. IIS SEO Toolkit If people cannot find your website through Google then you should not even bother to create it. Microsoft has a great extension for IIS named the IIS Search Engine Optimization Toolkit that you can use to identify issue with your website that would hurt its page rank. You also can use this tool to quickly create a sitemap for your website that you can submit to Google or Bing. You can even generate the sitemap for an ASP.NET MVC website. Here’s what the report overview for the Superexpert.com website looks like: Notice that the Sueprexpert.com website had plenty of violations. For example, there are 65 cases in which a page has a broken hyperlink. You can drill into these violations to identity the exact page and location where these violations occur. 9. LinqPad If your ASP.NET website accesses a database then you should be using LINQ to Entities with the Entity Framework. Using LINQ involves some magic. LINQ queries written in C# get converted into SQL queries for you. If you are not careful about how you write your LINQ queries, you could unintentionally build a really badly performing website. LinqPad is a free tool that enables you to experiment with your LINQ queries. It even works with Microsoft SQL CE 4 and Azure. You can use LinqPad to execute a LINQ to Entities query and see the results. You also can use it to see the resulting SQL that gets executed against the database: 10. .NET Reflector I use .NET Reflector daily. The .NET Reflector tool enables you to take any assembly and disassemble the assembly into C# or VB.NET code. You can use .NET Reflector to see the “Source Code” of an assembly even when you do not have the actual source code. You can download a free version of .NET Reflector from the Redgate website. I use .NET Reflector primarily to help me understand what code is doing internally. For example, I used .NET Reflector with the Sprite and Image Optimization Framework to better understand how the MVC Image helper works. Here’s part of the disassembled code from the Image helper class: Summary In this blog entry, I’ve discussed several of the tools that I used to create the Superexpert.com website. These are tools that I use to improve the performance, improve the SEO, verify the uptime, or debug the Superexpert.com website. All of the tools discussed in this blog entry are free. Furthermore, all of these tools work with both ASP.NET Web Forms and ASP.NET MVC. Let me know if there are any tools that you use daily when building ASP.NET websites.

    Read the article

  • jQuery Templates with ASP.NET MVC

    - by hajan
    In my three previous blogs, I’ve shown how to use Templates in your ASPX website. Introduction to jQuery TemplatesjQuery Templates - tmpl(), template() and tmplItem()jQuery Templates - {Supported Tags}Now, I will show one real-world example which you may use it in your daily work of developing applications with ASP.NET MVC and jQuery. In the following example I will use Pubs database so that I will retrieve values from the authors table. To access the data, I’m using Entity Framework. Let’s pass throughout each step of the scenario: 1. Create new ASP.NET MVC Web application 2. Add new View inside Home folder but do not select a master page, and add Controller for your View 3. BODY code in the HTML <body>     <div>         <h1>Pubs Authors</h1>         <div id="authorsList"></div>     </div> </body> As you can see  in the body we have only one H1 tag and a div with id authorsList where we will append the data from database.   4. Now, I’ve created Pubs model which is connected to the Pub database and I’ve selected only the authors table in my EDMX model. You can use your own database. 5. Next, lets create one method of JsonResult type which will get the data from database and serialize it into JSON string. public JsonResult GetAuthors() {     pubsEntities pubs = new pubsEntities();     var authors = pubs.authors.ToList();     return Json(authors, JsonRequestBehavior.AllowGet); } So, I’m creating object instance of pubsEntities and get all authors in authors list. Then returning the authors list by serializing it to JSON using Json method. The JsonRequestBehaviour.AllowGet parameter is used to make the GET requests from the client become allowed. By default in ASP.NET MVC 2 the GET is not allowed because of security issue with JSON hijacking.   6. Next, lets create jQuery AJAX function which will call the GetAuthors method. We will use $.getJSON jQuery method. <script language="javascript" type="text/javascript">     $(function () {         $.getJSON("GetAuthors", "", function (data) {             $("#authorsTemplate").tmpl(data).appendTo("#authorsList");         });     }); </script>   Once the web page is downloaded, the method will be called. The first parameter of $.getJSON() is url string in our case the method name. The second parameter (which in the example is empty string) is the key value pairs that will be send to the server, and the third function is the callback function or the result which is going to be returned from the server. Inside the callback function we have code that renders data with template which has id #authorsTemplate and appends it to element which has #authorsList ID.   7. The jQuery Template <script id="authorsTemplate" type="text/html">     <div id="author">         ${au_lname} ${au_fname}         <div id="address">${address}, ${city}</div>         <div id="contractType">                     {{if contract}}             <font color="green">Has contract with the publishing house</font>         {{else}}             <font color="red">Without contract</font>         {{/if}}         <br />         <em> ${printMessage(state)} </em>         <br />                     </div>     </div> </script> As you can see, I have tags containing fields (au_lname, au_fname… etc.) that corresponds to the table in the EDMX model which is the same as in the database. One more thing to note here is that I have printMessage(state) function which is called inside ${ expression/function/field } tag. The printMessage function <script language="javascript" type="text/javascript">     function printMessage(s) {         if (s=="CA") return "The author is from California";         else return "The author is not from California";     } </script> So, if state is “CA” print “The author is from California” else “The author is not from California”   HERE IS THE COMPLETE ASPX CODE <!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 runat="server">     <title>Database Example :: jQuery Templates</title>     <style type="text/css">         body           {             font-family:Verdana,Arial,Courier New, Sans-Serif;             color:Black;             padding:2px, 2px, 2px, 2px;             background-color:#FF9640;         }         #author         {             display:block;             float:left;             text-decoration:none;             border:1px solid black;             background-color:White;             padding:20px 20px 20px 20px;             margin-top:2px;             margin-right:2px;             font-family:Verdana;             font-size:12px;             width:200px;             height:70px;}         #address           {             font-style:italic;             color:Blue;             font-size:12px;             font-family:Verdana;         }         .author_hover {background-color:Yellow;}     </style>     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>     <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>     <script language="javascript" type="text/javascript">         function printMessage(s) {             if (s=="CA") return "The author is from California";             else return "The author is not from California";         }     </script>     <script id="authorsTemplate" type="text/html">         <div id="author">             ${au_lname} ${au_fname}             <div id="address">${address}, ${city}</div>             <div id="contractType">                         {{if contract}}                 <font color="green">Has contract with the publishing house</font>             {{else}}                 <font color="red">Without contract</font>             {{/if}}             <br />             <em> ${printMessage(state)} </em>             <br />                         </div>         </div>     </script>     <script language="javascript" type="text/javascript">         $(function () {             $.getJSON("GetAuthors", "", function (data) {                 $("#authorsTemplate").tmpl(data).appendTo("#authorsList");             });         });     </script> </head>     <body>     <div id="title">Pubs Authors</div>     <div id="authorsList"></div> </body> </html> So, in the complete example you also have the CSS style I’m using to stylize the output of my page. Here is print screen of the end result displayed on the web page: You can download the complete source code including examples shown in my previous blog posts about jQuery templates and PPT presentation from my last session I had in the local .NET UG meeting in the following DOWNLOAD LINK. Do let me know your feedback. Regards, Hajan

    Read the article

  • Extending NerdDinner: Adding Geolocated Flair

    - by Jon Galloway
    NerdDinner is a website with the audacious goal of “Organizing the world’s nerds and helping them eat in packs.” Because nerds aren’t likely to socialize with others unless a website tells them to do it. Scott Hanselman showed off a lot of the cool features we’ve added to NerdDinner lately during his popular talk at MIX10, Beyond File | New Company: From Cheesy Sample to Social Platform. Did you miss it? Go ahead and watch it, I’ll wait. One of the features we wanted to add was flair. You know about flair, right? It’s a way to let folks who like your site show it off in their own site. For example, here’s my StackOverflow flair: Great! So how could we add some of this flair stuff to NerdDinner? What do we want to show? If we’re going to encourage our users to give up a bit of their beautiful website to show off a bit of ours, we need to think about what they’ll want to show. For instance, my StackOverflow flair is all about me, not StackOverflow. So how will this apply to NerdDinner? Since NerdDinner is all about organizing local dinners, in order for the flair to be useful it needs to make sense for the person viewing the web page. If someone visits from Egypt visits my blog, they should see information about NerdDinners in Egypt. That’s geolocation – localizing site content based on where the browser’s sitting, and it makes sense for flair as well as entire websites. So we’ll set up a simple little callout that prompts them to host a dinner in their area: Hopefully our flair works and there is a dinner near your viewers, so they’ll see another view which lists upcoming dinners near them: The Geolocation Part Generally website geolocation is done by mapping the requestor’s IP address to a geographic area. It’s not an exact science, but I’ve always found it to be pretty accurate. There are (at least) three ways to handle it: You pay somebody like MaxMind for a database (with regular updates) that sits on your server, and you use their API to do lookups. I used this on a pretty big project a few years ago and it worked well. You use HTML 5 Geolocation API or Google Gears or some other browser based solution. I think those are cool (I use Google Gears a lot), but they’re both in flux right now and I don’t think either has a wide enough of an install base yet to rely on them. You might want to, but I’ve heard you do all kinds of crazy stuff, and sometimes it gets you in trouble. I don’t mean talk out of line, but we all laugh behind your back a bit. But, hey, it’s up to you. It’s your flair or whatever. There are some free webservices out there that will take an IP address and give you location information. Easy, and works for everyone. That’s what we’re doing. I looked at a few different services and settled on IPInfoDB. It’s free, has a great API, and even returns JSON, which is handy for Javascript use. The IP query is pretty simple. We hit a URL like this: http://ipinfodb.com/ip_query.php?ip=74.125.45.100&timezone=false … and we get an XML response back like this… <?xml version="1.0" encoding="UTF-8"?> <Response> <Ip>74.125.45.100</Ip> <Status>OK</Status> <CountryCode>US</CountryCode> <CountryName>United States</CountryName> <RegionCode>06</RegionCode> <RegionName>California</RegionName> <City>Mountain View</City> <ZipPostalCode>94043</ZipPostalCode> <Latitude>37.4192</Latitude> <Longitude>-122.057</Longitude> </Response> So we’ll build some data transfer classes to hold the location information, like this: public class LocationInfo { public string Country { get; set; } public string RegionName { get; set; } public string City { get; set; } public string ZipPostalCode { get; set; } public LatLong Position { get; set; } } public class LatLong { public float Lat { get; set; } public float Long { get; set; } } And now hitting the service is pretty simple: public static LocationInfo HostIpToPlaceName(string ip) { string url = "http://ipinfodb.com/ip_query.php?ip={0}&timezone=false"; url = String.Format(url, ip); var result = XDocument.Load(url); var location = (from x in result.Descendants("Response") select new LocationInfo { City = (string)x.Element("City"), RegionName = (string)x.Element("RegionName"), Country = (string)x.Element("CountryName"), ZipPostalCode = (string)x.Element("CountryName"), Position = new LatLong { Lat = (float)x.Element("Latitude"), Long = (float)x.Element("Longitude") } }).First(); return location; } Getting The User’s IP Okay, but first we need the end user’s IP, and you’d think it would be as simple as reading the value from HttpContext: HttpContext.Current.Request.UserHostAddress But you’d be wrong. Sorry. UserHostAddress just wraps HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"], but that doesn’t get you the IP for users behind a proxy. That’s in another header, “HTTP_X_FORWARDED_FOR". So you can either hit a wrapper and then check a header, or just check two headers. I went for uniformity: string SourceIP = string.IsNullOrEmpty(Request.ServerVariables["HTTP_X_FORWARDED_FOR"]) ? Request.ServerVariables["REMOTE_ADDR"] : Request.ServerVariables["HTTP_X_FORWARDED_FOR"]; We’re almost set to wrap this up, but first let’s talk about our views. Yes, views, because we’ll have two. Selecting the View We wanted to make it easy for people to include the flair in their sites, so we looked around at how other people were doing this. The StackOverflow folks have a pretty good flair system, which allows you to include the flair in your site as either an IFRAME reference or a Javascript include. We’ll do both. We have a ServicesController to handle use of the site information outside of NerdDinner.com, so this fits in pretty well there. We’ll be displaying the same information for both HTML and Javascript flair, so we can use one Flair controller action which will return a different view depending on the requested format. Here’s our general flow for our controller action: Get the user’s IP Translate it to a location Grab the top three upcoming dinners that are near that location Select the view based on the format (defaulted to “html”) Return a FlairViewModel which contains the list of dinners and the location information public ActionResult Flair(string format = "html") { string SourceIP = string.IsNullOrEmpty( Request.ServerVariables["HTTP_X_FORWARDED_FOR"]) ? Request.ServerVariables["REMOTE_ADDR"] : Request.ServerVariables["HTTP_X_FORWARDED_FOR"]; var location = GeolocationService.HostIpToPlaceName(SourceIP); var dinners = dinnerRepository. FindByLocation(location.Position.Lat, location.Position.Long). OrderByDescending(p => p.EventDate).Take(3); // Select the view we'll return. // Using a switch because we'll add in JSON and other formats later. string view; switch (format.ToLower()) { case "javascript": view = "JavascriptFlair"; break; default: view = "Flair"; break; } return View( view, new FlairViewModel { Dinners = dinners.ToList(), LocationName = string.IsNullOrEmpty(location.City) ? "you" : String.Format("{0}, {1}", location.City, location.RegionName) } ); } Note: I’m not in love with the logic here, but it seems like overkill to extract the switch statement away when we’ll probably just have two or three views. What do you think? The HTML View The HTML version of the view is pretty simple – the only thing of any real interest here is the use of an extension method to truncate strings that are would cause the titles to wrap. public static string Truncate(this string s, int maxLength) { if (string.IsNullOrEmpty(s) || maxLength <= 0) return string.Empty; else if (s.Length > maxLength) return s.Substring(0, maxLength) + "..."; else return s; }   So here’s how the HTML view ends up looking: <%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<FlairViewModel>" %> <%@ Import Namespace="NerdDinner.Helpers" %> <%@ Import Namespace="NerdDinner.Models" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nerd Dinner</title> <link href="/Content/Flair.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="nd-wrapper"> <h2 id="nd-header">NerdDinner.com</h2> <div id="nd-outer"> <% if (Model.Dinners.Count == 0) { %> <div id="nd-bummer"> Looks like there's no Nerd Dinners near <%:Model.LocationName %> in the near future. Why not <a target="_blank" href="http://www.nerddinner.com/Dinners/Create">host one</a>?</div> <% } else { %> <h3> Dinners Near You</h3> <ul> <% foreach (var item in Model.Dinners) { %> <li> <%: Html.ActionLink(String.Format("{0} with {1} on {2}", item.Title.Truncate(20), item.HostedBy, item.EventDate.ToShortDateString()), "Details", "Dinners", new { id = item.DinnerID }, new { target = "_blank" })%></li> <% } %> </ul> <% } %> <div id="nd-footer"> More dinners and fun at <a target="_blank" href="http://nrddnr.com">http://nrddnr.com</a></div> </div> </div> </body> </html> You’d include this in a page using an IFRAME, like this: <IFRAME height=230 marginHeight=0 src="http://nerddinner.com/services/flair" frameBorder=0 width=160 marginWidth=0 scrolling=no></IFRAME> The Javascript view The Javascript flair is written so you can include it in a webpage with a simple script include, like this: <script type="text/javascript" src="http://nerddinner.com/services/flair?format=javascript"></script> The goal of this view is very similar to the HTML embed view, with a few exceptions: We’re creating a script element and adding it to the head of the document, which will then document.write out the content. Note that you have to consider if your users will actually have a <head> element in their documents, but for website flair use cases I think that’s a safe bet. Since the content is being added to the existing page rather than shown in an IFRAME, all links need to be absolute. That means we can’t use Html.ActionLink, since it generates relative routes. We need to escape everything since it’s being written out as strings. We need to set the content type to application/x-javascript. The easiest way to do that is to use the <%@ Page ContentType%> directive. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Models.FlairViewModel>" ContentType="application/x-javascript" %> <%@ Import Namespace="NerdDinner.Helpers" %> <%@ Import Namespace="NerdDinner.Models" %> document.write('<script>var link = document.createElement(\"link\");link.href = \"http://nerddinner.com/content/Flair.css\";link.rel = \"stylesheet\";link.type = \"text/css\";var head = document.getElementsByTagName(\"head\")[0];head.appendChild(link);</script>'); document.write('<div id=\"nd-wrapper\"><h2 id=\"nd-header\">NerdDinner.com</h2><div id=\"nd-outer\">'); <% if (Model.Dinners.Count == 0) { %> document.write('<div id=\"nd-bummer\">Looks like there\'s no Nerd Dinners near <%:Model.LocationName %> in the near future. Why not <a target=\"_blank\" href=\"http://www.nerddinner.com/Dinners/Create\">host one</a>?</div>'); <% } else { %> document.write('<h3> Dinners Near You</h3><ul>'); <% foreach (var item in Model.Dinners) { %> document.write('<li><a target=\"_blank\" href=\"http://nrddnr.com/<%: item.DinnerID %>\"><%: item.Title.Truncate(20) %> with <%: item.HostedBy %> on <%: item.EventDate.ToShortDateString() %></a></li>'); <% } %> document.write('</ul>'); <% } %> document.write('<div id=\"nd-footer\"> More dinners and fun at <a target=\"_blank\" href=\"http://nrddnr.com\">http://nrddnr.com</a></div></div></div>'); Getting IP’s for Testing There are a variety of online services that will translate a location to an IP, which were handy for testing these out. I found http://www.itouchmap.com/latlong.html to be most useful, but I’m open to suggestions if you know of something better. Next steps I think the next step here is to minimize load – you know, in case people start actually using this flair. There are two places to think about – the NerdDinner.com servers, and the services we’re using for Geolocation. I usually think about caching as a first attack on server load, but that’s less helpful here since every user will have a different IP. Instead, I’d look at taking advantage of Asynchronous Controller Actions, a cool new feature in ASP.NET MVC 2. Async Actions let you call a potentially long-running webservice without tying up a thread on the server while waiting for the response. There’s some good info on that in the MSDN documentation, and Dino Esposito wrote a great article on Asynchronous ASP.NET Pages in the April 2010 issue of MSDN Magazine. But let’s think of the children, shall we? What about ipinfodb.com? Well, they don’t have specific daily limits, but they do throttle you if you put a lot of traffic on them. From their FAQ: We do not have a specific daily limit but queries that are at a rate faster than 2 per second will be put in "queue". If you stay below 2 queries/second everything will be normal. If you go over the limit, you will still get an answer for all queries but they will be slowed down to about 1 per second. This should not affect most users but for high volume websites, you can either use our IP database on your server or we can whitelist your IP for 5$/month (simply use the donate form and leave a comment with your server IP). Good programming practices such as not querying our API for all page views (you can store the data in a cookie or a database) will also help not reaching the limit. So the first step there is to save the geolocalization information in a time-limited cookie, which will allow us to look up the local dinners immediately without having to hit the geolocation service.

    Read the article

  • Using Rich Text Editor (WYSIWYG) in ASP.NET MVC

    - by imran_ku07
       Introduction:          In ASP.NET MVC forum I found some question regarding a sample HTML Rich Text Box Editor(also known as wysiwyg).So i decided to create a sample ASP.NET MVC web application which will use a Rich Text Box Editor. There are are lot of Html Editors are available, but for creating a sample application, i decided to use cross-browser WYSIWYG editor from openwebware. In this article I will discuss what changes needed to work this editor with ASP.NET MVC. Also I had attached the sample application for download at http://www.speedfile.org/155076. Also note that I will only show the important features, not discuss every feature in detail.   Description:          So Let's start create a sample ASP.NET MVC application. You need to add the following script files,         jquery-1.3.2.min.js        jquery_form.js        wysiwyg.js        wysiwyg-settings.js        wysiwyg-popup.js          Just put these files inside Scripts folder. Also put wysiwyg.css in your Content Folder and add the following folders in your project        addons        popups          Also create a empty folder Uploads to store the uploaded images. Next open wysiwyg.js and set your configuration                  // Images Directory        this.ImagesDir = "/addons/imagelibrary/images/";                // Popups Directory        this.PopupsDir = "/popups/";                // CSS Directory File        this.CSSFile = "/Content/wysiwyg.css";              Next create a simple View TextEditor.aspx inside View / Home Folder and add the folllowing HTML.        <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <html >            <head runat="server">                <title>TextEditor</title>                <script src="../../Scripts/wysiwyg.js" type="text/javascript"></script>                <script src="../../Scripts/wysiwyg-settings.js" type="text/javascript"></script>                <script type="text/javascript">                            WYSIWYG.attach('text', full);                            </script>            </head>            <body>                <% using (Html.BeginForm()){ %>                    <textarea id="text" name="test2" style="width:850px;height:200px;">                    </textarea>                    <input type="submit" value="submit" />                <%} %>            </body>        </html>                  Here i have just added a text area control and a submit button inside a form. Note the id of text area and WYSIWYG.attach function's first parameter is same and next to watch is the HomeController.cs        using System;        using System.Collections.Generic;        using System.Linq;        using System.Web;        using System.Web.Mvc;        using System.IO;        namespace HtmlTextEditor.Controllers        {            [HandleError]            public class HomeController : Controller            {                public ActionResult Index()                {                    ViewData["Message"] = "Welcome to ASP.NET MVC!";                    return View();                }                    public ActionResult About()                {                                return View();                }                        public ActionResult TextEditor()                {                    return View();                }                [AcceptVerbs(HttpVerbs.Post)]                [ValidateInput(false)]                public ActionResult TextEditor(string test2)                {                    Session["html"] = test2;                            return RedirectToAction("Index");                }                        public ActionResult UploadImage()                {                    if (Request.Files[0].FileName != "")                    {                        Request.Files[0].SaveAs(Server.MapPath("~/Uploads/" + Path.GetFileName(Request.Files[0].FileName)));                        return Content(Url.Content("~/Uploads/" + Path.GetFileName(Request.Files[0].FileName)));                    }                    return Content("a");                }            }        }          So simple code, just save the posted Html into Session. Here the parameter of TextArea action is test2 which is same as textarea control name of TextArea.aspx View. Also note ValidateInputAttribute is false, so it's up to you to defends against XSS. Also there is an Action method which simply saves the file inside Upload Folder.          I am uploading the file using Jquery Form Plugin. Here is the code which is found in insert_image.html inside addons folder,        function ChangeImage() {            var myform=document.getElementById("formUpload");                    $(myform).ajaxSubmit({success: function(responseText){                insertImage(responseText);                        window.close();                }            });        }          and here is the Index View which simply renders the html of Editor which was saved in Session        <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>        <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">            Home Page        </asp:Content>        <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">            <h2><%= Html.Encode(ViewData["Message"]) %></h2>            <p>                To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.            </p>            <%if (Session["html"] != null){                  Response.Write(Session["html"].ToString());            } %>                    </asp:Content>   Summary:          Hopefully you will enjoy this article. Just download the code and see the effect. From security point, you must handle the XSS attack your self. I had uploaded the sample application in http://www.speedfile.org/155076

    Read the article

< Previous Page | 401 402 403 404 405 406 407 408 409 410  | Next Page >