I want to pop-up a jQuery Ui Dialog, but it doesnt work. Instead of dialog, i get a new page opened. My code is next:
Controller's action:
public function diaAction()
{
$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return new ViewModel();
}
index.phtml:
<a class="some-link" title="title here" href="<?= $this->url('dialog', array('action' => 'dia'))?>">open form</a>
dia.phtml (dialog code)
<script type="text/javascript">
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
</script>
I just don't get it, why this is not as simple as it should be. Any help?
You have to handle 'click' so it show the dialog instead of following a link. Something like this:
$('.table a.button').on('click',function(e){
e.preventDefault();
$('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
In my opinion, the javascript is just not at its right place. It is called by the index.phtml, not the dia.phtml. How can it be executed it the browser just doesn't know the existence of it?
I think my answer comes too late for you but I hope it will help some other people.
Related
The Question
How could I make it where when you pull <div id="content"> down, it does a function and shows a div at the top of the screen that says "Pull Down To Refresh"?
I know iScroll does this, but it won't work with what I'm trying to do. It only works with UL's.
Here is my HTML
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
</span>
</div>
<div id="content">
(There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>
<script>
$(function() {
var refreshCallback = function(loader) {
setTimeout(function(){
//loader.finish();
}, 1000);
};
var cancelRefreshing = function() {
};
$("#draggable").pulltorefresh({
async: true,
// event triggered when refreshing start
refresh: function(event, finishCallback) {
element = $(this)
setTimeout(function(){
alert("refresh");
// you must call this function if refreshing process runs asynchronusly
finishCallback();
}, 1000);
},
abort: function() {
alert("abort");
}
});
});
</script>
for full Demo Click Here
You can provide with iScroll plugin.
iScroll 4: http://cubiq.org/iscroll-4
Github Page: https://github.com/cubiq/iscroll
Demo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
try this
$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );
inside the function u can have the ajax call to load the content
$("#content").load("<something.php>");
that is on the whole
$( "#pullDown" ).on( "dragstart", function() {
$("#content").load("<something.php>");
} );
I'm working on a system using jQuery UI that opens a dialog which basically loads a continually refreshing tail of a log file. It works great, but the problem is that when you close it, it doesn't kill off the dialog, so it still continues to send traffic to you with the tail of the file. Obviously it is not a good practice.
Anyway, the code I have so far to try and tackle the problem is as follows.
var $console = $('<div title=" Server Console"></div>')
.dialog({
height: 720,
width: 1000,
resizable: false,
autoOpen: false
});
$(".consoleOpen").click(function(){
$console.dialog('open').load("console.php?console="+this.name);
});
$console.bind('dialogclose', function(event) {
$console.remove();
});
This is the refresh function in console.php:
(function($)
{
$(document).ready(function()
{
var $container = $("#responsecontainer");
$container.load("console_class.php?console=<?php echo $console; ?>");
var refreshId = setInterval(function()
{
$container.load('console_class.php?console=<?php echo $console; ?>');
}, <?php echo $consoleRefresh;?>);
});
})(jQuery);
Look at the API function destroy()
$console.bind('dialogclose', function(event) {
$console.dialog('destroy').remove();
});
You also need to use clearInterval or else it will keep running as long as the page is open.
$console.bind('dialogclose', function(event) {
$console.dialog('destroy').remove();
clearInterval(refreshID);
});
Try this:
$console.bind('dialogclose', function(event) {
$console.dialog( "destroy" );
});
or read this jQuery Dialog
You mentioned it already
$console.dialog("destroy");
The dialog is not the issue here - it's the interval that's making the call.
Where you declare refreshId do it like this...
var window.refreshId = setInterval(function()
Then where you remove the dialog, add a clearInterval...
$console.bind('dialogclose', function(event) {
$console.remove();
clearInterval(window.refreshId);
});
That makes the variable refreshId global so that it can be accessed elsewhere in your code. You can then use it to clear the interval that is making the repeated call.
I've had this same problem...
See:
jQuery UI dialog close doesn't clear dialog (Stack Overflow question)
Creating dialogs on demand (blog entry)
You need to call $('#dialog_id').dialog("destroy");.
I have got the following code to show a dialog box when the image is clicked. Instead of running FB.ui I want to run PHP code. It's for facebook.
<html>
<head>
<style> img#share_button { cursor: pointer; } </style>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
This is the image:
<img id = "share_button" src = "img.png">
And this is the code I need to change:
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui({
method: 'feed',
name: 'TabPress1',
link: 'http://www.hyperarts.com/',
picture: 'http://www.hyperarts.com/',
caption: 'I am a fan of TabPress',
description: 'TabPress -- Gotta love it!',
message: ''
});
});
});
</script>
</body>
</html>
I don't know any JS, hope you can help me!
If you don't know any javascript, perhaps it's best if you check out some beginner tutorials, like those at http://net.tutsplus.com/category/tutorials/javascript-ajax/?tag=basix , but in regard to your question...
It looks like your using jQuery. The best way to do what your describing is to use AJAX, and jQuery has nice functionality for that.
To select an element from the DOM based on it's ID in jQuery, just do this:
$("#TheIdOfYourImage")
now, to listen for when it's been clicked,
$("#TheIdOfYourImage").click(function(){
//DO SOMETHING
}
Now, for the AJAX fun. You can read the documentation at http://api.jquery.com/category/ajax/ for more technical details, but this is what it boils down to
$("#TheIdOfYourImage").click(function(){
$.ajax({
type: "POST", // If you want to send information to the PHP file your calling, do you want it to be POST or GET. Just get rid of this if your not sending data to the file
url: "some.php", // The location of the PHP file your calling
data: "name=John&location=Boston", // The information your passing in the variable1=value1&variable2=value2 pattern
success: function(result){ alert(result) } // When you get the information, what to do with it. In this case, an alert
});
}
Why you don't use an href attribute with removing underlying and coloring of the link and launch your php script?
As you have jQuery already there: Send an AJAX-Request:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#share_button').live('click', function(e) {
e.preventDefault();
$.ajax('/path/to/your/script.php');
});
});
//]]>
</script>
cf. the jQuery documentation for further information: http://api.jquery.com/jQuery.ajax/
Additionally I added CDATA-Tags to avoid problems with HTML-Special-Chars. These special chars would normally have to be encoded.
The FB.ui(param1,param2) method can take two parameters. You've specified the first one that dictates how the feed dialog is displayed. Param2 can be your callback function
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
In the code switch for post was published, you can then use jQuery to make an AJAX call to one of your PHP pages. See: http://api.jquery.com/jQuery.ajax/
to run a javascript function when button is clicked:
<img id = "share_button" src = "img.png" onclick = "dothis()">
here is some basic javascript:
<script type = "text/javascript">
function dothis(){
alert("Button pressed");
}
</script>
This is just some basic javascript that will make a message appear on the screen when the button is clicked
EDIT: It appears you want to use JSON. Take a look at this:
http://ditio.net/2008/07/17/php-json-and-javascript-usage/
Based on your comments, I think you want to do something like this:
$(document).ready(function(){
// on click
$('#share_button').live('click', function(e){
e.preventDefault();
// any parameters you need to pass to your php script,
// you can omit the data parameter if you don't need it
var data = { param1: "a", param2: 2 };
// start the ajax request
$.post("your/script.php", data, function() {
// when the ajax request completes, show the FB dialog
FB.ui({
method: 'feed',
name: 'TabPress1',
link: 'http://www.hyperarts.com/',
picture: 'http://www.hyperarts.com/',
caption: 'I am a fan of TabPress',
description: 'TabPress -- Gotta love it!',
message: ''
});
});
});
});
Relevant javascript references:
.live()
$.post()
FB.ui()
I am working with AJAX with prototype and PHP. It is working for me but I need some small changes. Following is my running code for AJAX request:
JS/Prototype:
function ajaxRequest(url) {
new Ajax.Request( url, {
method: 'get',
onSuccess: function( transport ) {
// get json response
var json = transport.responseText.evalJSON( true );
alert(json);
},
onFailure: function() {
alert('Error with AJAX request.');
}
});
return false;
}
HTML:
<a href='javascript:ajaxRequest("/testajax/ajaxresponse");'>Testing AJAX</a>
Question:
Now I want to change my link like this:
<a href='/testajax/ajaxresponse' class='AjaxLink'>Testing AJAX</a>
So prototype function should capture click event of class='AjaxLink' links and then get href part of clicked link and proceed. How can I change my above prototype function for such kind of links.
Thanks
If you have Prototype 1.7 then this way is available:
document.on('click', 'a.AjaxLink', ajaxRequest.curry('/testajax/ajaxresponse'));
Otherwise you'll have to rely on good old Event.observe:
$$('a.AjaxLink').invoke('observe', 'click',
ajaxRequest.curry('/testajax/ajaxresponse'));
Just re-read the question and I see you want to use the href attribute. Jan Pfiefer was very close.
document.on('click', 'a.AjaxLink', function(event, element) {
return ajaxRequest(element.href);
});
This wont work. Why do you want such a link? If a link is specified in this way any click on it will follow its href and change location of actual document. Only way to prevent such a behavior then is by adding onclick again or in $(document).ready bind onclick handler, and manualy cancel the event.
UPDATE
However to bind onclick event on all links with AjaxLink class,execute request and cancel the event:
$(document).ready(function(){
$('.AjaxLink').click(
function(e){
ajaxRequest(this.href);
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
);
});
This will work:
$$('a.AjaxLink').each(function(element) {
element.observe('click', function(e) {
var element = e.element()
Event.stop(e)
alert(element.href)
});
})
I am trying to integrate new functionality using jQuery UI's dialog.
I have a page with a link. When a link is clicked a modal dialog with a form in it opens. That part works OK.
$("#myForm").hide();
$("#myLink").click(function(){
$("#myForm").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function() {
// ???
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Open Dialog
<div id="myForm">
<form>
<textarea id="myValues" rows="10"></textarea>
</form>
</div>
Now, I need to submit the form from within my dialog and POST results to the same page. I am getting all confused with how to implement the rest. I did look at the jQuery .post() example which made me even more confused. The page is in PHP, so when the results are submitted I need to get the post value and do some server-site action.
if (isset($_POST["myValues"])) {
// do something
}
Stuck, need help.
In jQuery function for "Submit" button:
$('form#myFormId').submit();
And in HTML:
<form id="myFormId" method="POST" action="processingscript.php">
Then the php script will get all the values that have been POSTed and can process them.
Look into using the jQuery submit function
Reference: http://api.jquery.com/submit/
Use this method that updates dialog content:
$("#myformid").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function (event) {
event.preventDefault();
var formvalues = $("#myformid").serialize();
$.post('/Home/Edit', formvalues, function (data) {
//use data
$('#myformid').html(data);
}, "html");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
In the Control,
[HttpPost]
public PartialViewResult Edit(ViewModel model) {
//use data
return PartialView("MyDialogView", model);
}