I have added a tinymce button to my tinymce editor.but instead of opening the tinymce default modal (editor.addCommand),I want to open Thickbox with ajax content.I have searched many answers on stackoverflow, but didn't make it out.
Here is my code
(function() {
tinymce.PluginManager.add('smart_event', function( editor, url ) {
var shortcode_tag = 'smart_event';
editor.addCommand('smart_event_panel_popup', function( ui, v ){
var columns = '4';
if(v.columns){
columns = v.columns;
}
var style = '';
if(v.style){
style = v.style;
}
editor.windowManager.open({
title: 'Smart Event Shortcode',
body: [
//...........
],
onsubmit: function(e){
// var scode = '[' + shortcode_tag +' columns="' + e.data.columns + '"' + ' style="' + e.data.style + '"' + ' posts_per_page"'+ e.data.posts_per_page +'"' + ' sortby="'+ e.data.sortby +'"' + ' range="'+ e.data.range +'"' + ' pagination="'+e.data.pagination + '"' +' filters="'+e.data.filters + '"' +']';
editor.insertContent( scode );
}
});
});
editor.addButton('smart_event', {
image: seventadmindata.imagesurl + 'icon.png',
tooltip: 'Insert Smart Event Shortcode',
onclick: function(){
editor.execCommand('smart_event_panel_popup','',{
columns : '4',
style : '1',
});
}
});
});
})();
How can I add Thickbox on click with an ajax callback?
Related
I need to change the above link from
Voucher to special action..
The new link is getting from 'Slink ' in the DB
So how can I change it so the page will be the link provided in 'Slink' and not the default link
$.ajax({
url: '/Newsletter/GetUserOrder?id=' + id,
type: "POST",
dataType: 'json',
data: id,
success: function (response)
{
if (response === "")
{
location.href = '/Newsletter/CardDetails'+ id;
}
else
{
var Bname='';
var itemsQuantity;
var name = '';
var Link="פירוט הטבה"
$.each(response, function (indexInArray, valueOfElement)
{
Bname += '<div class="card col-md-5">' + '<b>' + valueOfElement.shortNameVar + '</b>' + '<br/> ' + valueOfElement.BusnessName + '</div>' + '<br/>' + '<div class="chip">' + "כמות" + valueOfElement.MemberOrderQuntity + '</div>' +
'<b>' + '<div class="flx-aut text-center">' + '' + Link + '' + '<div>';
});
I want to use select2 in my Symfony project but still do not know how to display results. My code for frontend is
$(".js_search").select2({
ajax: {
url: "{{ path('search') }}",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
console.log(data.items);
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
});
function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
'</div>' +
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
if (repo.description) {
markup += '<div>' + repo.description + '</div>';
}
markup += '</div></div>';
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
g
and for the backend
public function searchAction()
{
$response = new Response();
$response->setContent(json_encode(
[
'items' =>
[
'id' => 1,
'text' => 'test'
]
]
));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
I dont know how should $response looks like or how to show returned data in view.
Somebody know the answer ?
I am using this https://select2.github.io/
Your response should be a JSON array with the elements Select2 uses to create the option tags for the dropdown.
In your case the content in the reposnse to your AJAX request would be:
[{"id": 1, "text":"test"}]
Select2 will then update the element identifed by the JQuery Selector $(.js-search) with the options and values in your response.
I have started using VS2012 (Yes about time). I have a MVC 4 app.
Im making a JSON call to get data from DB to render in html.
But Im getting a 500 Internal Server error I can see in Fiddler.
Im not sure how to debug this because I cant find where to
see the C# exception if that is what the issue is.
So Im calling getRecipe in javascript.
public JsonResult GetRecipe(int rid)
{
var recipe = _rep.GetRecipe(rid);
return Json(recipe, JsonRequestBehavior.AllowGet);
}
My script is
var dataService = new function () {
var serviceBase = '/Recipes/'
getRecipesList = function (callback) {
$.getJSON(serviceBase + 'GetRecipesList', {}, function (data) {
callback(data);
});
};
getRecipe = function (rid, callback) {
$.getJSON(serviceBase + 'GetRecipe', {rid:rid}, function (data) {
callback(data);
});
};
return {
getRecipesList: getRecipesList,
getRecipe: getRecipe
};
} ();
var renderer = new function () {
renderList = function () {
dataService.getRecipesList(renderListDiv);
},
renderListDiv = function (recipes) {
var listDiv = $('#listdiv');
listDiv.html("");
$(recipes).each(function (index) {
var table = '<table>';
table += ('<tr><td><a class="recipeLink" href="#recipeList-' + this.RecipeID + '">' + this.RecipeTitle + '</a></td></tr>');
table += '</table>';
listDiv.append(table);
});
},
selectedRecipe = function (anchor) {
var href = $(this).attr("href");
var rid = href.split("-")[1];
dataService.getRecipe(rid, renderRecipe);
};
renderRecipe = function (recipe) {
var recipeDiv = $('#recipediv');
var html = '<h1>' + recipe.RecipeTitle + ' (' + recipe.RecipeID + ')</h1>';
html += '<h4>Preparation Time: ' + getTimeString(recipe.PrepTime) + '</h4>';
html += '<h4>Cooking Time: ' + getTimeString(recipe.CookTime) + '</h4>';
var count = recipe.Ings.length;
var colmax = Math.ceil(count / 2);
var colleft = 0;
var colright = colmax;
html += '</br><table id="ingredientstable">';
for (colleft = 0; colleft < colmax; colleft++) {
html += '<tr>';
html += '<td>' + recipe.Ingredients[colleft].Units + ' ' + recipe.Ingredients[colleft].Measure + ' ' + recipe.Ingredients[colleft].IngredientName + '</td>';
if(colright < count)
html += '<td>' + recipe.Ingredients[colright].Units + ' ' + recipe.Ingredients[colright].Measure + ' ' + recipe.Ingredients[colright].IngredientName + '</td>';
colright += 1;
html += '</tr>';
}
html += '</table>';
html += '<h4>Method</h4>';
html += '<p>' + recipe.Method + '</p>';
recipeDiv.html(html);
numingredients = 0;
editorForm.loadEditor(recipe);
};
clearRecipe = function () {
$('#recipediv').html("");
};
getTimeString = function (time) {
if (time < 60)
return time + ' min';
return time / 60 + ' hours'
};
changeFont = function () {
$('body').css("font-family", "Comic Sans MS");
};
return {
renderList: renderList,
selectedRecipe: selectedRecipe,
changeFont: changeFont,
clearRecipe: clearRecipe,
};
}();
The browser's developer tools might be a good place to get some additional information. In Chrome you can press F12 to bring up the dev tools window. Click on the network tab and then fire off your ajax call. You will see the failed request highlighted in red. If you click on it you will see the error that has been returned from mvc.
I have provided a screenshot in this question: Ajax call with a 'failed to load resource : the server responded with a status of 500'
I am uploading some images using plupload and adding those images to div container.And after performing some options I need to upload the edited Images again to the same div from codebehind.
Is that possible to do so?If so how can I modify my code:
This is how I'm trying to upload Images and adding them to div(thumbs):
<script type="text/javascript">
$(function () {
$("#<%=uploader.ClientId%>").plupload({
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Editor.aspx',
max_file_size: '10mb',
max_file_count: 21,
chunk_size: '1mb',
unique_names: true,
rename: true,
dragdrop:true,
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
flash_swf_url: 'js/plupload.flash.swf',
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
$('form').submit(function (e) {
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
if (uploader.files.length > 0) {
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
//alert('You must at least upload one file.');
return false;
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FilesAdded', function (up, files) {
var i = up.files.length,
maxCountError = false;
plupload.each(files, function (file) {
setTimeout(function () {
up.start();
}, 100);
if (uploader.settings.max_file_count && i >= uploader.settings.max_file_count) {
$.msgBox({
title: "Info",
content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",
type: "info",
showButtons: true,
opacity: 0.1,
autoClose: false
});
uploader.removeFile(up.files[i - 1]);
} else {
}
});
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "><a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' rel='group1'><img class='clickImage' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
showStickySuccessToast();
}
});
});
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
</script>
After editing operation which I am doing it in my codebehind I have saved all those Images to one folder where users can save them.So Now What I want to do Is add all those existed Images on my server folder to be displayed it in the same div(thumbs)where I am adding Images using the uploader at the beginning.
To access a control in code behind, the control must have runat="server". However, it is simpler to use a Panel control instead of a div. A Panel control renders as a div so any client JavaScript will continue to work.
Image NewImage = new Image();
NewImage.ImageUrl= MapPath(#"~\Images\april.jpg");
Panel1.Controls.Add(NewImage);
I would like to know that On Page refresh I would like to display more than 40+ images which are already existed in my server folder to be displayed in a div control which already exists and add those images to that div
As of now I can display one image using as shown below:
Preview.ImageUrl = "~/DownloadImages/" & Session("tempDir").ToString & "/" & filename
I would like to know the better solutions!
Here is how the images are generated:
<script type="text/javascript">
$(function () {
$("#<%=uploader.ClientId%>").plupload({
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Default.aspx',
max_file_size: '10mb',
max_file_count: 21,
chunk_size: '1mb',
unique_names: true,
rename: true,
dragdrop: true,
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
flash_swf_url: 'js/plupload.flash.swf',
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
$('form').submit(function (e) {
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
if (uploader.files.length > 0) {
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
//alert('You must at least upload one file.');
return false;
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FilesAdded', function (up, files) {
var i = up.files.length,
maxCountError = false;
plupload.each(files, function (file) {
setTimeout(function () {
up.start();
}, 100);
if (uploader.settings.max_file_count && i >= uploader.settings.max_file_count) {
$.msgBox({
title: "Info",
content: "Max Files Reached.",
type: "info",
showButtons: true,
opacity: 0.1,
autoClose: false
});
uploader.removeFile(up.files[i - 1]);
} else {
}
});
});
var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#<%=thumbs.ClientId%>').append("<div id=" + file.id + "><a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' rel='group1'><img class='clickImage' src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='75' height='50' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
showStickySuccessToast();
}
});
});
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (!length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
</script>
If I know how many Images users can add then it's easy but It's hard to say thats the main issue.
You can use Literal or Image Controls and add them on a Panel (or even a div if you add runat="server" to it on the aspx file)
<div id="existingDiv" runat="server"></div>
I prefer Image controls... something like this: (this is a very simple example of course)
foreach(string imageURL in urlsList)
{
var img = new System.Web.UI.WebControls.Image();
img.ImageUrl=imageURL;
img.Width = 200;
img.Height = 100;
this.div1.Controls.Add(img);
}
EDIT:
Inside urlsList i load the urls like so: (VB)
Dim urls As New List(Of String) 'I dont know if you need another parenthesis here on VB...
urls.Add("imageurl1")
urls.Add("imageurl2")