zwwcn

Just another WordPress.com site

Category Archives: Uncategorized

print css example

I had a task to print a dashboard page.  The print review looks quite different from the web page, so I have to create a print css to customize the display.

Create a print link on the page to call the below function.

		function printDiv() {					    
                     //backup dom
		     var originalContents = document.body.innerHTML;
		     
                     //make whatever change you want, remove unnecessary elements	
	             $("li").removeClass("gs-w");
		
                     //print the modified page
		     window.print();

                     //reset page 	
	             document.body.innerHTML = originalContents;
		}

Include the css on the page,  apply the page break only in print mode.

@media all {
	.page-break {
		display: none !important;
	}
}

@media print {
	html, body, ul {
		float: none !important;
	}
	.page-break {
		display: block;
		page-break-after: always;
	}
}

 

Advertisements

Request URI too long

I had a task to add a link in a chart. Depends on the area user clicks,  the system will create a get request, forward the user to next page.  The URL looks like “http://localhost:8080/nextpage?q=para1:1,2,3,4;para2:3,2,2,3;para3:test1,test2,test..”. The URL becomes too long and gives an error in the browser: request URI too long.

All we need to do is to change the request to post request. We create a hidden form on the page, which contains one input field and one button. the input field is used to save the parameters value (q in the example), and when user click the chart. I set the parameters value to the input field, then trigger a click on the button to submit the form.


And the code in javascript listener:

 ......
 $("#hsChartForm\\:queryStringFromCharts").val("monthString:"+monthString+";siteids:"+...);
 $("#hsChartForm\\:chartLink").click();
.....

Jquery mobile multiple select with many options

When multiple select has too many options, jquery mobile will open a dialog rather than popup, which is a new page. Every time the popup is closed the pagecontainerbeforeload and pagecontainershow events are triggered again and thereby the initialisation code. We could add a check on the prevPage to avoid unwanted initialisation.

    $(document).on( "pagecontainerbeforeload", function( event, data ) {
         if(ui.prevPage.attr("id").indexOf("-dialog")>-1){
              return;
         }
         ......initialisation code....
    }

Create copy of a list

Sometimes we want to pass a list as parameter to a method, we will do some work on the list but don’t want to affect the origin list.

The code below is not good, as we are passing the orginal reference to the method, all changes will affect the orginal list

     DoSomeWork(SelectedPerson.getAllAddresses());

Instead, we should do something like:

     DoSomeWork(new ArrayList(SelectedPerson.getAllAddresses()));

Pleaes be awared that the second example passed a copy of the list to DoSomeWork, but the elements in the copy still hold reference to the orginal elements. Modifying any object element in the copy list will also change the element in the original.

hibernate criteria on composite id

@Embeddable
public class TeacherStudentPK  implements java.io.Serializable{
    @ManyToOne
    @JoinColumn(name = "STUDENT_ID")
	private Student student;
    @ManyToOne
    @JoinColumn(name = "TEACHER_ID")
public class TeacherStudent implements java.io.Serializable {

	/* primay key*/
	@EmbeddedId 
	private TeacherStudentPK teacherStudentPK;
      public class Student{
	@OneToMany(mappedBy="teacherStudentPK.student")
	private Collection teachers = new ArrayList();

The crieteria is shown below:

criteria = em.createCriteria(Student.class, "student")
		   .createAlias("student.teachers", "teacherStudent")
.add(Restrictions.eq("teacherStudent.teacherStudentPK.teacher", selectedTeacher))
									

collections.singletonMap

singtonMap and singletonList allow you quickly create an unmodifiable collection:

methodTakesAMap(Collections.singletonMap(key, value));

rather than this:

Map<KeyType, ValueType> m = new HashMap<KeyType, ValueType>();
m.put(key, value);
methodTakesAMap(m);

singletonList example:


List sampleList = collections.singletonList("theOnlyOption");

access javascript object property using variable

I want to assign data to a js object as a property, but the new property name is dynamic.

The bracket notation should be used here:

var apiDynamicString = "dynamicStringFromOtherFunction";

var apiDynamicData ="somedata...";

example.data[apiDynamicString] = apiDynamicData ;

Then you can access the property this way:

console.log(example.data[apiDynamicString]);

OR (if you know the variable value)

console.log(example.data.dynamicStringFromOtherFunction);

javascript onclick event not working in chrome

The onclick event for select option is not triggered in chrome. We need to fire the onchange event on the select component.

<select class="select-one-group-select">
 <option class="select-one-group-option" value="option1">option 1</option>
 <option class="select-one-group-option"  value="option2">option 2</option>
 <option class="select-one-group-option"  value="option3">option 3</option>
</select>

This doesn’t work:

	$(".select-one-group-option").click(function() {
		showFilters(parseInt(this.value));
	});

 

This solve the problem:

	$(".select-one-group-select").change(function() {
		showFilters(parseInt(this.value));
	});

JPA native query with parameter

I tried ?name but couldn’t get it working. I end up with using number (?1 ,?2) to build up my dynamic query and it works properly.
Query query = em.createNativeQuery(“SELECT * FROM OP_CHECKLIST c WHERE c.DATE BETWEEN ?1 AND ?2 “);

Query query = em.createNativeQuery("SELECT * FROM OP_CHECKLIST c WHERE c.DATE BETWEEN ?1 AND ?2 ");
query.setParameter("1", sdf.format(fromDate));
query.setParameter("2", sdf.format(endDate));

Set Content Security Policy for Cordova app

I’m getting some error when debuging my cordova app on Android device.  The error msg is

Refused to load the image 'data:image/png;base64,....' because it violates the following Content Security Policy directive: "img-src 'self' data".

I googled it and found that I need to set content security policy meta tag.

This link gives detailed example and helped me solve the problem.