Im using jqwidjets jqxgrif for one of my project.
In grid i want select a row and edit it in another page(href link).the EDIT link in outside the grid.
currently im using following code to row select.but its only working for keyboard navigation not for mouse select.how do i enable mouse select and pass row index to outside edit link onclick event.
$("#jqxgrid").jqxGrid(
{ width : '100%',
source: dataadapter,
selectionmode: 'singlerow',
altrows: true,
theme: theme,
filterable: true,
autoheight: true,
pageable: true,
columnsresize: true,
//virtualmode: true,
pagesizeoptions: ['10', '15', '20'],
pagesize:20,
sortable: true,
ready: function () {
//$("#jqxgrid").jqxGrid('sortby', 'ObjectId', 'asc');
//$("#jqxgrid").jqxGrid('selectionmode', 'singlerow');
$("#jqxgrid").jqxGrid('selectrow', 0);
},
rendergridrows: function () {
return dataadapter.records;
},
columns: [
I use the following for getting the click and keyboard, hopefully this helps.
$('#jqxgrid').bind('rowselect', function(event) {
var current_index = event.args.rowindex;
var datarow = $('#jqxgrid').jqxGrid('getrowdata', current_index);
// Use datarow for display of data in div outside of grid
});
$("#jqxgrid").bind('rowselect', function (event) {
});
Related
The datatable and YADCF does not return any record when using multiselect filter from YADCF plugins
Here the screenshot
Using Below JS Scripts
$(document).ready(function() {
'use strict';
var oTable = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php"
} );
yadcf.init(oTable, [
{
column_number: 0,
filter_type: 'multi_select',
select_type: 'select2'
}
]);
} );
Here the respond parameter snip
I use serverside and php, but I think this is not PHP/SQL problem rather than Javascripts problem, but I dont know how to do it..
Thank You..
hello guys : i'm trying to make popup using Jquery inside Razor Mvc
4 , the popup done correctly but the problem when i press on close "x"
and press again to let popup appears again jquery redirect to new page
that contains the content of the dialog when im refresh the page and
let dialog apears again worked
$("#dialog-edit").dialog({
title: 'Card Types',
autoOpen: false,
resizable: false,
dialogClass: 'CreateClass',
closeOnEscape: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: false,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").show();
$(this).load(url);
}
});
$("#lnkCreate").live("click", function (e) {
//e.preventDefault(); //use this or return false
//
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
the answer is
the partial view that i'm loaded inside the dialog contains
#*<script src="~/Scripts/jquery-1.7.1.min.js"></script>
when i'm removed it everything worked correctly
I have the following in a table, repeated for each row:
<a <?php echo 'id="'.$id.'"'; ?> class="custom-dialog-btn btn btn-small">
<i class="icon-trash"></i>
</a>
where id is different for each line, because it is taken from a table in database where it is the primary key.
Then, I used th following jQuery code:
$(".custom-dialog-btn").bind("click", function (event) {
$("#mws-jui-dialog").dialog("option", {
modal: false
}).dialog("open");
event.preventDefault();
});
$("#mws-jui-dialog").dialog({
autoOpen: false,
title: "Alert",
modal: true,
width: "640",
buttons: [{
text: "NO",
id: "cancel_button",
click: function () {
$(this).dialog("close");
}
},
{
text: "OK",
id: "confirm_button",
click: function () {
myremovefuntion(id); // I need the id
}}
]
});
that refers to the dialog:
<div id="mws-jui-dialog">
<div class="mws-dialog-inner">
<h2>Are you sure you want to delete?</h2>
</div>
</div>
How can I pass the id to the modal?
You can append a data attribute to your dialog div as follows;
$('a').click(function (e) {
e.preventDefault();
$("#your_dialog").data('mycustomdata', $(this).prop('id')).dialog('open');
});
And retreive it like this
$("#your_dialog").dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Delete': function() {
$(this).dialog('close');
var mydata = $(this).data('mycustomdata'); // = gives you the id of anchor element
// some delete logic
}
}
});
While Emin's answer certainly works, I wonder if this fabuolus jQuery UI library perhaps has a dialogue flavour analogue to JavaScript's native confirm() method? Or perhaps a possibility to pass in callback functions? This would remove the need from the dialogue code containing business logic.
Use the following code to get the id:
var id = $(this).prop("id");
And you will get the id of that which element you have clicked.
I'm sorry if this is the wrong place. Actually this has been asked before by another user (although it was not the same question) and it was said that this is a PHP question. Unfortunately I am not good enough in PHP to implement the answer.
Here is the [previous question]:https://wordpress.stackexchange.com/questions/82503/cant-get-options-with-datavariable
I am facing the same problem. In my options, I have a slider's option (animation - fade or slide) and then I want to use the value stored in the option and pass it into Javascript in my function.php.
In the option file I have these codes:
// Slider animation options
$of_options_slider_animation = array(
"fade" => __("Fade", "themename"),
"slide" => __("Slide", "themename")
);
and
$of_options[] = array( "name" => __("Slider Animation", "themename"),
"desc" => __("Select the type of animation for the slider.", "themename"),
"id" => "slider_animation",
"std" => "fade",
"type" => "radio",
"options" => $of_options_slider_animation
Later I would pass the option into a js block of code in functions.php like so:
jQuery('.flexslider').flexslider({
controlNav: true,
directionNav: true,
prevText: 'Previous',
nextText: 'Next',
**animation: "<?php echo $smof_data['slider_animation']; ?>",**
animationLoop: false
// animation: "slide"
});
(please notice the bold-ed part)
However, as you may predict, it doesn't work.
I've tried defining the $smof_data like in the previous question (see link above) but still no luck. Here is what I do:
// Fetch options data
global $smof_data;
$smof_data = of_get_options("slider_animation");
Please help, thanks in advance :)
EDIT:
SMOF link: https://github.com/sy4mil/Options-Framework
I am using a blank / starter theme by underscores.me
Solved it :D I use the variable directly within the Javascript scope. Here is the code (just in case)
function mytheme_flexslider() {
if (!is_admin()) {
// Enqueue FlexSlider JavaScript
wp_register_script('jquery_flexslider', get_template_directory_uri(). '/js/jquery.flexslider-min.js', array('jquery') );
wp_enqueue_script('jquery_flexslider');
// Enqueue FlexSlider Stylesheet
wp_register_style( 'flexslider-style', get_template_directory_uri() . '/inc/flexslider/flexslider.css', 'all' );
wp_enqueue_style( 'flexslider-style' );
// FlexSlider custom settings
add_action('wp_footer', 'mytheme_flexslider_settings');
function mytheme_flexslider_settings() {
// Fetch options data
**global $smof_data;?>**
<script>
// Can also be used with $(document).ready()
// flexslider have a fixed height
jQuery(window).load(function() {
// jQuery('.subhead_shadow_bottom').hide();
jQuery('.flexslider').flexslider({
controlNav: true,
directionNav: true,
prevText: 'Previous',
nextText: 'Next',
animation: "<?php echo $smof_data['slider_animation']; ?>",
animationLoop: false
// animation: "slide"
});
});
jQuery(document).ready(function() {
fixFlexsliderHeight();
});
jQuery(window).load(function() {
fixFlexsliderHeight();
}); // BUG: this ends up computing the slide height to the image height, not to the resized height, on page reload
jQuery(window).resize(function() {
fixFlexsliderHeight();
});
function fixFlexsliderHeight() {
// Set fixed height based on the tallest slide
jQuery('.flexslider').each(function(){
var sliderHeight = 0;
jQuery(this).find('.slides > li').each(function(){
slideHeight = jQuery(this).height();
if (sliderHeight < slideHeight) {
sliderHeight = slideHeight;
}
});
// jQuery(this).find('ul.slides').css({'height' : sliderHeight});
// console.log("Fixing slider height to " + sliderHeight);
});
}
// jQuery(document).ready(function($){
// $('.flexslider').flexslider();
// });
</script>
<?php
**// return $smof_data;**
}
}
}
add_action('init', 'mytheme_flexslider');
All are working now. Maybe one little question: Do I need to return $smof_data (the second bold-ed part)? It works both ways.. I need to learn more about varible scopes..
I am trying to figure out how to update my option select menu when the button is clicked.
I can make this work by using $(#id).click(function(){}); but I also have another function that needs to be called when a option is selected from the menu. The code listed below will not work because it clears my select menu out. I believe this is because the click event is called twice, once on the 1st click and 2nd after the change occurs.
What can I do in order to load the select menu in a way I can use both events. Perhaps I am not going about this the proper way, I am still really new to ajax and jquery.
Example of my code:
MyMarkup:
<div class="siteId"> Select Site:<select id="site" name="site"
style="width: 60px"></select></div>
JavaScript:
getSiteId: function(){ // fill the option select menu
$.ajax({
type: "POST",
url: "?do=getsiteid",
dataType: "json",
async: true,
success: function(jsonObj) {
var listItems= "";
listItems+= "<option value='empty'></option>"; // fill first entry with a blank value
for (var i in jsonObj){
listItems+= '<option value=' + jsonObj[i].siteId + '>' + jsonObj[i].siteId + '</option>';
}
$("#site").html(listItems);
}
});
},
My events:
$(document).ready(function() {
$('.siteId').click(function(){
Freight.getSiteId();
});
$('#site').change(function(){//event to load table based on user selection from menu
var siteId = $("#site").attr('value');
nEditing = null;
if(siteId != "empty"){
$("#message").hide(); // hide message
$("#new").show(); // show button
$('#wrapper').empty(); //
$('#wrapper').replaceWith(Freight.tbl);
Freight.displayData(siteId);
oTable = $('#grid').dataTable( {
"aoColumns": [
/* Dest */ null,
/* Port Id */ {"bSearchable": false,
"bVisible": false},
/* woodType */ {"bSearchable": false,
"bVisible": false},
/* Cont Rate */ null,
/* Edit */ null
]} );
}
else{
$("#wrapper").empty();
$("#message").show(); // hide message
$("#new").hide(); // show button
}
}); // end
});
Because the .click handler is on your .siteId div it is getting called when you click anything inside your div including the SELECT menu. So the .change event for your SELECT is also firing the .click event for the div. I would put a span around the "Select Site" text and put your click event on the span.