I have the following script pulling in data from a wordpress database. It all works fine when selecting different options (pulls in the correct data etc).
I have now installed tinymce editor onto the textarea. Since this the content no longer shows.
<script>
$(document).ready(function()
{
$('#myselect').change(function()
{
var selected = $(this).find(':selected').html();
var id = $(this).find(':selected').val();
$.post('http://www.xxx/admin/email/ajax.php', {'beverage': selected, 'id':id }, function(data) {
$('#result').html(data);
});
});
});
</script>
Does anyone know what i am missing to make this work?
Any help would be greatly appreciated!
Cheers Dan
Found the solution myself, i needed to change the following:
$('#result').html(data);
to:
tinyMCE.get('result').setContent(data);
Related
I'm using bootstrap3-wysiwyg. Code below works onload of page. This doesn't work when put inside an event, especially not inside $.ajax.
$('.textarea').html('Some text dynamically set.');
What I'm trying to do is something like this.
$.ajax({
...
success: function(data) {
$('.textarea').html(data);
}
});
data displays fine inside the textarea if without the wysiwyg, so I'm sure that's not the issue.
This solved it.
"The key is to make sure that the editor is set up on the show event of the modal not on document ready." ~ ndogaru
$.ajax({
...
success: function(data) {
$('.textarea').html(data);
$('.textarea').wysihtml5();
}
});
https://github.com/jhollingworth/bootstrap-wysihtml5/issues/268
I hope this helps!
i want to display the data from ajax request to tooltip, it's open in modal window right now, but I want to open it into the tooltip, how can I do that, I tried a lot but didn't get success, I stucked at here, please help me to show data through tooltip.
this is my view code
echo $this->Manager->link('Groups',array('action'=> 'test_contact_group', $records['Contact']['contact_id']),array('class'=>'ajax_links'));
the html of this link is
<a class="ajax_links" help="a" href="/contacts/test_contact_group/78">Groups</a>
and jquery is there
<script>
$(".ajax_links").hover(function(e) {
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type: "POST",
url: link,
cache: false
}).done(function( html ) {
jQuery('#myModal').modal('show');
jQuery('.modal-body').html("Groups" + html);
});
});
</script>
it is diplay in modal window, but I want to open it in tooltip, how can I do that, please help me. thanks a ton in advance, I really stucked here.
Hope this will help you..
$(".ajax_links").hover(function(e) {
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type: "GET",
url: link,
success : function (data){
$('#elementId').attr('title',data);
}
});
});
If the issue is only with jquery syntax, you can try this:
$(this).attr("title", html);
Instead of modal window. you just have a container for div with id tooltip. like this. then append the results. some thing like this : demo tooltip. and CSS taken from this answer Pure CSS Tooltip
$('#toolTip').show();
Working demo : DEMO for Tooltip
or you can append to title attribute.
$('#elementId').attr('title',data);
I am using Asp.Net MVC3, for a project.
In one of the page, I am using MS Charts. In View I have a Image which shows the chart as follows:
<img src="#Url.Action("RenderCharts", "Home", new
{
XAxisColor = ViewBag.XAxisColor,
YAxisColor = ViewBag.YAxisColor,
})" alt="Charts" runat="server" />
I have 2 CheckBoxes, which is used to change Chart Axes Colors. When the checkbox is clicked, page is submitted and checkbox status is stored and based on that Chart is rendered:
bool XAxisColor = (#ViewBag.XAxisColor) ?? true;
bool YAxisColor = #ViewBag.YAxisColor ?? false;
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor",
onClick = "this.form.submit();" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter",
onClick = "this.form.submit();" })
Y Axis Color
When first time the page is loaded, RenderCharts() Action gets called and Chart is rendered.
But when i Click any of the CheckBox, RenderCharts() Action gets called twice.
I could not understand this issue. I have created a sample Application which can be downloaded from here https://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip
Any help would be appreciated. Thanks in advance.
This appears to be something to do with Internet Explorer. Using your sample application, everything works fine in both Google Chrome and Firefox, but when using IE9, there are two Action requests on a postback.
Using the F12 developer tools on the network tab, it shows an initial request to RenderCharts which appeared to be aborted:
The (aborted) line in the middle is, I suspect, the additional request you're seeing. Why this happens, I don't know!
Finally got the answer. The problem was
runat="server"
in the Img tag.
Removing runat fixed the issue.
I can eliminate the IE issue in the following manner by simply using a bit of JQuery instead. A few possible advantages...
It eliminates the cross-browser issue.
It is an unobtrusive approach (not mixing javascript and HTML in the view).
You can update the image via ajax.
Create a new file in the scripts folder (e.g. "chart.js") which will simply attach an anonymous function to the the click events of your checkboxes from the document ready function. You would obviously need to include the script reference in your page as well:
$(document).ready(function () {
// Attach a function to the click event of both checkboxes
$("#chkXAxisColor,#chkScatter").click(function () {
// Make an ajax request and send the current checkbox values.
$.ajax({
url: "/Home/RenderCharts",
type: "GET",
cache: false,
data: {
XAxisColor: $("#chkXAxisColor").attr("checked"),
YAxisColor: $("#chkScatter").attr("checked")
},
success: function (result) {
alert(result);
$("#chart").attr("src", result);
}
});
});
});
Best of all, you get to eliminate the javascript from your view :)
...
<div style="margin: 2px 0 2px 0">
#Html.CheckBox("chkXAxisColor", XAxisColor, new { #Id = "chkXAxisColor" })
X Axis Color
#Html.CheckBox("chkYAxisColor", YAxisColor, new { #Id = "chkScatter" })
Y Axis Color
</div>
...
This is of course a very basic example which does eliminate the IE issue but you could get fancier from there in terms of how you update the image + show a loading gif, etc with only a few more lines.
Hopefully it is a workable solution for you!
I have no idea why this doesn't work, but none of my custom button actions (tasks) do anything in my component. In my view.html.php file I have:
JToolBarHelper::custom('reports.export_csv', 'csv', '', 'CSV', false);
JToolBarHelper::custom('reports.export_mailchimp', 'mailchimp', '', 'Mailchimp', false);
Then in my ReportsControllerReports file I have 2 methods (not just 2, there are some others but they aren't relevant), export_csv() and export_mailchimp(). Whenever I click the buttons I get a JS error which I assume is preventing the action from executing the code in those methods. Something about "b is undefined". I cannot find any differences between my code and that used in other Joomla (core) components, so if anyone could shed some light on this issue it would be greatly appreciated (as usual, the Joomla forums are totally useless).
#Cfyzz solution works.
I added this to view file:
<script type="text/javascript">
Joomla.submitbutton = function(pressbutton) {
switch(pressbutton) {
case 'google':
window.location = '<?=JRoute::_( 'http://google.com', false );?>';
break;
case 'stackoverflow':
window.location = '<?=JRoute::_( 'http://stackoverflow.com', false );?>';
break;
}
}
</script>
and this in view.html.php
JToolBarHelper::cancel('stackoverflow', 'Go Overflow');
JToolBarHelper::custom('google', 'checkin', '', 'Go Google', false);
Obviously you dont have to use "JRoute::_(" in this situation. I replaced inner links with 2 samples so it`s easier to understand.
You should override the Joomla's JS framework behavour
You should use the function in your custom JS file:
Joomla.submitbutton = function(pressbutton) {
switch(pressbutton) {
case 'export_cvs':
URL = JURI::base.'index.php?option=yourController&task=export_cvs&....
$.ajax({
url: URL,
type: post, etc
});
}
}
In my component everytrhing is ok and working properly
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});