Develop Reference

How to call javascript function erverytime when i click to open Bootstarp Modal using Codeigniter?

I want to call javascript function when i click an link and open a Bootstarp Modal.
When first time Bootstarp Modal load then function called but when i closed Bootstrap Modal and again click on same link and open same Bootstrap Modal then Function is not called.
I want to call function everytime when i open Bootstrap Modal.
Bootstrap Call Function :
$(document).on("click", "#update_project_image_modal", function() {
var cid = $(this).data('id');
console.log(cid);
$.ajax({
url: '<?=$this->config->base_url()?>admin_panel/update_project_images_popup',
type: 'post',
data: 'project_id=' + cid
}).done(function(data) {
jQuery('#categoryModal .modal-content').html(data);
$('#categoryModal').modal({
"backdrop" : "static"
});
});
});
Function Call In Bootstrap Modal Load :
$(document).ready(function($) {
console.log('ready');
listFilesOnServer();
});
HTML Table (Where i click link to open Bootstarp Modal) :
<table id="table3" class="display table table-bordered table-striped table-hover">
<thead>
<tr>
<th> Name</th>
<th> Location</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>jkhjk</td>
<td>kjhjk</td>
<td> Images
</td>
</tr>
</tbody>
</table>

Bootstrap has an event which is triggered when the modal is called:
show.bs.modal
This event fires immediately when the show instance method is called.
If caused by a click, the clicked element is available as the
relatedTarget property of the event.
In your case you would use it like so:
$('#categoryModal').on('show.bs.modal',function(evt){
listFilesOnServer();
});

Check All box does not work with Jquery DataTable version 1.10.5

I have a jquery dataTable with 3 columns (check box column, userId, full name). The 'check_all' check box worked fine (meaning all the rows were checked when the 'check_all' was clicked) when I used it with jquery.dataTables.js and jquery.dataTables.min.js version 1.9.4. However, I have to use dataTable version 1.10.5 in order to use the "draw()" function. But once I started using the new version, the check_all checkbox stopped working, the alert() inside the .click() didn't get invoked. I tried to put the .click function inside the $(document).ready(), but didn't fix the issue. Anybody has any idea ? Thanks!!
Script:
$('#check_all').click(function()
{
alert("here");
var oTable = $('#users').DataTable();
});
HTML part:
<DIV id ="tablePanel">
<table class="userTable" cellpadding="4" rules="all" border="1" id="users">
<THEAD>
<TR>
<th><input type="checkbox" id ="check_all" class="call-checkbox" name="check_all">Select users</th>
<th>User Id</th>
<th>Full Name</th>
</TR>
</THEAD>
<TBODY>
<TBODY>
</table>
</DIV>

You are missing the closing ")" on the click event handler function. You should also ensure that any bindings occur after the DOM is ready by placing them inside jQuery's document.ready() function.
The full syntax is $(document).ready(function () { .. }); but it can be shortened to $(function() { ... });
$(function () {
$('#check_all').click(function () {
alert("here");
var oTable = $('#users').DataTable();
});
});
Demo: http://jsfiddle.net/BenjaminRay/qe0ckve8/

how to show edit button upon right click on table row

Is it possible that i can show edit button after right clicking on row of a table? I wanted to inbuilt this functionality in my html page but i am not getting the idea how to do that. MY html page is like this
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr>
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>johnrambo#mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
<tr>
<td>peterparker#mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit">Edit</a>
</td>
</tr>
</tbody>
</table>
When i right click on the row of this table then it should show me edit buttin which i can use to edit the table. TO edit the table i have js file but that is other thing. Main thing I want to make the edit button visible after right click.And also I have use bootstrap to improve the visibility. Please help me to solve this problem.

This code might help you:
on right clicking on specific <tr>
1) no default browser menu opens
2) Show/hide edit link
On clicking on document (both left and right)
1) hide edit link (can be changed accordingly)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.btnEdit{display:none;}
</style>
</head>
<body>
<table class="table table-hover table-bordered" id="tblData">
<thead>
<tr class ='abc' >
<th>Parameter Names</th>
<th>Parameter Values</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id = 'John1' class ='abc'> <!-- id=username+userid -->
<td>johnrambo#mail.com</td>
<td>John</td>
<td>Rambo</td>
<td>
<a class="btn btn-mini btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
<tr id = 'Peter1' class ='abc'>
<td>peterparker#mail.com</td>
<td>Peter</td>
<td>Parker</td>
<td>
<a class="btn btn-mini btnEdit" id ="btnEdit" href='asd.html' >Edit</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
$(document).ready(function(){
$('.abc').contextmenu(function(){
$('.btnEdit').hide();
var id = $(this).attr('id');
$('#'+id+' .btnEdit').toggle();
return false;
});
$(document).click(function(){
$('.btnEdit').hide();
});
});
</script>
try it here http://jsfiddle.net/f5n9f4po/2/

The event you're looking to capture is window.oncontextmenu. I'm pretty sure you can tie the event to right click by binding it to the tr tags.
(tr selector).oncontextmenu = function () {
toggleEditButton() // callback fn for showing your edit button
return false; // Prevents actual right click menu from showing up
};
Refer to this for more info.

You can handle it using onmousedown event. When you press the mouse button this event will be fired and by checking it's keyCode you can find if it's the right mouse button.
This should serve your purpose.
HTML :
<div onmousedown="showEditButton(event);">Row Content</div>
<button id="editButton" style="display:none;">Edit</button>
javaScript :
function showEditButton(event){
event = event || window.event;
if(event.which == 3){
var button = document.getElementById("editButton");
button.style.display = 'block';
}
}
jsFiddle - javaScript
jQuery :
$("#editableContent").mousedown(function(event){
if(event.which == 3){
$("#editButton").show();
}
});
jsFiddle - jQuery
Resources :
onmousedown , .mouseDown() , event.which

