i am trying to passing a variable (region) from an onclick element to an ajax-function.
I am using PHP, SQL and the plugin http://t4t5.github.io/sweetalert/
Here is my Code in the head of an index.php
<script type"text/javascript">
function save(){
$.ajax({
type: "POST",
url: "addlandtovisited.php",
data: {region: region},
success: function(data) {
alert("Ajax save executed!");
}
});
}
</script>
<script>
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
values: sample_data,
normalizeFunction: 'polynomial',
onRegionClick: function (element, code, region) {
var boton = "button";
swal({
title: ''+region,
showCancelButton: true,
showConfirmButton: false,
text: 'test',
html: true
});
}
});
});
</script>
The addlandtovisited.php:
<?php
if(isset($_POST['region'])){
?>
When i set a string to the ajax-function and delete the region from save(region), it works fine:
data: {region: "TEST"},
text: 'test',
As this thread suggests, there are some issues with the sweetalert repo. For example, I could not make the swal render html text in the body. Switching to sweetalert2 and applying the patch the thread mentions might be a good idea.
I would suggest you use the confirm button instead of creating your own link inside the body of the swal. For example:
swal({
title: '' + region,
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: "save",
text: "anything",
html: true
}, function() { // save button callback
save(region);
});
Don't forget to add the region parameter to your save() method : save(region).
Related
I want to show a success notification if the submit was successful with this js notify library but it's doesn't works.
If I change the new Notify({ ... }) function to a simple alert("success"); then the alert is showing up...
But if I insert the same js code in the browser's Console then it's showing the notify ...
<form action="" method="post">
<div class="form-group">
<label for="title"><h6>Title</h6></label>
<input type="text" class="form-control" name="title" id="title">
</div>
<div class="form-group">
<label for="content"><h6>Content</h6></label>
<textarea class="form-control" id="content" name="content"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" id="edit">Save</button>
</div>
</form>
<script>
$("#edit").click(function() {
var title = $("#title").val();
var content = $("#content").val();
$.ajax({
type: "POST",
url: "edit.php",
data: {
title: title,
content: content
},
cache: false,
success: function(data) {
new Notify({
status: 'success',
title: 'Test',
text: 'Success',
effect: 'fade',
speed: 300,
customClass: null,
customIcon: null,
showIcon: true,
showCloseButton: true,
autoclose: false,
autotimeout: 3000,
gap: 20,
distance: 20,
type: 1,
position: 'right top'
})
},
error: function(xhr, status, error) {
console.error(xhr);
}
});
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify#0.5.5/dist/simple-notify.min.css" />
<script src="https://cdn.jsdelivr.net/npm/simple-notify#0.5.5/dist/simple-notify.min.js"></script>
This statement in your comment under the question clarifies the issue:
I want to send the form's data then the page is just reloading immadiatelly and the notify doesn't showing up
The issue is because you've not called preventDefault() on the event which is raised. Therefore the form is still submit through the standard manner and a page redirect occurs. As you're using AJAX you need to prevent this behaviour.
Also note that it's slightly more semantic to hook the event handler to the submit event of the form element instead of the click of the submit button. Try this:
$("form").on('submit', e => {
e.preventDefault(); // stop form submission
$.ajax({
type: "POST",
url: "edit.php",
data: {
title: $("#title").val(),
content: $("#content").val()
},
cache: false,
success: function(data) {
new Notify({
status: 'success',
title: 'Test',
text: 'Success',
effect: 'fade',
speed: 300,
customClass: null,
customIcon: null,
showIcon: true,
showCloseButton: true,
autoclose: false,
autotimeout: 3000,
gap: 20,
distance: 20,
type: 1,
position: 'right top'
})
},
error: function(xhr, status, error) {
console.error(xhr);
}
});
});
I want this:
Without having to start like this:
But for some reason the data only shows up when I use "hiddengrid: true,"
I tried following this demo and was only able to get the example to work by adding "hiddengrid: true," like so:
<body>
<div class="center" id="overGrid">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'api/codes',
editurl: 'api/codes',
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 75,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
label: 'Id',
name: 'id',
width: 150,
editable: true
},
{
label: 'Title',
name: 'title',
width: 100,
editable: true
},
{
label: 'Code',
name: 'code',
width: 100,
editable: true
},
{
label: 'Original Url',
name: 'originalUrl',
width: 200,
editable: true
}
],
align: 'center',
viewrecords: true,
rowList: [10, 20, 30],
width: 925,
height: 445,
rowNum: 20,
loadonce: true,
hiddengrid: true, // <-------------------- HERE
toppager: '#jqGridPager',
pager: '#jqGridPager',
caption: "Database"
}); jQuery("#jqGrid")
.navGrid('#pager', { edit: false, add: false, del: false, search: false })
.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-add",
onClickButton: function () {
alert("Adding Row");
},
position: "last"
})
.navButtonAdd('#pager', {
caption: "Del",
buttonicon: "ui-icon-del",
onClickButton: function () {
alert("Deleting Row");
},
position: "last"
});
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: 'api/codes',
mtype: 'POST',
datatype: 'JSON',
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
id: item.id,
title: item.title,
code: item.code,
originalUrl: item.originalUrl,
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
fetchGridData();
});
</script>
</body>
Examples such as this don't seem to be working for me on their own so I keep having to reference other sources such as this that are much more complex and informative but possibly the reason for why I continue to have issues every step of the way.
Side Note
I should probably point out that I was only just recently introduced to jqGrid as a result of this question I asked about a week ago: " How can I separate my output using “onclick” and format the data to 20 per page?
"
I did a fairly decent job of documenting the steps that brought me to this point so it might be worth checking out for an in depth look as to what I am dealing with.
In short I am building an API in Asp.Net Core that sends and receives JSON data to my MongoDb database and then outputs the data to a single HTML page using jqGrid. So far I have created functioning Get, Post, Put, and Delete methods that return and send JSON data to my MongoDb database.
Update:
I have gone through the docs suggested by Tony Tomov and I understand their meaning. I just haven't the slightest clue to the solution to this problem. Everything I have thought to be a possible solution and tried from before and after I posted this question has given me a blank page without any errors.
So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button
Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.
I am currently struggling to get a FancyBox popup to work with a few embedded tinyMCE text areas. I have looked all over the internet, including pretty much every post on here and remain unsuccessful.
The FancyBox will load correctly and display the multiple tinyMCE text areas (the button toolbars all display correctly). The problem is that it will not actually display any text in the textboxes, and the actual text box is not editable.
My tinyMCE init code is:
tinyMCE.init({
theme : "advanced",
mode : "exact",
elements : "Cause",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,code,separator,radspell",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "none"
});
And my call to FancyBox is:
$('#PopupAdd').fancybox({
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
I have tried nearly every variation of the above code I can think of. If anyone has any new ideas as to how to approach this, it would be greatly appreciated!
Update:
My HTML is:
<lcmp:LittleButton ID="AddStatusButton" Tooltip="Add a new Status." OnClick="addStatusPopup(); return false;" />
Which creates a button that when clicked calls
function addStatusPopup()
{
$('#PopupAdd').trigger('click');
}
I had exactly the same problem. What worked for me was to run the tinyMce.init after the FancyBox opened.
I don't see how your loading the embedded text areas (inline, ajax, iframe?) but try adding a "type"
$('#PopupAdd').fancybox({
titlePosition: 'none',
type: 'iframe' // Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
Not seeing a fiddle or example makes it difficult but one could do a manual call like this:
$("#PopupAdd").click(function() {
$.fancybox({
href: '#PopupAdd',
type: 'inline',
titlePosition: 'none',
autoscale: false,
showCloseButton: false,
centerOnScroll: false,
onComplete: function () {
tinyMCE.execCommand('mceAddControl',true,'Cause');
},
onCleanup: function () {
tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause');
}
});
});
All the above code looks complicated to me, keep things simple and use this tutorial - WordPress TinyMCE Editor Tips | How to Add Custom Buttons, Styles, Dropdowns & Pop-ups. All the working code examples are there to download and customise as well.
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/
The snippet below will add a "popup" to your tinyMCE editor .
'
(function() {
tinymce.PluginManager.add('gavickpro_tc_button', function( editor, url ) {
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Custom Headline',
onclick: function() {
editor.windowManager.open( {
title: 'Insert h3 tag',
body: [{
type: 'textbox',
name: 'title',
label: 'Your title'
}],
onsubmit: function( e ) {
editor.insertContent( '<h3>' + e.data.title + '</h3>');
}
});
}
}'
I actual got a problem with my jqGrid and I couldn't find any similar problem on the net. Maybe I don't took the write tags for it, sorry tho.
Okay lets start talking about the real problem. I'm using inline editing, and I customized the buttons a bit. I wanna use "ENTER" and "ESC"-Keys as shortcuts. This works fine. I'm manipulating the data in my grid local and only if the user is pressing a specialised button I'll save the data in a file. This files are used to fill the grid too. So if the user now is editing any row in the grid which isn't in my file yet, and he is canceling the editing by pressing ESC, the complete row of data is getting deleted.
Anyone who can help me out? My grid:
// Table
jQuery("#tbl").tableDnD({scrollAmount:0});
jQuery("#tbl").jqGrid({
url:'../path/to/my/script.pl',
datatype: "json",
postData:{'art':'empfang'},
jsonReader: {
repeatitems: false
},
colNames:['1','2','3','4','5'],
colModel:
[
{name:'1',index:'1', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'2',index:'2', width:200, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:b}},
{name:'3',index:'3', width:200, align:"left", sortable:true,editable:true, edittype:"text"},
{name:'4',index:'4', width:220, align:"left", sortable:true,editable:true, edittype:"select",editoptions:{value:""}},
{name:'5',index:'5', width:200, align:"left",sortable:true,editable:true, edittype:"select",editoptions:{value:""}}
],
rowNum:2000,
rowTotal: 2000,
loadtext: 'Reading data...',
height: '100%',
width: '100%',
hidegrid: false,
sortable: true,
toppager: true,
gridview: true,
viewrecords: true,
rownumbers: true,
loadonce: true,
editurl: 'dummy.php',
pager: '#tbl_toppager',
loadComplete: function(data){
$("#tbl").setColProp('4', { editoptions: { value: data.userdata.4} });
$("#tbl").setColProp('5', { editoptions: { value: data.userdata.directory_listing} });
},
gridComplete: function() {
$("#_empty","#tbl").addClass("nodrag nodrop");
jQuery("#tbl").tableDnDUpdate();
},
caption: "Testgrid",
ondblClickRow: function(id){
jQuery('#tbl').editRow(id, true);
}
});
jQuery("#tbl").jqGrid('filterToolbar');
jQuery("#tbl").jqGrid(
'navGrid',
'#tbl_toppager',
{
del: true,
add: false,
edit: false,
refresh: false,
search: true
},
{
}, // edit options
{
}, // add options
{
reloadAfterSubmit: false,
jqModal: true,
closeOnEscape: true
}, // del options
{
jqModal: true,
closeOnEscape: true
} // search options
);
jQuery("#tbl").jqGrid(
'inlineNav',
'#tbl_toppager',
{
editParams: { keys: true },
addParams: { addRowParams: { keys: true } }
}
); // Inline Editing
jQuery("#tbl_toppager_right").hide();
jQuery("#tbl_toppager_center").hide();
jQuery("#tbl").navSeparatorAdd(
"#tbl_toppager_left",
{
sepclass : "ui-separator",
sepcontent:""
}
).jqGrid(
'navButtonAdd',
'#tbl_toppager_left',
{
caption: "",
buttonicon: "ui-icon-document",
title: "Save data in file",
position: "last",
onClickButton: function () {
$("#write_file").dialog('open');
}
}
);
Thanks in advice. Regards.
In the official demo of JQGrid they provide an example which do nearly the same of what you request
...
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#rowed3').jqGrid('restoreRow',lastsel);
jQuery('#rowed3').jqGrid('editRow',id,true);
lastsel=id;
}
}
...
where lastsel is a global variable
So you can use jQuery('#rowed3').jqGrid('restoreRow',idOfLineToRestore);
in your escape event