I am trying to integrate popup plugin from https://github.com/webtechnick/CakePHP-Popup-Plugin. I just followed exactly as said on the above link. I am trying to load a element in popup hence i used this $this->Popup->link('click me', array('element' => 'my_element'));
but when i load on the browser i get this following error which i have no clue about it and i have been trying to fix this for last two days and pls help me resolve this error
SyntaxError: illegal character
...eldset>\r\n\t<a href=\"#\" onclick=\"$('#popup_1').show(); return false;\">click...
and any other possible solution to this would be appriciated.
Ok then see how implement webdesignandsuch.com/how-to-create-a-popup-with-css-and-javascript/
Now read the implementation from the above link, now what you have to do in cakephp is given below:
Step 1: Add these two lines in your layout file, lets say you are using default layout then inside body tags add:
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
These two lines will be used to create popup div and blanket
Step 2: Now You will see css-pop.js file there is one function
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
So you have to make one ajax request to get HTML of popup as example is shown below
$.ajax({
url: "test.html",
context: document.body
}).done(function(data) {
$('#popUpDiv').html(data);
popup('popUpDiv');
});
data would be html code which is a response of your ajax request.
Step 3: Create url of ajax request, lets sat ajax_signup.html
echo all the html part followed by exit.
Now you get an idea what I am trying to explain!
Related
I have a select.php page where the user selects a value from the dropdown. On selection the ajax code runs and information from ajax.php gets populated on the "display" div of the select.php page. Some of the information coming from ajax.php is in the form of textarea. But it gets displayed just as textarea, and not as tinymce editor. Even though I have called it in the head section of my page.
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea'
});
</script>
My problem is very similar to this: How do I initialize TinyMCE on a ajax loaded textarea in 4.x?
But I am not understanding the solution. Please help.
you can get data after that set data on tiny
success: function (data) {tinyMCE.get(data).getContent().replace('\'', "\’");},
Your call to tinymce.init() only acts on items in the DOM at the time the init() function is run. If you are adding additional <textarea> fields to the page later you need to run tinymce.init() after you add those elements to the DOM.
You can include a call to tinymce.init() in the same block of code that injects the <textarea> into the page directly after you inject the <textarea>.
I am trying to apply summernote, but here code view is not working, I have tried bellow code
$('.summernote').summernote({
codemirror: {
theme: 'monokai',
htmlMode:true,
lineNumbers: true,
mode: 'text/html'
}
height: 200
});
Here html mode is on, but if I write html after select code style it's showing output plane text.For example if I white
<html></html>
It's showing me nothing in output.How to solve this problem.
I think you have an error in your JS. Use chrome or Firefox and open the analyser and look if there are some errors that stops executing your javascript.
https://developer.chrome.com/devtools
Under the console tab you should get some informations. But normally if you have a correct structure and a div which has the class summernote:
<div class="summernote">summernote 1</div>
Then the div should be replaced by your editor before set out that nothing is missing and working. But i think you miss something or you have loaded something in wrong order and you get an error and you script stops running.
I have got following html
<a disabled="disabled"><img alt="First" src="/Content/Images/Grid/disabledFirst.png"></a>
And I run following expect on this html
expect($(element)).toBeDisabled()
where element is the selector for above html. The expect fails. Further investigation lead to following code in jasmine-jquery-1.3.1.js
toBeDisabled: function(selector){
return this.actual.is(':disabled');
},
which for some reason is returning false. I'm sure I'm missing something very basic here but just not able to spot it.
This fiddle shows that jQuery only finds inputs not anchors when using :disabled. It's understandable because the anchor element doesn't have the disabled property
I have a page with a lot of buttons on it. I need to get data from database when I click on each of them . I need to implement some jQuery styling for which I need to use AJAX to do it. How do I pass the url of the button to the "ajax.php" page(where my processing is done and where I can use my GET method to retrieve data from the database).
A few points of clarification:
First, jQuery can be used for communication via AJAX, and also for "styling" (that is, controlling layout elements and interacting with CSS. However, styling and AJAX do no intersect. AJAX is used to allow a page to communicate with a server. Styling controls how the page looks and acts.
Second, buttons do not have URLs. You can give them IDs, classes, or names, but not URLs. As noted in the comments, you can wrap your button in an anchor tag (<a>) to easily assign an action to it.
If you are already comfortable with building HTML forms and passing data to server-side scripts for processing, I suggest that you check the jQuery website for helpful documentation and tutorials.
If you are unfamiliar with HTML forms, there are a great many tutorials available via your favorite search engine.
If you are unfamiliar with server-side scripting, PHP is a language that is easy to pick up and learn quickly.
Well as your buttons are actually links you can do something like following
HTML:
<a class="btn" href="myurl.php?id=2"></a>
Jquery:
$('.btn').click(function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
type: 'GET',
success: function(data){
alert('server respond with' + data)
}
});
})
<a class="button" href="page.html">do some ajax</a>
<script>
$('.button').click(function() {
var btn_url = $(this).attr('href');
$.get('ajax.php', {url: btn_url}, function(data){
alert('done');
});
return false;
});
</script>
Since you talk about "buttons" and "urls" I think you mean <a>-tags styled as buttons, because <button> does not have something like a href-attribute. <a>-elements should not be abused as buttons - that's what <button> is for, actually. You can apply some information to the id or class-attribute though, e.g.
<button class="button" id="page">do some ajax</button>
Then you could gather the 'url' with
var btn_url = $(this).attr('id')+'.html';
So have a look at jQuery.get (or jQuery.post, if you like) and try to use XHTML in the way it was meant to ;)
I have a web page that displays comments, and users can click a 'Flag' link to report an inappropriate comment.
When they click the Flag link, I use AJAX and innerHTML to display a dropdown box underneath the comment with a reason code, e.g. Spam, Offensive, Unrelated to topic, etc., as well as a Cancel button.
If the user clicks Submit, I want to use another AJAX request to send their response to a PHP file, where the database is updated, and they receive a "Thank you" on their end (without reloading the page). I essentially want the DIV that displays the dropdown box to be replaced with "Thank you" using another AJAX request.
That's where the problem is. It seems that I cannot execute an AJAX request from within the HTML response from the first AJAX request. The JavaScript functions fail -- even a simple Alert('hello world') doesn't work. I tried placing the JavaScript functions in the main page that calls the first AJAX request, as well placing it in the PHP file that displays as the HTML response from the first AJAX request, but I did not have any luck -- the functions just do not run when they are called.
Everything works fine if I load the PHP file externally, so I know the JavaScript is correct. It just doesn't work when I load the PHP file into the HTML response DIV and then call the JavaScript from there.
So to sum everything up, how do you execute JavaScript functions from the HTML response of an AJAX request?
EDIT: here is a sample of what I want to do:
This is the AJAX part that populates the DIV when the person clicks the Flag link:
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4)
{
document.getElementById(whichdiv).innerHTML=xmlhttp.responseText;
}
};
The value of xmlhttp.responseText comes from this external file:
<input type="hidden"/>
<script type="text/javascript" language="javascript">
function displayalert()
{
alert ('Hello World!');
}
</script>
<form name="myform" id="myform">
<input type="text" name="myfield" value="teststring"/><br/>
<input type="button" name="button" value="Submit"
onclick="displayalert();"/>
</form>
Note: the <input type="hidden"/> above comes from a suggestion I found off of http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.
When the user clicks the button, the javascript displayalert() function doesn't run. The alert box never pops up. If I load the file externally instead of calling it with innerHTML, the script works fine.
Can the xmlhttp.responseText contain JavaScript code?
depends on the browser:
IE doesnt support scriptEval on html that is loaded with ajax, which means that if you have script blocks in your html, they wont be called.
Firefox supports script eval.
What i usually do is shove some json into an input, then check if the browser supports scriptEval, if it doesnt, pull the json, eval it, and call some method passing json.
if the browser supports scriptEval, i also include a script block that contains a call to the same method with the json.
you may also want to read this:
http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html