hi i am using tinymce and trying to load dynamic text to active editor by ajax but i have problem
here is my code
$.ajax({
type: "post",
cache:false,
url: "/sistem/plugins/etiketlink/form/index.php",
data: data,
success: function(data) {
alert(data);
// tinymce.editors[0].setContent(data);
tinyMCE.activeEditor.setContent(data);
},
error: function() {
alert("error!");
}
when i alert data my link are like <a href="/didim.html" alt="didim" />
but when tinyMCE.activeEditor.setContent(data); works links are becoming like
<a href="../didim.html" so how can i delete this (..)
Try using
tinymce.init({
...
convert_urls: false
});
Hope this helps!!
Related
Please let me know the equivalent of below prototype code in Jquery.
var myAjax = new Ajax.Updater('abc', '/billing/add_bill_detail', {
method: 'get',
parameters: pars,
insertion: Insertion.Bottom
});
I want to perform the same action using Jquery.
Thanks in Advance.
In jQuery the Ajax will use as following:
$.ajax({
url: "/billing/add_bill_detail",
type: "get",
dataType: "html",
data: {"pars" : "abc"},
success: function(returnData){
$("#abc").html(returnData);
},
error: function(e){
alert(e);
}
});
Use #abc if abc is the id of the div or use .abc if abc is a class.
You can place the returnData iin your HTML where you want,
There are some ways using ajax like jQuery.ajax({...}) or $.ajax({...}) other than this there are some simplified versions of these too like:
$.get() or jQuery.get()
$.post() or jQuery.post()
$.getJSON() or jQuery.getJSON()
$.getScript() or jQuery.getScript()
$ = jQuery both are same.
As you are using method : 'get', so i recommend you to use $.ajax({...}) or $.get() but remember to include jQuery above this script otherwise ajax function wont work Try to enclose the script in the $(function(){}) doc ready handler.
'abc' if you could explain it
Try adding this with $.ajax():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "/billing/add_bill_detail",
data: pars,
dataType: 'html'
success: function(data){
$('#abc').html(data); //<---this replaces content.
},
error: function(err){
console.log(err);
}
});
});
</script>
or with $.get():
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.get("/billing/add_bill_detail", {data: pars}, function(data) {
$('#abc').html(data); //<---this replaces content.
}, "html");
});
</script>
or more simply use the .load() method:
$('#abc').load('/billing/add_bill_detail');
You can use .load() method
Load data from the server and place the returned HTML into the matched
element.
Read docs: http://api.jquery.com/load/
$(function(){
$.ajax({
type: "GET",
url: "abc/billing/add_bill_detail",
data: data,
success: function(data){
alert(data);
}
});
});
This has been asked many many times. But none of the solutions are working for me in IE and Chrome.
I basically want to show a loading image while ajax call is being made.
Following is what I'm trying.
function ws(){
showL();
var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
function showL()
{
$('#loading').show();
}
function hideL()
{
$('#loading').hide();
}
Following is the HTML
<table cellspacing="1" cellpadding="1" border="1">
<tr><td>
<input type="button" value="ckick" id="btn" onClick="ws();">
<input type="button" value="clear" onClick="$('#dv,#complete').html('');">
</td><td>
<div id="dv"></div>
</td></tr><tr>
<td>Here<div id="loading" style="display:none" >Loading.................</div></td>
<td>final<div id="complete"></div></td></tr>
</table>
After above js, I tried
ajaxStart and ajaxStop
$.ajaxSetup
$.ajax({...}).done(hideL)
All the js codes I tried are working in Firefox but none of them are working in IE and Chrome.
In Firefox, the code works as expected. Loading div gets shown, ajax is called, loading div gets hidden. This is exactly what I'm expecting.
In IE & Chrome, loading div doesn't show up. Maybe It's getting shown and hidden very fast after or before ajax call.
Please let me know what can be done to make the code work in IE & Chrome.
There has to be some workaround as I've seen other sites show loading div. Or maybe I'm doing something stupid.
Once the code is working in all browsers. I want to make a generic function (like a jQuery plugin) to show a loading div when ajax is being called.
try this:
This will ensure that ur DIV is hidden after the ajax call completes
function ws() {
showL();
var res ="";
$.ajax({
url: 'webservice.asp?service=LoadingTestSRV',
async: true,
cache: false,
success: function(data) {
res=data;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
});
}
function showL() {
$('#loading').show();
}
function hideL() {
$('#loading').hide();
}
This form has worked for me previously: (I put in the slow so you could see it if it is fast)
$('#loading').ajaxStart(function() {
$(this).show("slow");
}).ajaxComplete(function() {
$(this).hide("slow");
});
Test example of this here:
http://jsfiddle.net/MarkSchultheiss/xgFkw/
I do it this way try if it helps..
$.ajax({
beforeSend: function () {
$('#loadingDiv').show();
$('#accordion').hide()
},
complete: function () {
$('#loadingDiv').hide();
$('#accordion').show();
},
type: "GET",
url:
data: shallowEncodedData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (
There is a problem in your ajax call. Remove the async:false from ajax call and it will work even in IE8/9 and Chrome. For other Lost-souls, please do the above changes and try again.
simple just Add async=true in ajax function. It will work in chrome
My workaround for this issue in Chrome, use a timeout on the AJAX call of one millisecond.
E.g.
$("#mySpinningLoader").show();
var t = setTimeout(function () {
$.ajax({
url: rootPath + controllerNAction,
async: false,
type: "POST",
data: JSON.stringify(lightweightObject),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
$("#mySpinningLoader").hide();
}
});
}, 1);
I have several popovers (on a tags) that make ajax calls to populate their data-content. I'm using the following code to make the call:
<script type="text/javascript">
$(document).ready(function() {
$('.withajaxpopover').bind('hover',function(){
var el=$(this);
$.ajax({
type: "GET",
url: el.attr("data-url"),
data: el.attr("alt"),
dataType: "html",
success: function(data) {
el.attr("data-content", data);
}
});
console.log(el.attr("data-content"));
el.popover('show');
});
});
</script>
and then making calls like this:
blabla<br><br>
hahahaha
When I hover over one link, the popover comes up correctly, however after one popover has displayed, I get the following error when I hover on any other popovers:
Uncaught TypeError: Object [object Object] has no method 'popover'
When I look at the console, for all subsequent hovers the ajax is returning the correct data, but the popover just isn't appearing. Any ideas what I'm doing wrong?
I ended up having to use a whole other extension to accomplish what I needed. See: http://designwithpc.com/Plugins/Hovercard has much better ajax support and hover capabilities then bootstrap popover. And the js is very easy to modify to accommodate any specific needs. Highly recommended.
Try this:
$(document).ready(function() {
$('.withajaxpopover').bind('hover',function(){
var el=$(this);
$.ajax({
type: "GET",
url: el.attr("data-url"),
data: el.attr("alt"),
dataType: "html",
success: function(data) {
el.attr("data-content", data);
el.popover('show');
}
});
});
});
I have been learning AJAX for the best part of 2 hours, trying to get my head around how to get this to work, it seems it is calling the function as if I put an alert in, it all works fine.
I tried using another method and it seemed to call the function on it's own and it would load what the .php page is echoing.
What am I doing wrong in order for it to not work at all?
<script type="text/javascript">
$('a.fire').click(call_ajax);
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
</script>
Edit: I have also just tried
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
Which also does not work.
EDIT: I have now got code that GET's the php file I wanted, but for some reason does it on it's own
<script type="text/javascript">
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('a.fire').click(call_ajax());
});
});
The issue with this code is that it fires on it's own
EDIT: Now have new code, that is attempting to fire according to Firebug console but I get the alert ERROR: error, so I don't have a clue what is happening in order for it to fail, I have also tried many different URL's with no working solution
$('a.fire').click(function () {
$.ajax({
type: "GET",
url: "/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
},
error:function(xhr, text, error){
alert("Error: " + text);
}
});
});
SOLVED: I have now got it to work! For some reason my anchor had a href of "", which would cause it to reload the page and removing my GET from the page
ajax will only work if it's the same domain. This means that if you execute jQuery from domain x to domain y, it won't work. This is for safety-reasons to prevent websites from loading from another website. Does your jQuery-ajax call work if you remove the 127.0.0.1 from your url?
Furthermore I guess you should add the click-function inside your $(document).ready(); function, like this:
$(document).ready(function(){
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
});
for testing purposes, you can also use the complete function inside your ajax and alert your data. firebug can be helpful too to find your problem :)
i have a page loaded via jquery tabs ajax, i have a form within this page that i want to show form response via ajax. response is loading from this code:
$('#whois').submit(function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: $('#whois').attr('/lib/domainchecker.php'),
success: function(response) {
$('#reply').html(response);
}
});
return false;
);
but my form submit to parent page instead of /lib/domainchecker.php. so i see headers of my page instead of response!
any idea what makes this happen?
When you are loading content on the page via AJAX and you need to apply events to the loaded content you need to use the jquery live().
$('#whois').live('submit', function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: $('#whois').attr('/lib/domainchecker.php'),
success: function(response) {
$('#reply').html(response);
}
});
This of course goes on the main host page rather than the loaded content page.
problem is solved, no thing related to loading page via ajax but there was an error with code, i shouldn't post to $('#whois').attr('/lib/domainchecker.php') but just '/lib/domainchecker.php'
corrected code:
$('#whois').live('submit', function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: '/lib/domainchecker.php',
success: function(response) {
$('#reply').html(response);
}
});