Ok, i have a function that is called when in image is clicked. For some reason it is only calling one time when i click it and I'm a little puzzled as to why.
Here's my javascript (combined with a small amount of razor), essentially all it does is call a post method in the controller that returns a partial view and updates that partial view.
function mFunction() {
#{ x = x = 1; }
$.post('/Home/_MyPartial', { 'param1': "#x" }, function(result) {
$('.myUpdatedDiv').html(result);
$('.anotherDiv').empty();
$('.anotherDiv').append('#x');
});
}
Then i have my tag like this
Hello
It updates the view perfectly fine as i expect it to, with some goofy exceptions.
It does hit the controller every time it is clicked (multiple times). So i know it's working that way
The page itself does not get updated and nothing gets replaced a second time. The controller successfully returns the partial view, but the javascript only updates it once.
So i'd appreciate any help as to why it isn't updating more than once.
thanks
edit
Ok lets say i do this:
#{ int x = 0; }
<script type="text/javascript">
function tester() {
#{ x++; }
$('.H').empty();
$('.H').append('#x');
}
</script>
<div class="H"></div>
Click
Clicking on the tag will display '1' and clicking it on it will always display '1'. Does this have something to do with the razor code only rendering once or something? is there a way around it?
try this
<script type="text/javascript">
var indx = 1;//Set this to be the value from the model you want to display
function tester() {
$('.H').empty();
$('.H').append(indx);
indx++;
}
</script>
<div class="H"></div>
Click
Razor code is only run on the server, when the page has been downloaded all you have is the javascript with the Razor values output in place so your second example will look like this:
<script type="text/javascript">
function tester() {
$('.H').empty();
$('.H').append('1');
}
</script>
<div class="H"></div>
Click
This is why it will only ever append 1.
I suggest you use Firefox's Firebug or the Web Console (Ctrl+Shift+K) to look at the asynchronous calls. You'll know there if the browser is actually hitting the server on every click (and you can even see with what parameters whether POST or GET).
It looks like it should be contacting the server everytime, but because state is not kept between calls, you are always getting the same result after the 1st call (because you are always sending the same X value after the first call).
Related
My web application is one of those "single page" styled applications which replaces <div> content via ajax. In the case where we wish to show a modal dialogue to the user, this function is called:
function OpenWindow(name, title, params)
{
var winParams = SetWindowParameters(name, title, params);
var container = $('div.k-content[id=\'' + name + '\']');
if (container.length > 0)
container.data("kendoWindow").destroy();
container = $('<div/>', { id: name }).css('display', 'none');
container.appendTo($('body'))
if (params.content)
container.html(params.content);
var window = container.kendoWindow(winParams);
window.data("kendoWindow").center().open();
}
One sample value for params is such:
params = { content: response, draggable: true, wizard: true };
And response contains the result from public ActionResult ShowSomePopup which returns a ViewResult object.
So another function makes an ajax request, gets some HTML back from the server and then passes that response object to OpenWindow.
This view I'm returning is a Razor View. The cshtml file looks sort of like this:
<div id="SomeDiv">
<!-- the rest of the form -->
</div>
<script type="text/javascript">
$(document).ready(function ()
{
//some code
});
</script>
I've found:
How can I debug my MVC3 site with Chrome? - Accepted answer is 6 years old and my Chrome looks very different. If I load up the dev tools and click on the script associated with my page, the content of this file is empty regardless if I use Firebug or Chrome's debugger: https://i.stack.imgur.com/lbjVU.png and the second answer is not helpful for me as my <script type="text/javascript> ... </script> is not 'within' any of the braces for the razor code.
Using Chrome JavaScript Debugger / How to break on page loading events - I don't understand the accepted answer, but the second answer with a +100 Bounty does not work for me. I checked the DOMContentLoaded checkbox it never triggers for me.
How can I debug javascript contained in $(document).ready()? - Again, since the script is defined in a cshtml file it does not show up under the Sources tab in the debugger.
The only solution I've found is to simply move the contents of the cshtml's script into a JS file and call that function from the cshtml's $(document).ready script. But this is a colossal pain in the butt when I have hundreds of view files; I can't really take the time to go through and move everything all around.
The question: How can I use Chrome to debug a modal dialogue's document.ready function which is defined in a razor view?
Write "debugger" in your js in a cshtml file so that Chrome hits the breakpoint and then you can step through when your browser developer tools is open.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<script>
$(document).ready(function () {
debugger;
alert("Hello world");
})
</script>
</div>
Other references: https://www.w3schools.com/jsref/jsref_debugger.asp
I'm making a component in React that has Facebook data pulled from an API call. The API call returns and updates a list, which render() will then populate with tags that are supposed to be converted to actual images by a script from Facebook's website. Something like this:
<a data-pin-do={'embedData'} href={'https://www.facebook.com/data/12345'} />
My html file includes this script, which I assume runs through the HTML code and converts the tags to something viewable.
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
However, the problem I'm running into is that the script only runs when the webpage initially loads, and then never again. Since I'm adding more tags in an API call and then updating the list via the props, it means I'm left with a bunch of tags that don't get converted when the call returns.
I've inspected the React console & html and can confirm the tags are there, it's just that the dynamically converted tags don't show up as pins.
I've already tried using jquery and document.appendChild() to add/get the script in componentDidUpdate(), but it doesn't seem to be working. Anybody have any clue how I can get around this?
If you look in your devtools you should see that when the html page loads this script it is just making a GET request to the script src (http://assets.pinterest.com/js/pinit.js). So, you should be able to recreate that behavior by making a simple http GET request to that url each time you need to rerun the script.
Try using:a do-while in your script:
var repeat = 0
Do {
// Your code goes here
repeat = repeat + 1
} while(repeat <= 10)
Note: replace 10 with times you want the script to repeat
If you wan't to add a rule to this (so it only runs when...) do:
var repeat = 'yes'
Do {
// Your code goes here
} while(repeat == 'yes')
Now your code will only run when repeat is equal to yes
In action
Stop repeating
Start repeating
<script>
var repeat = 'yes'
Do {
// Your code goes here
If(var1 == var2) { repeat = 'no' }
} while(repeat == 'yes')
</script>
I have GridView with data which works perfectly fine and everything loads correctly. I need to extract data from one column using button but the function will always return undefined even it's loaded correctly.
In same .cshtml file with grid and button I have this "simple" script with 2 functions:
<script id="dxss_1610925110" type="text/javascript">
function ShowValue() {
gridViewINS.GetRowValues(gridViewINS.GetFocusedRowIndex(), "Insolvency.FileNumber", gridViewINSOnGetRowValues());
}
function gridViewINSOnGetRowValues(value) {
alert(value);
}
</script>
Now when I click the button two alerts pop up. One is undefined. The second is literally snippet of my code which has the value in it which I need. So it can get somehow the data but why not directly to value property? I can't find what I am doing wrong. Any help will be appreciated.
I think you need to remove the parentheses () from gridViewINSOnGetRowValues().
Like so:
gridViewINS.GetRowValues(gridViewINS.GetFocusedRowIndex(), "Insolvency.FileNumber", gridViewINSOnGetRowValues);
I really want to know if there is a shorter alternative to writing this code. I have attempted to shorten it to 2 or 1 functions and achieved miserable failure. I'm seeking constructive feedback!
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function f_solar_1() {
$.get("f_solar_1.php");
return false;
}
</script>
<script type="text/javascript">
function refresh(){
location.reload(true);}
</script>
<script type="text/javascript">
function both(){
f_solar_1()
setTimeout(refresh, 5);
}
</script>
Activate
Details:
This code is an excerpt from my php page that displays a table from my mysql database (I'm using wamp).
The "Activate" text at the bottom is supposed to UPDATE a variable on that table, and does so via the f_solar_1.php file.
The issue is the table reflecting the database does not automatically reflect this change.
So I made a "reload()" function to refresh the page, and the "both()" function to time the refresh after updating the database.
I have known basic html for a while, but I am new to mysql, ajax, and php as of this morning, and this is my attempt to dive into it.
My code works fine, it just bothers me not knowing if I can accomplish the same thing within one function.
Thank you in advance!
UPDATE: Thankyou to Dat Pham for pointing me in the right direction!
<script type="text/javascript">
function newfunc(){
$.get( "f_solar_1.php", function( data ) {
location.reload(true);
});}
</script>
<span onclick="newfunc();">newfunc</span>
The code is all in one function (well...) and without causing a refresh and php recall timing conflict.
Making 1 function do all the thing is considered bad practice, a function should do and only do an atomic task. Your code is fine except some minor points:
ajax call $.get() and location.reload should not be used with each other as this destroy the meaning of ajax call. You can pass a callback function to handle data from backend server like
$.get( "f_solar_1.php", function( data ) {
alert( "Load was performed." );
});
Combine all your script tags into 1 with all your function declare
Regards,
Have you checked the database through the backend (phpmyadmin for example) and verified if the changes are being made even though it's not displaying?
i'm wondering if your page isn't really refreshing, and simply going to "#". Check the "return false" - it's not really applying to the "A" link, you would have to put "return false" in the 'both' function for that to cancel the link. But you might not want to do it that way after taking a minute to read this: The return false onclick anchor not completely working
additionally, I'd recommend using the jquery add event listener to trigger your function calls, and get the onClick out of your html tag. Bonus if you learn how to do it without jquery. Read this real quick jquery href and onclick separation
I am having trouble using the jQuery AJAX call. The query runs properly and debug output also shows the correct data, but anything apart from the first PHP conditional in the document being called is not being shown.
First, there are two buttons, one linked to "core" the other "email":
Here's the relevant JavaScript:
$("#core").click(function(){
loaddetails ("core");
});
$("#email").click(function(){
loaddetails ("email");
});
function loaddetails(type) { var query = "details=" + type;
$.post("details.php", query , function( data ) {
$("#d-features").html(data); alert (data);});
return false;
};
And the contents of details.php:
<? if($_POST['details']=='core'){ ?> blah1 <? }
if($_POST['details']=='email') { ?> blah2 <? } ?>
Both "blah1" and "blah2" appear in the alert box debug output. But, only "blah1" ever gets posted on the page div (#d-features), as "blah2" never appears on the page.
I have checked Firebug and there are absolutely no errors. But I suspect the second conditional request may have gone in a loop, as the alert window showing up when "email" button is clicked shows "Prevent page from creating additional dialogs", though no additional dialogs show up even when unchecked.
What is causing this problem and how to fix it?
.html() replaces the content instead of appending.
Try changing that line to see if all the data is returned from both calls:
$("#d-features").html(data); ==> $("#d-features").append(data);
A small modification on your code, you could try to see if this works:
function loaddetails(type) {
$.post(
"details.php",
{
details: type
},
function( data ) {
$("#d-features").html(data);
alert (data);
}
);
return false;
}
Ok, it seems to be a conflict with the tabs effect I loaded for a div that encompassed these links. So once I removed that effect, it works now. But I'm not sure what is wrong with the effect yet, I'll post another question to figure it out.
Thanks to those that offered assistance!