zwwcn

Just another WordPress.com site

Category Archives: jquery

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

JQuery notes

  1. How to add listener for html content loaded by ajax call?

    Bind on a non-dynamic parent container using .on()

    $('.some-parent-class').on('click', '.element', function() {
      // DO STUFF!
    });
  2. AddClass function

      AddClass function always check exisitng classes before adding new one, so we don’t need to check duplicate classes

     3. Find function

       The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree

     4. text() and textarea

       The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method

      5. checkbox and prop

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

      6. toggle

Quick way to switch show/hide, checked/unchecked state

$('#checkBoxId').click(function() {
    $("#otherCheckbox").toggle(this.checked);
});

       7. event.preventDefault()

Cancel the default action (navigation) of the click, this is used when we only want to trigger a js function but don’t want the page navagation.

 

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));
	});

debug JQuery script loaded by getscript function

When loading js function with JQuery getScript function, we can’t debug it becuase it’s not in DOM. The following js function add the loaded js function into DOM and solve the problem.

var loadScript = function (path) {
    var result = $.Deferred(),
        script = document.createElement("script");
    script.async = "async";
    script.type = "text/javascript";
    script.src = path;
    script.onload = script.onreadystatechange = function(_, isAbort) {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
            if (isAbort)
                result.reject();
            else
                result.resolve();
        }
    };
    script.onerror = function () { result.reject(); };
    $("head")[0].appendChild(script);
    return result.promise();
};

ref from :http://balpha.de/2011/10/jquery-script-insertion-and-its-consequences-for-debugging/