This answer is based on Making custom right-click context menus for my web-app implemented to work for your situation.
JSFiddle
Here's the JQuery:
// Trigger action when the contexmenu is about to be shown
$('.btnEdit').bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide();
}
});
// If the menu element is clicked
$(".custom-menu li").click(function () {
// This is the triggered action name
switch ($(this).attr("data-action")) {
// A case for each action. Your actions here
case "edit":
alert("Edited!");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide();
});

Tinymce double click insert new paragraph

If I have 2 tables directly under each other with margin-bottom, is it impossible to place the cursor in this gap by creating a temporary paragraph.
E.g I want to insert a new table between the other 2. This is impossible without altering the HTML directly.
Is it possible to use the double click so that it works similar to MS word and creates a blank paragraph in this area you click, this would then get replace by the table etc similar to how the trailing plugin works.
I currently use the 'trailing' plugin which fixes this similar issue at the bottom of the page.
Also I am using the jquery version of tinymce, if that makes it any easier to fix this.
Example HTML inside tinymce editor;
<table style="margin: 15px 0; width: 100%;">
<thead>
<tr>
<th scope="col">
Product Name</th>
<th scope="col">
Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large product</td>
<td>Find out more</td>
</tr>
<tr>
<td>Large product</td>
<td>Find out more</td>
</tr>
</tbody>
</table>
<table style="margin: 15px 0; width: 100%;">
<thead>
<tr>
<th scope="col">
Product Name</th>
<th scope="col">
Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Large product</td>
<td>Find out more</td>
</tr>
<tr>
<td>Large product</td>
<td>Find out more</td>
</tr>
</tbody>
</table>
Also created a jsFiddle with example: http://fiddle.tinymce.com/Sicaab/2 I want to be able to insert extra content (paragraph,another table, list etc) between the 2 tables without editing the HTML.

The mouse position won't help you, because you do not know if the editor content has been scrolled or not.
First, i will show you how to work with the onDblClick.
Here is a helpfull function to get the paragraph of an editor html element (in case there are no html elements that are not stacked under(or better in) a paragraph.
function table_of_click(node)
{
while (node)
{
if (node.nodeName == 'BODY') { return null; }
if (node.nodeName == 'TABLE') { return node; }
else { node = node.parentNode; }
}
return null;
};
Here is the necessary call to catch the double click event.
Be aware that this solution will add a paragraph just before the paragraph you clicked in.
I assume your tables are in a paragraph each?
ed.onDblClick.add(function(ed, evt){
// get tableof click event
var table = table_of_click(evt.target);
// if the click has not been inside a table return (nothing to do)
if (!table) return;
$(table).before("<p id='new_p'><br></p>");
ed.selection.select( $(ed.getBody()).find('#new_p').get(0) );
$('.new_p:first').remove();
evt.preventDefault();
evt.stopPropagation();
return false;
});

There is a way to get the caret (text cursor) position into the text
Caret position in textarea, in characters from the start
this is just a function getCaret(element);
now we need to capture the tinymce container's body inside the iframe content_ifr
the iframe: document.getElementById("content_ifr")
the tinymce's body: ...contentDocument.getElementById("tinymce")
using jquery we listen to the dblclick event:
.dblclick(function(event){})
find the caret and inject a <p> element on its position.
html.substr(0,position)+"<p></p>"+html.substr(position)
that is, all the text from the start to position, the p element and the text from the position to the end.
The whole code will look like this:
var editor = document.getElementById("content_ifr").contentDocument.getElementById("tinymce");
$(editor).dblclick(function(event){
var position = getCaret(this);
this.innerHTML = this.innerHTML.substr(0,position)+"<p></p>"+this.innerHTML.substr(position);
}
this should do the job ;)

Does jquery or javascript execute when loaded dynamically on an event?

I have a dropdown and when i choose an option it will load an appropriate table from the server and display it using jQuery, along with the table i also send a tiny jQuery script like,
<table id="dataFileTableHeader">
<thead>
<tr>
<th><strong>Export Type</strong></th>
<th><strong>Company</strong></th>
<th><strong>File Name</strong></th>
<th><strong>Date Modified</strong></th>
<th><strong>Total Records</strong></th>
<th><strong>File Size</strong></th>
<th><strong>Owner</strong></th>
</tr>
</thead>
</table>
<script>
$(function(){
var i = 0;
$('#dataFileTableHeader th').each(function(index) {
alert("hello " + (++i));
});
});
</script>
when this is loaded i am expecting alert to show up 7 times but nothing happens am i missing something?

DEMO
You have a space after your id
(<table id="dataFileTableHeader "> instead of <table id="dataFileTableHeader">
So this one is correct
<table id="dataFileTableHeader">
<thead>
<tr>
<th><strong>Export Type</strong></th>
<th><strong>Company</strong></th>
<th><strong>File Name</strong></th>
<th><strong>Date Modified</strong></th>
<th><strong>Total Records</strong></th>
<th><strong>File Size</strong></th>
<th><strong>Owner</strong></th>
</tr>
</thead>
</table>
<script>
$(function(){
var i = 0;
$('#dataFileTableHeader th').each(function(index) {
alert("hello " + (++i));
});
});
</script>
You can also just use the index in the alert to grab the number. You don't need "i"

If your content is dynamically loaded, the script is probably being run before the content gets there. Have this code after your "success" parameters in your ajax function (hard to say without seeing that code). Make sense?