I have a function to save the new position of a draggable div created dynamically.
<script type="text/javascript">
$(document).ready(function() {
$(".comdiv").draggable(
{
drag: function(event, ui) {
$(".comdiv").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
alert ('Finished dragging!');
$(".comdiv").css("opacity", "1.0"); // Full opacity when stopped
},
});
});
</script>
This works for a static div defined in the body of the HTML page. I get the alert box. But I also create divs in a php script called through ajax. The alert box doesn't come up for these. The event handler is defined for the entire class. Is there a different way of calling that function for the divs created in this script? The alert box doesn't come up for them.
<?php
function get_nodes() {
// load SimpleXML
$nodes = new SimpleXMLElement('communities.xml', null, true);
foreach($nodes as $node) // loop through
{
echo "<div id = '".$node['ID']."' class= 'comdiv ui-widget-content' style = 'top: ".$node->TOP."px; left: ".$node->LEFT."px;
width: ".$node->WIDTH."px; height: ".$node->HEIGHT."px;'> \n";
echo " <p class = 'comhdr editableText ui-widget-header'>".$node->NAME."</p>\n";
echo " Delete \n";
echo " Add URL \n";
foreach($node->URLS->URL as $url)
{
echo " <div id='".$url['ID']."' class='comurl'><a href='".$url->URLC."' target='_blank'>".$url->NAME."</a><img
align='right' src='redx.png' onClick='delete_url(\'".$url['ID']."\');'/></div>";
/* echo "<script type='text/javascript'> alert('Node: ".$node['ID']." has URLS:".$url['ID']." ".$url->NAME." ".$url->URLC."
'); </script>"; */
}
echo "</div> \n";
echo "<script type='text/javascript'>\n";
echo " $('#".$node['ID']."').resizable();\n";
echo " $('#".$node['ID']."').draggable();\n";
echo " $('#".$node['ID']."').draggable('option', 'handle', '.comhdr');\n";
echo "</script>\n";
}
echo "<script type='text/javascript'>\n";
echo " $('.editableText').editableText();\n";
echo "</script>\n";
return;
}
echo get_nodes();
?>
Here is the HTML.
<body>
<div style="top:450px; width:120px; height:120px; left:800px; background:red;"></div>
<!-- THE ALERT BOX COMES UP IF I DRAG THIS DIV -->
<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px; height:250px; border:1px solid grey;">
<p id="heading" class="comhdr editableText ui-widget-header">Editable</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
//define php info and make ajax call to recreate divs from XML data
$.ajax({
url: "get_nodes.php",
type: "POST",
data: { },
cache: false,
success: function (response) {
if (response != '')
{
$(document.body).append(response);
}
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".comdiv").draggable(
{
drag: function(event, ui) {
$(".comdiv").css("opacity", "0.6"); // Semi-transparent when dragging
},
stop: function(event, ui) {
alert ('Finished dragging!');
$(".comdiv").css("opacity", "1.0"); // Full opacity when stopped
},
});
});
</script>
</body>
</html>
The permissions needed to be set on the folder containing the XML along with the xml itself. Did that for owner, system, iis user, and user.
Related
I have jquery UI code for confirm popup.
if (confirm('Are you sure you want to delete the batchjob:' +
dataItem["Name"])) {
$.get("#Url.Content("~/BatchJob/DeleteBatchJob")", { batchJobDetailId: parseInt(dataItem["BatchJobDetailId"]) }, function (data) {
if (data) {
debugger
var batchJobValidateWnd = $("#ValidateBatchJobStatus").data("kendoWindow");
batchJobValidateWnd.content("BatchJob deleted successfully.");
batchJobValidateWnd.center().open();
$.post("#Url.Content("~/BatchJob/SearchBatchJobDetailByParams")", { jobName: $("#Name").val(), startDate: $("#ScheduleStartDate").val() }, function (data) {
});
}
else {
debugger
window.location = '#Url.Content("~/BatchJob/Create")/' + parseInt(dataItem["BatchJobDetailId"]);
}
});
}
And I need Kendo Confirmation popup?How i change jquery confirm popup to kendo confirm popup
You can create a Kendo Confirmation Dialog via a promise, and if confirmed execute the same way as you would with a jQuery dialog.
The dialog itself should be created using an External Template which is rendered on buttonDisplayDialog click event which will wait for a response before continuing.
<script id="confirmationTemplate" type="text/x-kendo-template">
<div class="popupMessage"></div>
</br>
<hr/>
<div class="dialog_buttons">
<input type="button" class="confirm_yes k-button" value="Yes" style="width: 70px" />
<input type="button" class="confirm_no k-button" value="No" style="width: 70px" />
</div>
</script>
Based on whether the user clicks "Yes" or "No" will return result as a true or false value which is where you should put the remainder of your code:
$("#buttonDisplayDialog").kendoButton({
click: function(e) {
$.when(showConfirmationWindow('Are you sure you want to delete the batchjob:')).then(function(confirmed){
if(confirmed){
alert('This is where you will put confirmation code');
}
else{
alert('User clicked no');
}
});
}
});
});
function showConfirmationWindow(message) {
return showWindow('#confirmationTemplate', message)
};
function showWindow(template, message) {
var dfd = new jQuery.Deferred();
var result = false;
$("<div id='popupWindow'></div>")
.appendTo("body")
.kendoWindow({
width: "200px",
modal: true,
title: "",
modal: true,
visible: false,
close: function (e) {
this.destroy();
dfd.resolve(result);
}
}).data('kendoWindow').content($(template).html()).center().open();
$('.popupMessage').html(message);
$('#popupWindow .confirm_yes').val('OK');
$('#popupWindow .confirm_no').val('Cancel');
$('#popupWindow .confirm_no').click(function () {
$('#popupWindow').data('kendoWindow').close();
});
$('#popupWindow .confirm_yes').click(function () {
result = true;
$('#popupWindow').data('kendoWindow').close();
});
return dfd.promise();
};
Here is a Dojo example to demonstrate the above code in action.
i have improve my code using highchart. I'm using plotoption to echo variabel just like in http://jsfiddle.net/gF8Cf/3/ .
Here is my highchart code :
plotOptions: {
series:
{
cursor: 'pointer',
point: {
events: {
click: function box() {
var week = this.category;
$("#dialog").dialog({
title: "Detail Data",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
},
And for the next, i set the dialog box by :
<div id="dialog" style="display: none">
<div style="margin-left: 35px; font-size:12px;">
IT IS WEEK :
<?php
box();
echo $week
?>
</div>
</div>
I want to show data this.category when the dialog-pop-up-box opened.
The problem is, did i set the wrong code for $week ?
$(function(){
var week = '<?php $week ?>';
});
Try to load the week variable on window load.
I am trying to use a drag-and-drop function in 'index.php' and post a variable, 'element' to 'store.php', where in the final version it should update a database.
'store.php' is called and runs but the variable is not being passed. I have attached below a shortened version of 'store.php' with a trap to catch this, so in this version I get the response "Element value not set".
INDEX.PHP:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="scripts/jquery-1.3.2.min.js"></script>
<script src="scripts/jquery-ui-1.7.1.custom.min.js"></script>
<link rel="stylesheet" href="style.css">
<div class="content_box" id="content_box_drag" onMouseOver="drag();">
Drag label
<?php for($i=0; $i<5;$i++) {
echo "<p class='dragelement' id='dragelement_$i'>Ferrari_$i</p>";
} ?>
</div>
<div class="content_holder_box" id="content_box_drop">
Drop here
<p class="dropper"></p>
</div>
<div style="clear:both;"></div>
<br/><br/>
<div id="search_result"></div>
<script>
//initialize the drag and drop functions.
function drag(){
$( "#content_box_drag p" ).draggable({
appendTo: "body",
helper: "clone",
revert: "invalid"
});
$( "#content_box_drop p" ).droppable({
activeClass: "dropper_hover",
hoverClass: "dropper_hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var ele = ui.draggable.text();
$.ajax({
url: "store.php",
method: "POST",
data: "element=" + ele,
success: function(result) {
alert(result);
}
});
}
});
}
</script>
STORE.PHP (shortened):
<?php
if(isset($_POST['element'])){
$element=$_POST['element'];
} else {
echo "Element value not set";
exit;
}
?>
Any ideas why the variable is not being set?
Parameter method doesn't exist, change to type: "POST"
Set your data as JSON map, change data: "element=" + ele to data: {element : ele}
http://api.jquery.com/jQuery.ajax/ (Search type description)
$( "#content_box_drop p" ).droppable({
activeClass: "dropper_hover",
hoverClass: "dropper_hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var ele = ui.draggable.text();
$.ajax({
url: "store.php",
type: "POST",
data: {element : ele},
success: function(result) {
alert(result);
}
});
}
});
I am trying to get autocomplete working on any div with the id="train" however, it seems to only be working on the first input field with a class of "train"
javascript code:
<script type="text/javascript">
$(document).ready(function() {
$(".train").each(function() {
$(".train").keyup(function() {
$("#suggest_q").html("");
var train = $(".train").val();
train = $.trim(train);
if(train)
{
$.ajax({
url: "train_ajax_query.php",
data: "train="+train,
success: function(msg) {
$("#suggest_q").html(msg);
$("#suggest_q ul li").mouseover(function() {
$("#suggest_q ul li").removeClass("hover");
$(this).addClass("hover");
})
$("#suggest_q ul li").click(function() {
var value = $(this).html();
$("#train").val(value);
$("#suggest_q ul li").remove();
});
}
});
}
});
});
});
</script>
HTML code:
<form id="train_create_form" name="train" action="submit_train.php" method="POST">
<input type="text" id="train" class="train" size="20" name="train[]" placeholder="Train 1" />
<div id="suggest_q">
</div>
<input type="text" id="train" size="20" class="train" name="train[]" placeholder="Train 2" />
<div id="suggest_q">
</div>
<input id= "submit_train" type="submit" name="submit_train" value="Submit All trains">
</form>
I found this old post but I am not sure how to adopt the fix for my problem :(
add more input fields code:
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 0;
$('#addScnt').live('click', function() {
$('<p><input type="text" id="train" name="train[]" class="train" placeholder="Train ' + i +'" /><div id="suggest_q"></div>Remove train</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
Beause here:
$(".train").each(function() {
$(".train").keyup(function() {
you get every time only first field :) try:
$(".train").each(function(index, element) {
element.keyup(function() {
// or even: $(element).keyup(function() {
References:
Each
KeyUp
Val
I copypaste whole example:
<script type="text/javascript">
$(document).ready(function() {
$(".train").each(function(index, element) {
$(element).keyup(function() {
$("#suggest_q").html("");
var train = $(element).val();
train = $.trim(train);
if(train)
{
$.ajax({
url: "train_ajax_query.php",
data: "train="+train,
success: function(msg) {
$("#suggest_q").html(msg);
$("#suggest_q ul li").mouseover(function() {
$("#suggest_q ul li").removeClass("hover");
$(this).addClass("hover");
})
$("#suggest_q ul li").click(function() {
var value = $(this).html();
$(element).val(value);
$("#suggest_q ul li").remove();
});
}
});
}
});
});
});
Each time you type $(".train"), you're searching again for all the elements.
Once you've done your initial $(".train").each(function() { line, you can just use $(this) to refer to the element, and that function will get called on each element.
When you use var train = $(".train").val(); you are getting just the value of the first element. See http://api.jquery.com/val/ for more details on why.
If you remove that line and just use $(this) instead of '''train''' this should work better, but you will also want to get rid of the .each() around the .keyup(), since $(".train").keyup will already apply to all matching elements.
You're basically saying "go through and find all train elements. For each one, go through and set the keyup value on all train elements. Set it to a function which enforces autocomplete on the first train element". You want to be saying "Set the keyup callback on each train elements to enforce autocomplete on itself"
I am loading a partial view in a popup using the following code
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Mypopup",
modal: true,
autoOpen: false,
height: 300,
width: 700,
open: function () {
//display correct dialog content
$("#Mydiv").load("MyAction");
}
};
$("#Mydiv").dialog(dialogOpts); //end dialog
$("#MyButton").click(
function () {
$("#Mydiv").dialog("open");
return false;
}
);
});
the action MyAction loads a partial view say "Myview" successfully, "Myview" contains a close button and on the click of this button I want to close the popup, How can I do this? I tried following code but this does not work.
$('#Close').click(
function () {
$(this).parent("close");
return false;
});
Can you please help?
Here is my html for the partial view.
#Code
Using (Html.BeginForm())
#<div id="master">
<img alt ="" src ="../../Images/Question.gif" height ="50" width ="50" />#Html.DisplayFor(Function(model) model.ConfirmationMessage) #Html.HiddenFor(Function(model) model.Key )<br /><br />
<div><input id="Yes" type="submit" class ="btn" name="button" value="Yes" /><input id="No" type="submit" class ="btn" name="button" value="No" /></div>
</div>
End Using
End Code
<script type="text/javascript">
$("#No").live("click", function(){ $("#MyDiv").dialog("close"); }); </script>
You could try:
$("#MyDiv").dialog("close")
or add the close buttons in the initialization of it
$( "#MyDiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
}
});
I think i see it now. That button is loaded dynamically so
$("#MyButton").live("click", function(){ $("#MyDiv").dialog("close"); });
It will work we need to refer the following jQuery,jquery-ui.js and jquery-ui.css.
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
for more details http://www.infinetsoft.com/Post/How-to-open-and-close-a-popup-in-asp-net-mvc-using-Jquery/99#.V0LlETV97cs