I Would like to know if there is a possibility to modify an external js file via ajax post, for example:
Into my external js file i've got a variable :
var color;
So i would like my users to be able change the value of this variable by typing the HEX code into an input text form.
So when the type and press submit button to grab this value and post it to external js file and modify the variable.
I want something like this:
var colorVal = $('input').val();
$.post("external-file-js.js", {color: colorVal}, function(result){});
In external js file something like:
var color = $.get(colorVal); // HERE i dont know how to grab the value
$('body').css('background-color',color);
Thank you :)
I need to understand the use case you are intending in order to provide a full answer. If all you are attempting to do is change the background color, why do you need to run an AJAX post at all? Why not just change it?
In extenal.js (which is included in html body):
function changeColor(color) {
$('body').css('background-color',color);
}
Then you bind the following event to the input:
$('input').change(function () {
// Though you may want to perform validation first.
changeColor($(this).val());
});
The only problem is if you need to change it long term, for multiple users. Then you would need to store the value server side (with a post and some type of CRUD system, in which case, check out JSON/JSONP)
It can be done. You would have to use some back-end code to rewrite your JS file. You would then need to remove any binds and use a script to reload your js document on the fly. Here is an example of loading JS on the fly. http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/
I am not sure why you would do this. I would just rework my JS file so I can avoid this mess.
Related
hi
sorry for the bad title but I'm not 100% sure what I need for this problem
I created a welcome page and then when you click on links you get more information, for example:
Click Me
And then the php would get the information based on the id.
so the information received is reloaded on the page after the pages refreshes
what I would like to be able to do is when user clicks on the link, use jquery to not allow the link to run but still run the url in the background (without refreshing the page)
I have no idea where to start from so I really hope you could help
thanks
In a nutshell, it's called Ajax: sending an HTTP request to your server through javaScript, and receiving a response which can contain results, data, or other information.
You mention jQuery, here are the docs about that:
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.post/
are convenience methods, which encapsulate $.ajax with preset options.
http://api.jquery.com/category/ajax/ is an overview of the whole system in jQuery.
The basics go like
//include jquery, etc.
$(document).ready(function(){
$('#some_element').click(function(){
$.get('some_url_on_your_server.php',{'data':'whatever params'},function(data){
do_something();//
},'json');
});
This will bind an element to make an Ajax call on click, and then you use the function ('success' function, in $.ajax) to handle the json data.
Have your server send back the data in JSON by using json_encode in php. Be sure to send the right header back, like
<?php
header('Content-Type: application/json');
echo json_encode($some_array);
exit;
There's a lot of resources on the web and SO for learning about Ajax, it's a big topic. Best of luck.
Make a JavaScript function, like sendData(linkId) and then each tag would have an onclick event called sendData(this). SendData(linkId) can then do an HTTPRequest (also known as an asynchronous or AJAX request) to a php file, let's call it handler.php, which receives GET or POST methods. I prefer using the prototype framework to do this kind of thing (you can get it at prototypejs.org).
Okay, now that I have said all that, let's look into the nitty-gritty of how to do this (way simplified for illustrative purposes).
Download the prototype script, save it on your server (like prototype/prototype.js, for example) and then put somewhere in your html <script type='text/javascript' language='Javascript' src='prototype/prototype.js'></script>
Your tags would look like this:<a id='exampleLink' onclick = 'sendData(this)'>Click me!</a>
You need JavaScript to do this: function sendData(tagId){
var url = 'handler.php?' + 'id=' + tagId;
var request = new AJAX.Request(url, {method = 'get'});
}
Finally, you need a php file (let's call it handler.php) that has the following: <?php
$tag_to_get = $_GET['tagId'];
do_a_php_function($tag_to_get);
?>
That's it in a nutshell, but it's worth mentioning that you should give your user some sort of feedback that clicking link did something. Otherwise he will click the link furiously waiting for something to happen, when it is actually doing just what its supposed to but in secret. You do that by making your php script echo something at the end, like 'Success!', and then add an onSuccess parameter to your JavaScript's new Ajax.Request. I'll let you read how to do that on your own because the prototype website explains how to receive a response from the handler and put the feedback somewhere in your HTML without making the user refresh.
you can achieve that behavior with a jquery function called $.get ... you can get more information on how to use here http://api.jquery.com/jQuery.get/
If you really want to (and I don't think you really do), you can use XMLHTTPRequest (wrapped in jQuery.get) to facilitate loading content into the page without page refreshing. You want an id or class on that tag, i.e. Click Me, and then:
<script>
$(".fetch").bind("click", function(evt)
{
$.get(this.attr("href"), function(data)
{
$("#whereIWantMyContent").html(data);
});
evt.preventDefault();
});
</script>
I would recommend you use AJAX to start with. A good place to being is http://www.w3schools.com/Ajax/Default.Asp
The link comes with a handy AJAX ASP/PHP Example too =))
Good Luck.
I am trying to use CodeIgniter and jQuery-ui dialog to create a modal window with form to update user information.
The process should be like:
1. Press a button on a view page.
2. A modal window pops up.
3. Inside the window is a form that a user can fill.
4. If the user filled something before, the information should be shown in corresponding field
5. Click the update button on the modal window to save the changes to database.
Can anyone provide a good sample of this process?
I used ajax to pass the data but it didn't work when I was trying to update the data to the database. It would be nice if an example of how to pass data from ajax to php and how php handle that.
Thanks,
Milo
well the jquery bit for post(), get(), ajax() works the same in any measure you would normally use it.. key difference here is with CI you can't post directly to a file-name file-location due to how it handles the URI requests. That said your post URL would be the similar to how you would access a view file normally otherwise
ie: /viewName/functionName (how you've done it with controllers to view all along. post, get, ajax doesnt have to end in a extension. I wish I had a better example then this but I can't seem to find one at the moment..
url = '/home/specialFunction';
jQuery.get(url, function(data) {
jQuery("#div2display").html(data);
});
in the case of the above you notice despite it not being a great example that. you have the url with 2 parameters home and specialFunction
home in this case is the controller file for home in the control folder for the home file in views the specialFunction is a "public function" within the class that makes the home controller file. similar to that of index() but a separate function all together. Best way I have found to handle it is through .post() and a callback output expected in JSON cause you can form an array of data on the php side json_encode it and echo out that json_encode and then work with that like you would any JSON output. or if your just expecting a sinlge output and not multiples echoing it out is fine but enough of the end run output thats for you to decide with what your comfortable doing currently. Hopefully all around though this gives you some clairity and hopefully it works out for you.
After processing a jQuery Ajax Post from an HTML form successfully within a Go program, how do I load a new form? I first tried sending the form as the response and the Javascript displayed it, but it did not clear the old (existing) form. I then tried within the HTML Javascript to set the URL using "window.location = 'localhost:8088/MaintForm/'". That resulted in a warning from the browser but did not load the form and did not change the URL. I would like to ideally know both methods - via the Go program acting as a server, and via Javascript. If I manually change the URL, the form loads OK. What I am trying to do is receive a response in Javascript (jQuery Ajax), and then request the new form if the response is positive. I would prefer to do this without changing the URL. As I said above, this partially worked.
You would have to put your original form inside a tag, for example a div, and use your JQuery code to replace the contents of that tag with the new form. This way you are not changing the URL.
This is more of a javascript/JQuery question than a go-specific one.
In javascript:
location.href = '/MaintForm/';
In golang, you can use the http.Redirect function, like this:
http.Redirect(w, r, "/MaintForm/", http.StatusFound)
Please note: this appears to be solved by : I just need to do an "document.write(data);" in Javascript. "Data" contains the new HTML.
I have a website with several views, and most of them have a jqGrid on them.
I'd like to set some base options on all my jqgrids. For example, I'd like the view option to always be set to true, and the search option to always be set to false.
Additionally, there are several that I'd like to have the same button labels.
Is there any way to do this with a jqGrid?
Look at the answer which shows how to set default settings jQuery.jgrid.nav. In your case it would be
jQuery.extend(jQuery.jgrid.nav,
{search:false,view:true, viewtext:"View label", viewtitle:"View tooltip"}
);
Other default settings you can change in the same way using jQuery.jgrid.del, jQuery.jgrid.view and of course jQuery.jgrid.defaults.
You don't need to place the code inside of jQuery(document).ready(function() {/**/});. It is enough just ecxecute the code like jQuery.extend(jQuery.jgrid.nav, {search:false,view:true}); inside a JavaScript file loaded after the jquery.jqGrid.min.js.
You could add an additional script tag to your HTML that references a JS file with some base configuration stuff for the grid in a $().ready(function() {}); block.
You could also create a base configuration function or variable that you store in that external JS, and reference that configuration on each view page.
I would prefer to write the base function, and not the ready event handler as the ready handler will NOT run at a predictable time. You won't know if it properly ran before your jqGrid configure function ran.
want to do multiple div elements hide using ajax helper on getting response.but not using like this complete=>element.hide(div1),element.hide(div2),element.hide(div3),element.hide(div4)
If your question is how to hide multiple elements after an ajax response, you'll need to set up some javascript to do this. It depends on the javascript library you're using, but basically, you'll set $options['complete'] to something like "doStuffAfterComplete()".
Then, create a javascript function, like you normally would with your js library of choice. Using jQuery? Then it would be something like:
function doStuffAfterComplete(data) {
$('div.whatevs').hide();
}